Retours de React Europe 2018

Il y a 5 ans, Facebook ajouta sa contribution à l’écosystème JavaScript en publiant la première version de React. Depuis cette dernière s’est hissée au rang des incontournables, dépassant son simple rôle de librairie.

Section intitulée reactReact ❤️

React est aujourd’hui un vrai écosystème à part entière : nouveaux paradigmes, révolution de l’expérience de développement. Un écosystème qui s’est étendu jusqu’au développement mobile avec React Native. Il fédère une communauté éclectique et passionnée : développeurs back / front, designers, développeurs mobiles, apportant chaque jour de nouvelles contributions.

Nous étions présents à la 4ème édition de React Europe à Paris pour rencontrer, écouter, discuter avec cette belle communauté dont nous faisons partie depuis maintenant deux ans.

Section intitulée les-conferencesLes conférences

Bonne nouvelle, l’ensemble des conférences a été filmé et diffusé en direct 🔴, vous pouvez retrouver l’intégralité des talks sur les playlists suivantes :

• Journée 1 ;
• Journée 2 ;
• Lighting talks.

Aucune excuse donc pour ne pas être au courant des dernières nouveautés, pour les plus pressés, voici un résumé de quelques talks qui nous ont plu.

Section intitulée keynote-new-hotness-in-reactKeynote : New hotness in React

🐦https://twitter.com/ken_wheeler 🍿https://www.youtube.com/watch?v=QFk6YwMz8nc

La conférence s’est ouverte sur la keynote énergisante de Ken Wheeler (à la tête de FormidableLabs, qui a entre autre développé Spectacle) passant en revue les dernières nouveautés de React.

Au menu, une piqûre de rappel sur la nouvelle Context API, nouveaux événements de composants (dépréciation de componentWillReceiveProps en faveur de getDerivedStateFromProps), mise en pratique de la fameuse API Suspense. Cette dernière, présentée par Dan Abramov lors de la JSConf Iceland a été mergée dans la branche master, hold your horses ! Pour rappel, Suspense permet de mettre en pause le rendu de composant lors d’appels asynchrones et gérer plus finement les états de chargement et mise en cache.

Section intitulée the-case-for-whimsyThe Case for Whimsy

🐦https://twitter.com/joshwcomeau 🍿https://www.youtube.com/watch?v=Z2d9rw9RwyE

Joshua est un nostalgique de l’internet des années 90 où les pages arboraient leurs plus beaux wordart et GIFs. Il souhaite revenir à un internet fun mais qui a du sens sans délaisser l’accessibilité.

Son talk montre l’exploration effectuée pour trouver des animations performantes et satisfaisante pour l’utilisateur. Le premier cas est une animation canvas pour créer des confettis lors du succès d’un quizz Khan Academy dont il est l’un des développeurs. Il détaille particulièrement l’implémentation utilisant les lifecycles des composants ainsi que la synchronisation du rendu de React avec les « animations frames ».

Le deuxième exemple consiste en une animation lancée par l’utilisateur (action driven) du DOM pour un client mail via la manipulation du DOM avec React et du CSS. L’API qui en résulte est claire et abstraite, ce qui permet à ces animations d’être appliquées facilement à n’importe quels composants.

Josh finalise son talk sur les améliorations à venir quant aux animations CSS avec Firefox Web Render. Celui-ci utilise l’accélération matérielle pour toutes les propriétés ! Enfin, il recentre notre attention sur l’accessibilité et l’utilisation d’animations avec parcimonie. Celles-ci doivent ajouter une réelle plus-value.

Section intitulée declarative-future-of-gestures-and-animations-in-react-nativeDeclarative future of gestures and animations in React Native

🐦https://twitter.com/joshwcomeau 🍿https://youtu.be/kdq4z2708VM

L’animation avec React Native est un sujet fréquent, de nombreuses publications pour reproduire des interfaces connues comme l’application Tinder ou encore Uber existent.

Krzysztof Magiera (co-créateur de React Native) nous explique la manière dont sont implémentées les animations. Souvent synonyme de mauvaises performances car définies dans notre code JS, certaines ne peuvent pas être liées directement à des propriétés natives, ce qui force des aller/retour sur le bridge React Native. Le moniteur de performance nous permet de suivre les frames par seconde de chaque thread et ainsi voir l’impact d’une animation sur les performances.

Ceci devient encore plus complexe quand l’on veut synchroniser des gestes avec un effet d’animation. Par exemple au scroll d’une ListView. Pour pallier ces différents problèmes, Krzysztof a créé le module react-native-gesture-handler qui est maintenant disponible automatiquement dans Expo. En plus de proposer une API simple autour du driver natif d’animation, plusieurs composants sont implémentés pour créer un comportement « Swipeable » ou une navigation de type « drawer ».

