Apprenez React

Qu’es aquò ?

React est une bibliothèque javascript libre et open-source développée par Facebook depuis 2013. Son but premier est de faciliter la création d’applications web performantes et mono-pages (single-page apps). Elle permet de développer des interfaces utilisateurs et peut donc très bien être combinée avec d’autres bibliothèques ou frameworks MVC comme AngularJS.

Sa première version stable date de début 2015, et elle est notamment utilisée en production par des acteurs du web comme Netflix, Yahoo, Airbnb, Sony, ou Atlassian, sans oublier (évidemment) Facebook et Instagram.

Je vais ici essayer de vous en donner un aperçu.

“Hello World” in React

Un peu d’histoire

On remonte à 2012, lorsque Facebook décide d’abandonner le HTML5 de son application iOS, et de la (re)développer en natif (Objective-C) pour des raisons de performances:

“(Re-)Building for speed.” — Jonathan Dann, Software Developer @ Facebook

La guerre “web contre natif” sur mobile qui faisait déjà débat, a pris une autre dimension lorsque Mark Zuckerberg s’est positionné ainsi, concédant publiquement que l’expérience utilisateur (UX) web mobile ne rattraperait pas l’UX native mobile de sitôt:

“The biggest mistake we made as a company was betting too much on HTML5 as opposed to native, it just wasn’t ready.” — Mark Zuckerberg, CEO @ Facebook

Au niveau du web, Facebook a probablement commencé à s’intéresser plus sérieusement au DOM (Document Object Model) à partir de cette même période. Ses ingénieurs se heurtaient à certains problèmes liés à la complexité de leurs applications: évènements en cascade, code imprévisible, difficulté à maintenir avec des équipes grandissantes…

La naissance de React

React est née ainsi, suite à l’industrialisation du processus visant à mettre à jour une balise HTML tout en réduisant ces problèmes de mutations imprévisibles. Sa première implémentation fut réalisée par Jordan Walke. Pour l’anecdote, afin de représenter la connexion d’un ami sur Facebook, une chaîne de caractère HTML était directement poussée dans le DOM. Cette pratique de modification de l’innerHTML qui n’était pas fondamentalement mauvaise, entrainait la perte de l’état du DOM (clignotement de la page, perte du focus, curseur, scroll position, sélection de texte, etc.). Ainsi est venue l’idée du DOM Virtuel.

Virtual DOM

L’atout principal de React est qu’il fait abstraction du DOM, en fournissant un modèle de développement simplifié ainsi que de meilleures performances. Concrètement, React ne travaille pas directement avec le DOM, mais avec un DOM Virtuel stocké en javascript, sur lequel elle va pouvoir comparer les éléments qu’il y a à mettre à jour ou non, grâce à un algorithme. Ainsi, le problème de la perte de l’état du DOM est réglé, mais en plus, il s’avère que le DOM virtuel est plus rapide que le DOM lui-même!

Performances

React is fast.

Elle se place parmi les plus rapides et dans de nombreux cas, en tant que leader. Il est par ailleurs difficile de comparer les performances globales de ce genre de bibliothèques, car certaines vont être optimisées pour certaines tâches, pas d’autres, et inversement.
Je vous invite à regarder cette présentation qui a eu lieu début 2015 :

React.js Conf 2015 — Hype!

Cette présentation est tout de même à nuancer: certaines erreurs d’implémentation ont apparemment été commises dans le code AngularJS: Is React Fast?

D’une manière générale, soyez rassurés, React est très rapide. De plus, Facebook continuera de concentrer ses efforts sur les performances de son petit protégé.

Server-side Rendering

React peut également être rendu depuis un serveur NodeJS, et cela apporte plusieurs avantages :

  • Un chargement des pages plus rapide, surtout quand la connexion (mobile, souvent) est lente.
  • Une UX globale améliorée: les pages sont téléchargées et affichées entièrement, instantanément.
  • Un meilleur référencement: plus de problème pour les moteurs de recherche qui n’exécutent pas le javascript lors de l’indexation des sites.
  • Une maintenance facilité: en effet, le code client est le même que celui du serveur.
  • L’application web reste fonctionnelle, même lorsque le javascript est désactivé côté client (ce qui est tout de même de plus en plus rare).

Le server-side rendering n’est pas obligatoire pour autant, il reste optionnel.

Learn once, write everywhere

C’est aussi l’un des objectifs et atouts de React: apprendre à coder une fois, et développer pour toutes les plateformes. En effet, vous pourrez développer des applications web, mais aussi des applications mobiles, natives. Oui, NATIVES.

React Native

