Projet entrepreneurial auquel j'accorde la moitié de mon temps, c'est la raison principale pour laquelle je suis passé freelance il y a maintenant 4 ans.
Mangacollec est une application de gestion de collection de mangas qui compte à ce jour 27k utilisateurs.
J'ai commencé à developper cette application avec React-Native il y a 4 ans et demi, en parralèle de mon travail, puis entre deux missions. Elle est présente sur les stores depuis 2 ans et demi.
Ce projet est aussi mon lab R&D, je teste les dernières technologies en condition réelle de production avant de les recommander.
Projet "start-up" au sein du group AccorHotels.
Reprise d'une application existante (2-3 mois de développement) pour fixer, refactorer et developper de nouvelles features sur 6 mois.
Amélioration des performances des gestures et animations. Ajout du 3D secure pour le payement avec Stripe. Itérations design regulières, conjoitement avec le PO, puis refonte avec la V3.
La React Context API n'est pas seulement appréciable pour gérer la data façon redux-like, elle est aussi pratique pour des utilisations UI.
Je présente quelques exemples UI d'utilisation de l'API React Context avec les Hooks, créés lors de mon dernier projet : GridContext, ModalContext, ScrollContext, etc.
Meetup React.js Novembre 2019
Présentation de l'API Animated pour faire des animations dans React Native. Avec comme exemple : comment refaire un effet parallaxe au scroll bounce.
Et introduction aux interpolations pour les animations contrôlés par gestures.
- Slides : react-native-animated-keynote.surge.sh
- Code Source : snack.expo.io/@freddy03h/animated-header-scroll
- Demo Expo : lly6lr4nvz.codesandbox.io
Conférence BestOfWeb Paris Juin 2019 ◦ Meetup React.js Février 2019 ◦ Meetup Paris.js Novembre 2018
Présentation de la libraire React Navigation, très utilisée dans les projets React Native.
Pourquoi la navigation est différente sur mobile par rapport au web ? Pourquoi on utilise pas juste react-router ? Comment s'y retrouver parmi toutes les libs de navigation ?
Et présentation théorique et pratique de React Navigation avec retour d'XP.
Meetup Paris.js Février 2018 ◦ Meetup React.js Février 2018
Comment faire des animations aussi fluides (60fps) que sur des app natives ? On verra comment fonctionne le navigateur (Layout + Paint + Composite) pour comprendre pourquoi il faut n'utiliser que les propriétés opacity et transform.
Puis, à partir de cette contrainte, simuler quand même des animations de Layout avec la technique F.L.I.P.
Version longue et à jour de deux talks précédents.
- Slides 1re partie : web-anim-perf-keynote.surge.sh
- Slides 2e partie : flip-keynote.surge.sh
Meetup WebPerf Paris Octobre 2017
Pour faire des animations performantes sur mobile on ne peut utiliser que opacity et transform.
Mais cette optimisation pose des contraintes de design très forte. On voudrait pouvoir faire des animations qui changent vraiment la taille des éléments, qu’ils se poussent les uns les autres, etc. Bref animer des changements de Layout !
FLIP est une technique permettant de simuler une Layout Animation mais en ne faisant qu’une animation basée sur les Composite pour être fluide (60fps), et ce même après avoir modifié le DOM.
- Slides : flip-keynote.surge.sh
Conférence BlendWebMix Lyon Octobre 2017 ◦ Aussi donné aux meetup Paris.js, CSS Paris, React.js
Je fais un tour des différentes solutions qui existent à l'heure actuelle pour l'animations des composants pendant leur cycle de vie (mount, unmount, etc…).
CSS only • ReactCSSTransitionGroup • ReactTransitionGroup • react-motion • react-flip-move
À travers plusieurs exemples d'UI plus ou moins complexes (component DropDown, List modifiable, transitions de Views, …) pour lister les avantages et inconvénients de chaque technique dans des cas d'usages différents.
Meetup Paris.js Octobre 2016 ◦ Meetup React.js Décembre 2016
Le web est challengé par les applications natives. Nous développons des Single Page App pour les concurrencer, mais pour offrir une meilleure expérience utilisateur il est indispensable de proposer des interfaces animées et fluides.
Comment faire aujourd'hui pour être fluide sur mobile ? Comment analyser à la loupe la performance des animations dans les Chrome DevTools ? Quelle métrique utiliser ? C’est ce nous allons voir ensemble.
- Slides : web-anim-perf-keynote.surge.sh
Conférence BestOfWeb Paris Juin 2016 ◦ Aussi donné aux meetup Paris.js, CSS Paris, Node.js, React.js, Paris.rb
Présentation des propriétés CSS liées au "Flexible Box Layout", de la compatibilité navigateur aujourd'hui, des outils pour s'en servir plus simplement, et des examples de cas d'usage.
Meetup CSS Paris Janvier 2016 ◦ Meetup Paris.js Avril 2015 ◦ Meetup Paris.rb Avril 2015