React Europe 2016 : One day in paradise!

Actualité ekino -

Résumé de la première journée de React Europe 2016

Article paru le :
React Europe 2016 : One day in paradise !
Article paru le :

Un an après notre première « rencontre », j’ai eu la chance de retourner à React Europe cette année pour mon plus grand plaisir. En espérant que ces résumés rapides des conférences présentées le jeudi 2 juin vous aideront à « sentir » la puissance de l’écosystème React et donc l’intérêt de participer à de tels évènements.

The Redux Journey – Dan Abramov

Dan Abramov nous a permis de commencer la journée sur les chapeaux de roues. C’est LA personne qui fait que React Europe démarre de manière impressionnante ! Plus sérieusement, Dan est le créateur de Redux (influencé par Flux et Elm) ainsi que de React Hot Loader, et un des acteurs majeurs autour de l’écosystème React (12 commits, 4 pull requests et 2 issues par semaine) : il a d’ailleurs rejoint depuis peu les équipes de Facebook à Londres.

Lors de cette présentation, il revient sur les principaux concepts de Redux à savoir les Actions, les Reducers et les Stores. Il appuie un peu plus sur les concepts « sensibles » de la librairie comme les Selectors, les Middlewares et les Enhancers. Il met en avant certaines librairies qui gravitent autour de son concept comme Relay, RXjs, Mobx ou encore Cerebral et finit par annoncer la mise en ligne d’un nouveau cours gratuit autour de Redux sur egghead.io ainsi que la préparation d’un Redux 2 !

Native Navigation for Every Platform – Eric Vicenti

Eric Vicenti de Facebook San Franciso est revenu sur un élément très important au sein de nos applications, à savoir la navigation. En mettant en avant l’utilisation de Redux, il présente des concepts théoriques (navigation simple avec persistance de la vue affichée, gestion du deeplinking au sein d’une application depuis un browser ou encore gestion du swipe back pour remonter dans l’historique de navigation de l’application) et s’appuie sur un exemple concret : F8 (iOS|Android) l’application permettant de gérer l’évènement Facebook Developer Conference.

Il démontre aussi qu’un composant bien construit peut, avec peu de modifications, être utilisé aussi bien dans une application React que dans sa version native. Enfin, il pousse l’utilisation d’une petite librairie qui facilite la navigation au sein des applications natives : NavigationExperimental.

A cartoon guide to performance in React – Lin Clark

Lin Clark est développeur chez Mozilla Pittsburgh et aime mettre en cartoons son code et ses présentations sur son site Code Cartoons. C’est avec ce concept qu’elle vient nous présenter un petit retour sur les performances au sein de React.

Elle fait des rappels sur le fonctionnement du rendu côté navigateur et liste quelques bonnes pratiques React (comme l’utilisation des clés…). Une présentation pas forcement hyper technique mais qui plaît par la nouveauté du support !

React Native <3 60 FPS — Improving React native animations – Krzysztof Magiera

Krzysztof Magiera revient sur l’animation au sein des applications React Native en mettant en avant certains composants avancés proposant ce genre de feature : NavigatorIOS, MapView, TouchableNativeFeedback, ViewPager…

Il revient sur le LayoutAnimation qui permet de créer ses animations à partir d’un layout dit « classique » et nous parle de l’implémentation de la librairie Animated. Il finit sur une explication technique du lien entre le thread d’exécution JS et le thread responsable du rendu de l’interface graphique.

Being Successful at Open Source – Christopher Chedeau

On ne présente plus un des grands évangélistes React, aujourd’hui employé de Facebook San Francisco : Christopher “vjeux” Chedeau. Pour casser un peu le flot de conférences purement techniques, il revient sur la manière dont Facebook et lui-même gèrent les projets Open Source et propose son retour d’expérience ainsi que les « bonnes pratiques » pour bien gérer ce genre de projet.

Ses conseils sont de gérer peu de médias de communication (parmi Facebook, Twitter, Blog, Github, Conférence ou encore IRC) et de bien les gérer. Il propose une vision un peu différente de la chaîne habituelle proposée par GitHub et pense que les utilisateurs d’un projet open source devraient juste pouvoir créer des Issues et traiter des Pull Requests simples, laissant la main à une « core team » , qui gère le projet, pour toutes les demandes plus « lourdes ». Il pousse aussi l’utilisation d’une librairie en mode « développement » proposant divers alertes sachant que la plupart des utilisateurs ne lisent pas la documentation d’utilisation. Enfin, il pense que la démonstration du projet devrait être le support de toutes les discussions en réunion afin d’apporter du contexte et rappelle qu’il est toujours bon de faire la promotion d’autres projets de l’écosystème qui gravitent autour de notre propre projet.

GraphQL at Facebook – Dan Schafer

Dan Schafer, lui aussi de Facebook San Francisco, revient sur la librairie phare du précédent React Europe, à savoir : GraphQL et fait un petit retour d’expérience après 1 an d’existence. Il insiste en particulier sur 2 concepts marquants utilisés et utilisables avec GraphQL qui sont : comment gérer l’authorization et comment mettre en place des graphes efficaces.

Pour l’authorization, une des bonnes pratiques est de rapatrier la méthode de fetch de la data au plus prêt de l’objet représentant la data afin de permettre de tester les droits au moment de faire le rapatriement de la data. Cette méthode se présente alors comme LA source de vérité de la donnée demandée. Cela permet aussi de faciliter l’intégration de paramètres dépendants de l’objet (comme un id) dans la request GraphQL.

