React Native Connection : première édition

Il y a peu, se tenait la première édition de la React Native Connection, une conférence dédiée à React Native. Nous y étions, et on vous raconte tout !

Toutes les conditions étaient réunies pour que cette première édition soit un succès : des speakers de qualité, des sujets variés, des gens passionnés, le tout dans un cadre convivial.

Le lieu

C'est dans une petite impasse du 11ème arrondissement de Paris que se trouve le Pan Piper, un lieu atypique qui a accueilli la conférence. Un endroit connu pour ses concerts, mais ce jour-là les musiciens tapotaient sur leurs claviers.

Les conférences

Au menu du jour: open source, sécurité, design, performances, et bien d'autres sujets encore. Il y en avait pour tous les goûts. Début à 13h30, fin à 18h30, suivi d'une after party organisée par BAM.

From Codegen to your first PR in Core - Riccardo Cipolleschi

Riccardo nous explique dans ce talk comment contribuer à React Native à travers les umbrella issues : ces issues qui permettent de lister, affecter et suivre les tâches d'un projet open source, elles rendent le projet en question plus abordable pour un débutant et permettent de s'approprier rapidement une partie du projet sans pour autant avoir à se plonger dans toute la codebase.

Il nous présente, au passage, les différentes étapes nécessaires pour proposer une contribution pour React Native et de manière générale dans les solutions open source. Nous rappelant au passage l'importance de la communauté dans le monde de l'open source.

Petite note d'encouragement pour les personnes qui souhaiteraient contribuer, surtout si vous êtes débutant, n'hésitez pas à vous lancer, la communauté est là pour vous aider, nous souffle Riccardo pendant le Q&A.

Si l'envie vous prend de contribuer ou si vous êtes curieux, vous pouvez aller jeter un œil à l'umbrella issue autour de react-native-codegen.

Scaling teams with Federated Super Apps - Michal Pierzchala

Ce n'est pas tous les jours que l'on crée une Super App. Mais déjà, c'est quoi une Super App ? Véritable couteau suisse, les Super Apps contiennent une large palette de services regroupés au sein d'une seule et même interface utilisateur. Cependant, en coulisse, ces services sont très différents. Michal nous explique comment gérer ces services séparément et de manière décentralisée pour faciliter les déploiements et la maintenance.

C'est l'occasion aussi de mettre au-devant de la scène Re.Pack, un outil développé par Callstack pour gérer les applications React Native et leurs écosystèmes. Grand remplaçant de Haul.

Debugging should be easier - Cedric Van Putten

Avez-vous déjà eu des soucis pour débugger votre application React Native ? Si oui, vous êtes au bon endroit, si non, vous l'êtes aussi. Après un tour d'horizon des solutions existantes, Cedric nous explique comment, chez Expo, ils ont développé un outil de débuggage pour React Native.

Après une session de Live Coding, la salle était conquise. Pour l'utiliser et profiter de la version expérimentale, il vous faudra monter jusqu'à la version 48 du SDK Expo. Allez vite jeter un coup d'œil ! Celui-ci s'ouvre directement dans une fenêtre chrome devtools, qui vous permet d'inspecter vos requêtes, vos logs et d'utiliser le debugger Javascript 🤩

De quoi oublier Flipper !? ... enfin presque, car vous devrez abandonner tous vos plug-ins sur le bord de la route : Flipper et le debugger d'Expo sont incompatibles, et ce dernier étant un module expérimental, il n'existe pour le moment aucun plugin.

Bringing the best of React to TV Navigation - Mathieu Fedrigo & Pierre Poupin

Repousser les limites de React Native et l'utiliser pour développer des applications TV, c'est le défi que se sont lancés Mathieu et Pierre. Ils nous expliquent comment ils ont réussi à développer une application TV avec React Native et nous parlent d'une problématique peu connue des développeurs : la navigation TV.

Pour résoudre leur problématique, ils ont dû revenir aux fondamentaux de React et nous expliquent comment ils ont réussi à gérer la navigation avec l'aide d'une librairie développée par la BBC : LRUD. Attention tout de même, préviens le duo, cette expérience n'est pas à reproduire chez vous.

3D and canvas-based animations with Reanimated - Krzysztof Piaskowy

Vous aimez les animations ? Vous allez être servi. Krzysztof nous présente Reanimated, une librairie développée par Software Mansion pour gérer les animations dans React Native. Il nous fait une démonstration sur la manière d'animer des rendus complexes en utilisant expo-gl et react-native-skia ainsi que les différents utilitaires de la librairie.

Il nous explique la logique mathématique derrière, de quoi donner quelques maux de tête, et nous montre quelques exemples d'animations. Des animations smooth lors des événements ? C'est la promesse de Reanimated. Comment ? En utilisant les Worklets et en déportant la gestion des animations et des interactions dans l'UI thread.

Passwordless login in React Native - Aleksandra Linczewska

Vous passez des heures à chercher la meilleure manière de gérer les mots de passe dans vos applications ? Aleksandra nous explique comment elle gère les mots de passe dans les siennes.

Après avoir fait le bilan des différentes solutions existantes et pointer du doigt l'importance de la sécurité, elle nous explique comment elle gère les mots de passe avec react-native-passkey et les solutions biométriques.

Testing apps at scale: How Shopify manages testing & QA of its mobile applications - Monica Restrepo

Vous avez du mal à tester vos applications ou vous vous faites du mal en testant vos applications ? Monica nous explique comment Shopify gère les tests de ses applications et nous donne quelques conseils pour ne pas se manger les doigts en testant.

Elle met en avant les avantages à tester et à le faire bien. Tests unitaires, tests d'intégration, tests end-to-end, tant de tests qui peuvent vous aider à développer vos applications.

"Test behavior, not implementation"

"Always test edge cases"

Using a scientific approach to debug performances issues - Louis Zawadzki

Vous avez des problèmes de performances ? Louis a surement une partie de la réponse pour vous. Avec méthodologie, il théorise le fait que 99 % des problèmes de performances seraient liés à seulement 25 causes différentes. Comment les repérer, comment les éviter ? Il nous a tout expliqués et nous, on est gentil, on vous en met ☝️✌️ :

• La manipulation des données
• Le nombre de rendus des composants
• Les rendus inutiles

Raising the bar: our journey making React Native a preferred choice - Tommy Nguyen

Pour clôturer ce festival de talks, Tommy, qui n'est pas venu les mains vides, nous présente une librairie portée par Microsoft, en réalité, c'est plutôt une flopée d'outils pour faciliter les développements React Native : rnx-kit.

Ce kit s'annonce déjà être un game changer dans le monde du développement React Native, pour vous mettre l'eau à la bouche voici deux outils qui le composent :

• align-deps : un gestionnaire de dépendances qui permet d'aligner les versions des dépendances lors de la montée en versions de l'une d'entre elles.
• cli : un wrapper de Metro qui rend modulable le bundle de votre application.

Il clôture cette conférence en mentionnant que Microsoft travaille sur le support des API web nativement dans React Native, et qu'il y a, après un filtrage assez important, plus de 200 interfaces à implémenter... Nous avons hâte de voir les débuts de ces travaux.

Pour finir

En somme, vous l'aurez compris, une après-midi très dense et pleine de surprises. Cette conférence était aussi l'occasion de rencontrer des personnes qui font vivre la communauté React Native et tout son écosystème.

Félicitations aux organisateurs pour cette première édition, nous avons hâte de voir ce que vous nous réservez pour la prochaine.