Section intitulée a-journey-through-react-apolloA Journey through React Apollo

🐦https://twitter.com/peggyrayzis 🍿https://www.youtube.com/watch?v=fCXYA3lZTbo

Apollo manages updating your data just like React manages updating your UI

GraphQL fut à l’honneur pendant ces deux journées de conférences, notamment par l’intermédiaire de Peggy Rayzis, core team d’Apollo. Celle-ci nous a présenté les dernières fonctionnalités en rappelant les promesses du produit :

• Plus besoin de Redux pour vos données serveur ;
• Plus besoin de normalisation via Normalizr ;
• Plus besoin de typage / PropType.

Elle a conclu son talk en présentant le futur d’Apollo avec sa version 3. Les nouveautés résident principalement sur l’intégration de la nouvelle API Suspense.

Section intitulée replicated-reduxReplicated Redux

🐦https://twitter.com/jimpurbrick 🍿https://youtu.be/Fr3vp0C22H0

Jim Purbrick nous a livré un talk inspirant, sortant des usages traditionnels de React : l’intégration de Redux dans une architecture multi-clients. En effet, Redux, de par son architecture, est idéal pour répliquer les actions au travers de différents clients en les dispatchant. Jim, lead-developpeur de ReactVR nous a montré comment répondre aux problématiques de synchronisation, anticipation, concepts que l’on retrouve dans le Netcode.

Section intitulée beyond-reactBeyond React

🐦https://twitter.com/dvnabbott 🍿https://youtu.be/HVwLOcllTfI

Cette conférence nous fait réfléchir à l’approche composant et à notre manière de travailler avec ceux-ci. En effet la plupart du temps une équipe dédiée au design va travailler avec des outils spécifiques comme Sketch ou Illustrator puis, d’autres personnes vont créer des composants React. Hélas il n’y a pas de piliers communs entre ces deux équipes. C’est la problématique que cherche à résoudre Lona, l’outil présenté dans ce talk. Doté d’un UI builder, d’un format standard et d’un compilateur vers du code React/JSX, il devient possible de compiler des UIs en composants React. Nous avons hâte d’essayer sur un petit projet pour renforcer la liaison entre nos équipes.

Section intitulée bridging-react-native-back-to-its-rootsBridging React Native Back to its Roots

🥇Prix de la meilleur démo 2018 🐦https://twitter.com/dvnabbott 🍿https://youtu.be/aOWIJ4Mgb2k

La conférence la plus impressionnante de cette édition, était celle de Vincent. Ce dernier est revenu sur les différences d’implémentation entre React et React Native (navigation, layout…) avant de proposer son postulat : pourquoi ne pourrait-on pas fusionner ces deux implémentations ? Une application React Native serait compatible web « out of the box ».

C’est déjà la promesse de react-native-web, mais pour Vincent, celle-ci a ses limites :

• Implémentation du layout (via flex) différente ;
• react-native-web est « web first » ;
• Différents systèmes de build ;
• Une grosse partie de l’API de RN manquante.

Pour pallier ces limites, Vincent a développé un portage de React Native pour le web. Introducing react-native-dom ✨. La promesse est un support à 100% de l’API avec le même système de build (metro). La librairie n’est pas encore exploitable en production mais tient de très belles promesses. Vous pouvez suivre l’évolution du support de l’API de React Native ici : https://rntester.now.sh/.

Section intitulée l-organisationL’organisation

Comme son nom l’indique, React Europe est le plus gros événement européen React qui par chance a lieu depuis son lancement à Paris. C’est une très belle occasion de rencontrer la communauté et faire le plein de motivation.

Les conférences de 30 minutes suivent un bon rythme (environ 4 le matin et 6 l’après-midi), le tout ponctué de quelques pauses cerveau/café, rendent l’ensemble dynamique et sans temps morts. Comme d’habitude les petits-déjeuner, déjeuner (et même diner pour le jeudi soir) sont excellents, attention tout de même aux verres de vin / bières en trop le midi, effet sieste garanti 🍷.

Section intitulée et-ensuiteEt ensuite ?

Les différentes conférences de cette édition 2018, remontent quelques tendances :

• La volonté de convergence entre React et React Native ;
• Améliorer l’expérience développeur ;
• GraphQL comme nouveau standard pour les APIs ;
• L’insoutenable attente de l’API Suspense. 🙌

De nouveaux enjeux et défis donc pour la communauté React qui n’a cessé d’en relever ! À l’année prochaine ! 👋

---

Cet article porte sur la conférence React Europe 2018.