Retour sur React Amsterdam 2019

Premier Octet était pour la première fois à React Amsterdam, voici notre retour sur cette belle conférence !

La conférence

React Amsterdam est l'une des plus grosse conférence React après React Europe. Les talks se déroulent sur un jour (le vendredi) mais des workshops et meetups sont organisés les deux jours précédents. Pour notre part, nous avons seulement participé aux conférences. Se rendre à Amsterdam depuis Paris est assez rapide puisqu'il faut un peu moins de 4h pour rejoindre la capitale néerlandaise en Thalys. Faire l'aller / retour dans la journée n'est cependant pas possible sans rater le début des conférences (à 9h).

Le lieu

L'événement se déroulait au Kromhouthal, ancien hangart où l'on construisait des bateaux, aujourd'hui reconverti en lieu événementiel offrant des espaces atypiques et accessibles. Le cadre en retrait du centre touristique, était très agréable permettant de flâner sur les bords du canal entre deux conférences.

Le format

Comme évoqué plus haut, les conférences se tiennent sur un seul jour de 9h à 17h. Contrairement à React Europe, React Amsterdam propose deux tracks : la principale dédiée à React, se déroulant sur le scène principale et une deuxième dédiée à React Native, située dans un plus petit espace. Difficile donc de choisir entre les conférences, nous avons privilégié la track React Native.

Les conférences ont une durée idéale de 25 minutes, permettant de ne pas décrocher et insuffler un rythme agréable. A noter qu'il n'y a pas de séance de questions/réponses avec le public, ni avec le MC (contrairement à DotJS par exemple). Il faut donc poser nos questions de manière informelle autour d'un café (ou d'une 🍺) après les conférences. Le matin, 4 conférences sont données contre 5 l'après midi ainsi qu'une séance de LT.

L'organisation

Tout au long de la journée, il est possible de se servir du café/thé/eau. Au déjeuner était proposé un curry de poulet (ou légume) accompagné de riz/semoule ainsi que des toppings au choix (coriandre, poivrons, piment…). Un ticket était également remis à chaque participant, leur permettant de bénéficier à toute heure d'un autre plat parmi ceux proposés par les foods trucks installés dehors (burgers, wraps, assiette cubaine…). À 19h commençait, l'apéro avec bières locales, petits fours et autres boissons enivrantes le tout rythmé par des lives de musique et vjing !

Les talks

L'ensemble des talks a été filmé et est accessible sur YouTube :

• Track React
• Track React Native

Nous revenons sur les talks que nous avons aimé (et vu !).

Building React Native

🎤 Parashuram N - @nparashuram
🎬 Vidéo du talk

Parashuram est ingénieur d'interface chez Facebook. Sa présentation concerne les nouvelles architectures en cours de développement pour React Native. Nous avons beaucoup apprécié l'approche didactique et son regard de développeur Web sur les langages natifs qui composent le coeur du SDK. Grâce au nouvel UI manager appelé Fabric, l'ensemble des communications entre les contextes JavaScript et natifs seront synchrones.

De plus, un outil appelé CodeGen permet de générer des types flow et TypeScript de l'API et des modules, ce qui permettra de prévenir les erreurs en amont dans notre code. Ces évolutions sont rendues possibles grâce au dernier projet appelé JSI (pour JavaScript Interface) qui équivaut au bridge synchrone pour invoquer des méthodes Java ou Objective-C.

Si le sujet vous intéresse, la refonte de l'architecture est présentée et discuté esur ce ticket.

---

Practical Performance for React (Native)

🎤 Anna Doubková - @lithinn
🎬 Vidéo du talk

Anna développeuse JavaScript chez Hive a fait un rappel des différentes techniques et bonnes pratiques à mettre en place afin d'éviter des soucis de performance. Voici les points d'attention remontés par Anna :

• Avec Redux, attention aux composants connectés trop en amont dans votre arbre, qui peuvent provoquer des rendus inutiles ;
• Bannir les fonctions anonymes dans les props de vos composants (création d'une nouvelle référence à chaque rendu) ;
• Pour définir votre state à partir de props, utiliser getDerivedStateFromProps à la place de componentDidUpdate afin d'éviter des rendus inutiles ;
• Batcher vos actions Redux si possible ;
• Utiliser des sélecteurs mémoïsés lors de vos connect Redux ;
• Utiliser useNativeDriver avec l'API Animated de React Native pour éviter de saturer le bridge ;
• Éviter d'utiliser des librairies de routings JS pour React Native (utiliser react-navigation plutôt que react-router-native).

---

Sharing Code Between React and React-Native: What Not to Share

🎤 Ben Ellerby
🎬 Vidéo du talk

Ben Ellerby, développeur chez Theodo a expliqué comment partager du code entre des applications React et React Native. Après avoir expliqué qu'il est difficile de partager les élements liés à l'interface utilisateur, Ben nous encourage à partager la logique métier : Redux, requêtes GraphQL, API, HoC, configuration… Il préconise la création d'un package afin d'exposer cette logique au projet React et React Native. Voici sa conclusion :

• Le partage du code est un des grands avantages de React & React Native ;
• Partager tout ce qui n'est pas relatif au design / UI ;
• Des apps React et React Native n'ont pas la même UI ;
• Les HOCs permettent de partager cette logique ;
• Publier un package NPM privé pour partager votre stack.

---

Building for a Bigger World Than Mobile

🎤 Wouter van den Broek - @wbroek
🎬 Vidéo du talk
👨‍🏫 Slide du talk

Cette conférence était plutôt orientée veille: l'auteur a exploré toutes les pistes pour partir d'une app React Native pour la distribuer sur desktop. Il présente les avantages et inconvénients rencontrés sur chaque solution, on y retrouvera ainsi react-native-web, react-native-macos ou encore react-native-windows. La plupart manque de fonctionnalités voir de stabilité, et son choix se tourne vers Electron avec une refonte de la partie interface.

---

Tech Regrets at Spectrum

🎤 Max Stoiber - @mxstbr
🎬 Vidéo du talk

Max créateur de styled-components, nous a fait un retour d'expérience sur son projet Spectrum (racheté par GitHub). Il nous a dressé une liste des points qu'il aurait fait différement avec le recul, à savoir :

1. Ne pas utiliser react-native-web ;
2. Développer en mobile first
3. Utiliser Next.js ;
4. Ne pas utiliser RethinkDB ;
5. Ne pas utiliser DraftJS et le mode WYSIWYG ;
6. Donner plus de poids à la communauté dans la roadmap.

Cette conférence était un retour oral de son article Tech Choice Regrets At Spectrum, que nous vous invitons donc à lire !

---

The GraphQL Developer experience

🎤 Peggy Rayzis - @peggyrayzis
🎬 Vidéo du talk
👨‍🏫 Slide du talk

Dès que l'on parle de GraphQL lors d'un meetup ou une conférence, Peggy n'est jamais très loin. Experte dans cette technologie et contribuant énormément à son succès, elle nous présente ici une conférence vraiment axée sur l'expérience du développeur plutôt que sur les avantages de la technologie. La dernière moitié du talk est réservée à une démo de refactoring d'application JS/Redux/Rest avec TypeScript/Apollo/GraphQL. On constate une réduction du code, une autocomplétion parfaite grâce au TypeScript et évidemment un bon confort de développement, mission accomplie !

On y retourne ?

Oui ! Nous avons pris beaucoup de plaisir à participer à React Amsterdam, l'organisation est excellente et les conférences de qualité.