Plongez dans ReactJS

Premier article d'une série de billets présentant le framework ReactJS à travers le livre de Azat Mardan "React Quickly: Painless web apps with React, JSX, Redux, and GraphQL" (lien amazon.fr)

"ReactJS apporte de la joie" affirme Azat Mardan. Il remplace Angular (trop complexe), Backbone (plus flexible, peut servir de base à votre propre framework) et Ember pour le développement mobile et web. Il simplifie grandement le développement d'interface utilisateur, l'un des domaines les plus complexes, plus difficile à maîtriser que le développement serveur si l'on en croit le marché de l'emploi qui peine à fournir assez de candidats aux missions "Fullstack". Par ailleurs React Native offre une alternative crédible au développement spécifique, natif, sur mobile...

Cette série d'articles s'adresse aux développeurs et ingénieurs logiciel qui maîtrisent les concepts suivant:

  • JavaScript, ses "closures", ses "scopes" (portée des variables), la manipulation de tableaux et de chaînes
  • Les SPA : applications en "une page"
  • les sevices RESTful et les architectures à base d'API
  • HTML, HTML5
  • CSS, ses styles, ses sélecteurs JavaScripts

L'étude de React bénéficiera de comparaisons avec ces autres technologies de la galaxie MVC que sont jQuery, Angular, Ember.js ou Backbone.js, et la connaissance d'outils comme Browserify, CommonJS, Gulp, npm et surtout Node.js est un atout certain.


Qu'est-ce que React ? 

React est une bibliothèque de composants d'interface graphique (comprenez "bouton", "boîte de texte", "formulaires" etc) qui ne nécessite pas de langage de modèle (template language) particulier autre que le langage javscript lui-même et permet de définir des composants composables, réutilisables et largement indépendants les uns des autres. React est né du besoin d'avoir une interface utilisateur (UI ou GUI) qui s'adapte automatiquement quand les données changent, par exemple quand un utilisiteur surfe sur son Facebook. React change le DOM (modèle de document qui représente la page affichée en mémoire) en mémoire en temps réel avec des performances plus que satisfaisantes. Historiquement, javascript a d'abord bénéficier d'outils, de librairies comme jQuery avant de voir venir des frameworks plus complexes et riches en fonctionnalités, comme Angular ou Backbone.

Les bénéfices de React sont :

  • des applications au code plus simple, déclaratif (plutôt qu'impératif), et une abstraction du DOM qui fonctionne pour le HTML dans les navigateurs, mais aussi avec iOS et Android.
  • une grande réactivité de l'interface, performances obtenues grâce à un algorithme "de réconciliation" du DOM virtuel 
  • une communauté de développeurs actifs

La réconciliation du DOM virtuel avec le DOM réel présenté dans la fenêtre navigateur, le calcul de la différence entre les deux qui doit génèrer une mise à jour de l'affichage, s'apparente aux "2 ways data-binding" d'Angular, mécanisme qui assure une synchronisation entre le modèle et la vue (du MVVM).

React propose donc une "architecture orientée composants" basée sur du Javascript. Comparez avec Angular:


<
a ng-if="user.session" href="/logout">Logout</a> <a ng-if="!user.session" href="/login">Login</a>

if
(user.session) return React.createElement('a', {href: '/logout'}, 'Logout')
else return React.createElement('a', {href: '/login'}, 'Login')

Le problème de la syntaxe Angular est qu'elle laisse le doute planer: l'élément est-il créé puis, si la condition n'est pas remplie, caché par angular ? et ng-if, prend-il un boolean ou une chaîne? 

Comme React utilise directement le Javascript, la réponse à ces questions est directe.

Cet autre exemple avec templates et  itérateurs illustre la nécessité d'apprendre une nouvelle syntaxe avec Angular, ce qui n'est pas nécessaire avec React.


<
div ng-repeat="account in accounts"> {{account.name}} </div>

accounts.map(function(account) { return React.createElement('div', null, account.name) })14


1 commentaire

Ajouter un commentaire