Retour sur React Europe 2019

Premier Octet était à React Europe ces 23 et 24 mai 2019. Voici notre retour sur cet événement.

La conférence

React Europe se déroule sur toute une semaine, les trois premiers jours sont dédiés à des workshops, tandis que les deux derniers sont consacrés aux différents talks. En ce qui nous concerne, nous avons uniquement participé aux conférences.

Le lieu

L'événement se déroulait à l'espace Charenton dans le 12ème arrondissement de Paris. C'est un espace événementiel où l'on retrouve une salle principale qui faisait office de buffet, et une salle de conférence.

Le format

Les conférences se déroulaient sur deux jours, le jeudi et le vendredi. Contrairement à React Amsterdam, toutes les conférences se déroulent dans la même salle, de 10h à 18h30.

Les conférences duraient 30 minutes chacune sans session de question réponses qui elles, avaient lieu à la fin de journée du dernier jour. Il était toutefois possible d'aller directement poser ses questions lors des pauses café qui avaient lieu toutes les heures, ainsi que durant les pauses déjeuner. Retrouver les différents conférenciers n'était pas bien compliqué de part la petite taille de la salle.

On pouvait aussi retrouver deux séances de lightning talks répartis sur ces deux jours: une le jeudi en fin de journée, et une le vendredi juste avant la pause déjeuner.

L'organisation

Un repas était servi à tout moment de la journée: un petit déjeuner avec des oeufs et du bacon le matin, le midi et le soirs différentes salades en tout genre avec des plats chauds éventuellement (mini-burgers par exemple) et des desserts, le reste de la journée du vin, café, thé et bière étaient à disposition.

Les talks

L'ensemble des talks est accessible sur YouTube

Voici un retour sur les différents talks qui ont le plus retenus notre attention:

The state of React and its future

🎤 Jared Palmer - @jaredpalmer
🎬 Vidéo du talk

Jared Palmer, créateur de Formik entre autre, nous parle d'une problématique que l'on rencontre dans les versions récentes de React: avec les hooks, tout réside maintenant dans le render. Quels sont les moyens pour en améliorer les performances ? Il prend l'exemple d'une appli utilisant Apollo, listant des utilisateurs GitHub. Le code tout d'abord sous forme de classe, est transformé ensuite sous forme de composants fonctionnels, en créant notamment un hook useQuery, permettant de ne plus utiliser le composant Query fournit par react-apollo. Il nous fait aussi remarquer une redondance d'indicateur de chargement. Pour palier à ce problème, il utilise un composant Suspense avec un fallback de loading à la racine de ses composants, et transforme son hook useQuery en un try/catch qui, dans le try va tenter de lire le cache, et dans le catch va throw la promesse de la requête qui passe par le network. Le but est de ne plus à avoir à se soucier des états de chargement et de déléguer cette tâche à Suspense, de manière à avoir l'impression que l'application fonctionne de manière synchrone.

Il évoque aussi différentes librairies qui sont en cours de réalisation: react-fire, react-native fabric ou encore react flare.

---

Coders are the new Rock Stars

🎤 Daniel Edward Stein (DJ Fresh) - @DJFreshUK

Dans ce talk, Daniel Edward Stein nous raconte son passé de superstar DJ Drum & Bass à son statut actuel, développeur en machine learning chez HT2Labs. Il racontait notamment à quel point il était important pour lui, pour se perfectionner dans la production de musique électronique, d'en comprendre le réel fonctionnement à travers la visualisation des différentes ondes produites par celle-ci. De plus en plus de célébrités se mettent au code, et pour lui, les développeurs sont les nouvelles stars de demain.

---

Magic Move transitions in React-native

🎤 Hein Rutjes - @ijzerenhein
🎬 Vidéo du talk

Premier sujet de la journée abordant React-Native. Hein est le créateur de react-native-magic-move, un équivalent de react-navigation-fluid-transitions. Hein nous informe toutefois que la lib n'est pas encore très stable et qu'il est assez facile de faire bugguer les animations. La librairie est fournie avec une panoplie de transitions prêtes à l'emploi. Sa présentation a été réalisée grâce à sa librairie, et vous pouvez retrouver les sources ici.

---

On CodeSandbox

🎤 Ives van Hoorne - @CompuIves

Ives van Hoorne est le co-fondateur de CodeSandbox. Déjà présent lors de l'édition 2018, Ives nous fait un retour sur les statistiques du site depuis la dernière conférence, qui ont quasiment décuplé. On apprend par la suite son parcours professionnel, qui a notamment commencé avec un stage chez Facebook. Au même moment il travaillait sur CodeSandbox, et il était compliqué pour lui de concilier les deux, c'est la raison pour laquelle à la fin de son stage, il a préféré se consacrer à 100% sur CodeSandbox. Une partie intéressante était la manière dont il a intégré Visual Studio Code, en mockant les modules node, mais aussi en recréant certains services VSCode de manière à ce qu'ils communiquent avec ses serveurs. Nous apprécions particulièrement que la majeure partie de CodeSandbox soit opensource 👀.

---

Build forms with GraphQL

🎤 Charly POLY - @whereischarly

Charly Poly, Software Engineer chez Algolia, nous présente une manière de gérer des formulaires qui communiquent avec GraphQL à travers une librairie qu'il a créée: frontier-forms. Cette librairie utilise notamment final-form et n'est pour le moment compatible qu'avec apollo, et ne fonctionne pas sous react-native. Elle a pour avantage d'être très simple d'utilisation, il suffit juste de fournir en prop le client apollo, la mutation associée au formulaire, et Frontier se charge de générer les différents champs selon les paramètres que peut prendre la mutation. On peut fournir un ensemble de styles via la prop uiKit pour définir comment rendre les différents champs. Définitivement une lib sur laquelle garder un oeil 👀.

---

Yarn 2 - Reinventing package management

🎤 Maël Nison - @arcanis

Pour l'un des derniers talks de la semaine, Maël Nison, contributeur de Yarn, nous présente les différentes nouveautés de la version 2 de Yarn. En voici une liste non exhaustive:

• Meilleure gestion des workspaces
• Meilleure gestion d'erreur grâce à des codes d'erreur similaires à TypeScript
• Compression des packages node_modules. On pourra ainsi versionner nos modules, de sorte à ne plus avoir à réinstaller les modules s'ils diffèrent entre différentes branches de nos dépôts.

Plus d'infos sur la v2 de Yarn ici

En conclusion

Ces deux jours de conférences furent très intéressants et très instructifs. L'organisation était excellente et nous y retournerons l'année prochaine sans hésiter.