Pour produire des graphes plus efficaces, trois concepts sont à mettre en place. Le premier concerne le Batching et le Dataloader qui vont permettre de grouper les appels du même « genre » pour plus de performance. Le second est l’utilisation d’une solution de caching côté serveur pour avoir « gratuitement » les éléments déjà demandés. Le dernier concerne l’utilisation de clés globalement uniques (et non pas seulement uniques au sein de l’objet) en base64 afin de permettre l’unicité de chaque donnée.

A Deepdive Into Flow – Jeff Morrison

Jeff Morrison, qui semble être aussi passé par Facebook, est un des contributeurs majeurs de la solution Flow qui est un static type checker pour JavaScript. C’est donc tout normalement qu’il nous a présenté les bases du fonctionnement d’un type checker.

Il revient sur le concept de l’AST, réelle source pour le type checking et sur la création du graphe de résolution des différents types grâce au Type Head (qui liste les différents types utilisés dans le code source), l’utilisation des OpenType pour mettre en « stand by » le typage de l’objet en attendant d’autres résolutions et enfin la création d’InstanceType et de LookupType pour représenter le lien entre un type un GetPropType (type d’une de ses propriétés).

Après un exemple de résolution d’un tel graphe, il nous montre la possibilité de paralléliser la résolution des graphes indépendants pour plus de performances et nous explique comment Flow gère les imports/exports entre les fichiers sources ainsi que la détection de code mort par l’analyse des « boucles fermées » dans le graphe.

Debugging flux applications in production – Mihail Diordiev

Mihail Diordiev est un grand contributeur moldave de l’open source spécialisé dans les dev tools et le debugging autour de Redux ou React.

Il vient, pour l’occasion, nous parler du projet Redux Devtools Extension qui permet d’aider le développeur à debugger son application, que ce soit dans un environnement local ou de production grâce à RemoteDev qui permet de se connecter à distance à l’instance de production et de synchroniser une version locale avec le state sur l’instance de production. En outre, l’outil permet la génération sommaire mais automatique de tests directement dans l’inspecteur.

React Redux Analytics – Bertrand Karerangabo & Evan Schultz

Bertrand Karerangabo et Evan Schultz de chez Rangle.io Toronto nous ont présenté une utilisation de Redux pour mettre en place du Lean Analytics. En effet la problématique est forte depuis l’utilisation de SPA pour nos chers sites et les besoins de référencement que connait chaque entreprise présente sur la toile.

Ils proposent l’utilisation d’une librairie développée chez Rangle.io qui propose d’utiliser Redux pour produire des segments (à la manière du service Segment) qui sauront se brancher à tous nos outils classiques de tracking parmi Google Analytics, Mixpanel, Optimizely, Facebook Ads, Slack, Sentry et bien d’autres encore.

Redux-Segment est donc un middleware Redux qui va permettre, grâce à des metas transportées par l’Action Redux, de générer une structure contenant l’identify (définit le qui), le track (définit le quoi), la page(définit la page), le screen (définit l’écran), le group (définit le compte ou organisation) ou encore l’alias (lien vers une ancienne identité). Ils terminent par une démonstration de cette librairie au sein de leur application DevMatch (non disponible sur leur repo pour le moment).

Lightnings talks

Les lightnings talks sont, comme dans toutes les conférences, des présentations rapides de 10/15 min laissant la place à des problématiques différentes ou à des sujets moins techniques.

Ainsi Conor Hastings de chez Social Tables à Washington DC nous a parlé de Redux et de la facilité d’écrire des tests grâce aux différents concepts de la librairie et propose la librairie redus-test-recorder pour nous donner un coup de pouce.

Dan Tsui & Chi Kei Chan nous ont proposé l’utilisation des Web Workers avec Redux grâce à redux-worker et à l’utilisation de Webpack pour séparer les bundles exécutés.

Preethi Kasireddy, développeuse depuis moins d’un an, a fait un retour d’expérience sur la façon dont elle est monté en compétences grâce à certains piliers comme la passion, le dévouement et le support des gens autour de soi.

François de Campredon de chez Fadio IT à Marseille nous fait un tour d’horizon des différentes techniques utilisables pour faire du CSS dans le JS : Radium, Aphrodite ou encore React Style. Vu que personne n’a encore trouvé la solution sans compromis, il propose la librairie Vstyle qui permet la génération d’un vrai fichier CSS, de noms de classe uniques ou encore la génération de la CSS au moment du rendu dans le Virtual DOM.

Enfin Mike Grabovski de chez Man+Moon London nous a parlé d’un système de gestion de package propre à React Native, à savoir RNPM.

Conclusion

Encore une année riche au niveau de l’écosystème React alors même que la librairie principale gagne en maturité et commence à imposer, au delà de ses sources, ses idées et concepts révolutionnaires. React Europe reste donc toujours LA conférence de référence de React et de toutes les technos environnantes : on y appréciera le contenu des conférences, le fait que Facebook ne soit pas omniprésent et propose un système où la communauté se sent écoutée et respectée et, avec un poil de chauvinisme, l’organisation et le « savoir recevoir » français.

Vivement l’année prochaine !

Toutes les conférences de l’évènement, qui a été filmé en live, sont disponibles sur Youtube pour le Jour 1 et le Jour 2.

Crédits photos : Ulysse Tallepied et React Europe Facebook Group