James Long a posté un article intitulé “First Impressions using React Native” que je vous invite à lire.

Si je devais résumer ce dernier, je citerai cette phrase:

“I developed iOS apps for a few years, so I have experience with native development. After using React Native, I can only explain it like this:”
— James Long, Web Developer @ Mozilla

Le principe est assez simple: vous développez en javascript avec React, et le code est interprété en temps réel avec des composants natifs. Le moteur javascript interne se charge de déléguer la logique de l’application aux threads secondaires, ce qui permet notamment de libérer le thread principal et de le rendre disponible pour la mise à jour des vues et les interactions utilisateurs. Bref tout pour avoir une application reactive (oui.. désolé!).

87%

Une équipe d’ingénieurs Facebook a développé une application iOS grâce à React Native en 5 mois. 3 mois plus tard, ils ont pu sortir la version android en réutilisant 87% du code de l’application iOS. C’est surtout à ce niveau là je pense, que React aura un rôle important à jouer à l’avenir: performances natives, temps de développement optimisé, maintenance du code simplifiée, sans oublier une nouvelle expérience développeur sur mobile..

Une Developer Experience (DX) mobile renouvelée

Le fait que le code soit interprété en temps réel permet d’optimiser le workflow du développeur: une simple sauvegarde d’un fichier javascript et l’application est rafraichie instantanément:

“Le workflow de développement mobile devient celui du web, sans temps de compilation, avec la puissance et la simplicité de React.” — Maxime Warnier, Concepteur Développeur @ Météo France

Au niveau du debugging, on utilise les outils du web: Chrome web developer tools, Firefox developer tools, etc. On a également la possibilité de développer et débugger sur nos appareils sans devoir les brancher, en Wi-Fi. Enfin, avec cette technologie, on pourrait même imaginer faire le rendu de nos applications mobiles natives, côté serveur..

Flux, Relay & GraphQL

React n’est pas révolutionnaire que grâce à React Native.

D’abord, React redéfinit la manière avec laquelle on développe nos applications: elle peut notamment utiliser l’architecture Flux, le framework Relay, et le langage de requête GraphQL.

Flux

Flux est une architecture d’application web client-side qu’utilise Facebook. Elle va de pair avec l’imbrication des vues réutilisables de React en utilisant un “unidirectional data flow”.

Plus qu’un simple framework, il est considéré comme un pattern d’architecture.

Relay

Relay est un framework qui permet la récupération de données pour des applications de type React. Il est inspiré de Flux, et se marie parfaitement avec GraphQL.

GraphQL

GraphQL est un langage de requête permettant de décrire des dépendances internes complexes et imbriquées de bases de données. Il se greffe à n’importe quel type de base de données, et permet d’en générer une API à laquelle on pourra faire des requêtes de ce type (à gauche), et avoir ce résultat correspondant (à droite):

GraphQL request -> GraphQL answer

Ces trois briques font partie d’un renouveau que certains considèrent comme être une nouvelle révolution:

“Sometimes in software development, we take giant leaps. […] I believe this has happened again in 2015, this time with Facebook’s trio of React.js, Relay, and GraphQL.” — Eric Florenzano

Je vous invite à lire l’article: Facebook just taught us all how to build websites

Conclusion

Alors non:

  • React n’est pas (encore ?) LA bibliothèque ultime, elle est encore jeune, et beaucoup d’améliorations et d’outils complémentaires sont à venir, comme Relay ou GraphQL (soon!).
  • Facebook ne fera pas marche arrière pour autant et ne repassera pas en HTML5/JS pour ses applications mobiles (du moins, pas de sitôt).

Mais:

  • Elle est stable ! Pour preuve, elle est déjà utilisée en production dans les applications Facebook Messenger ou Instagram par exemple.
  • React-Native a déjà fait son bout de chemin: disponible sur iOS, elle arrive bientôt pour Android (avant la fin de l’année).
  • React est une petite bombe dans le monde du développement web et mobile, elle est considérée comme la nouvelle révolution, après celle d’angularJS en 2012.

De mon côté, j’espère avoir réussi le pari de vous en donner une idée assez précise, et pourquoi pas, vous avoir donné envie d’aller plus loin, et d’apprendre! Si oui, Getting started.

Prochaines étapes..

On pourrait donc très bientôt s’intéresser à React Native pour Android dans un premier temps.

Ensuite, viendra AngularJS 2.0 et on pourra alors s’amuser à le comparer à React… ou bien, à la place de toujours chercher à les opposer, pourquoi ne pas les associer, faire de React la Vue du framework MVW d’angular, et obtenir le meilleur des deux mondes ? :)

Thanks for reading & enjoy !


One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.