React.js

Compétence
Intérêt

React JS la lib de Facebook apporte une approche intéressante pour le développement d'application JavaScript front-end mais aussi back-end de part sa capacité à être isomorphique.

En effet, React peut être utilisé en tant que moteur de template coté serveur (avec par exemple Node.js ou Go).
Du coup cela règle le problème du référencement d'une application développée entièrement en JS, puis-ce que le rendu initial peut être retourné en contenu brut de la même manière qu'en PHP, Go ou Node.js.

Aussi, React peut être utilisé pour faire des applications mobiles natives (Android et iOS) avec la variante React Native. Avec une touche de Motion Design, le résultat est excellent !

React est orienté composants (facilement réutilisables !). Dans une application MVC (Model View Controller) React peut aisément tenir le rôle du V de MVC ou encore les V d'une architecture MVVM.

Dans React chaque composant a un état (state), cet état est un objet observable équivalent à l'utilisation du scope d'Angular. A la "grande" différence que React utilise un DOM virtuel couplé à un algorythme de diff et de patch pour fusionner au DOM réel uniquement les modifications apportées à la vue.
React offre des méthodes pour gérer le cycle de vie du composant permettant (entre autres) de contrôler finement cette fusion. En outre, cette conception apporte un énorme gain de performance mais a aussi l'avantage de diminuer considérablement (voir même d'éviter) l'effet de repainting (scintillement).

Le système de rendu d'Angular quant à lui, utilise un algorythme de dirty checking (bien plus lent) qui met à jour le DOM sans finesse en se basant sur une boucle d'événements internes.
Cette conception particulière du noyaux d'Angular oblige souvent à recourir à des hacks tout aussi particuliers pour utiliser des fonctionnalités natives du JS afin d'éviter de sortir de la boucle d'événements d'Angular ou de perdre le data binding. Parfois prévu d'origine dans Angular tel que $timeout() au lieu de setTimeout(), parfois solutionné par des modules supplémentaires, parfois plus subtile à résoudre. Bref Angular apporte son lot de complexités inutiles pouvant mener à de la dette technique (temps de développement plus long, plus coûteux, hacks temporaires prenant racine, ...).

Pour simplifier l'utilisation du DOM virtuel, React supporte l'utilisation du JSX (une syntaxe XML proche du HTML) directement dans les composants. Le JSX est par la suite compilé en objet JavaScript classique dans le build final. Cela semble bizarre au début mais cela apporte un réel avantage au niveau de la lisibilité, de la productivité et de la réutilisation des composants.

React en lui même n'est qu'une lib de rendu et c'est très bien ! Cela laisse le choix au développeur de concevoir son framework idéalement adapté au type de projet à développer.

Par exemple dans l'environnement d'exécution asynchrone qu'offre le JavaScript, il est souvent primordial de pouvoir linéariser le flux d'exécution pour éviter des effets de bord inopportun et difficile à débuguer.

C'est pourquoi les créateurs de React poussent à l'utilisation de Flux, un design pattern privilégiant un workflow unidirectionnel plus adapté à une logique _composant.

React Flux desing pattern architecture

Comparé à Angular, j'ai senti un vrai vent de fraîcheur en utilisant React / Flux. L'architecture React / Flux est devenu ma base favorite pour la stack de développement d'applications front.

A partir de là avec quelques ingrédients supplémentaires on obtient un framework solide, simple, flexible et performant.

Pour ma part mon framework idéal se base sur :

  • ES6 / ES7 / JSX / CommonJS (compilé avec Babel.js et Webpack)
  • React.js
  • Flux (Alt.js est bâti au dessus de la lib Flux de Facebook. Alt.js apporte des fonctionnalités intéressantes sans superflu) ou Storux (plus précis : mix de Flux et reducer, inspiré de Alt.js et Redux)
  • Routux (un routeur HTTP simple et puissant)
  • Axios (une lib pour les requêtes Ajax)
  • Gulp (pour les tâches de builds automatisés)
  • Unit.js (tests unitaires)
  • Webdriver.io (tests d'intégrations end to end)
  • Mocha (runner de tests)
  • Quelques libs supplémentaires pour la gestion des formulaires, validations des données et fonctionnalités spécifiques au projet à développer.
  • NPM (gestionnaire de packages / modules)
  • GIT (gestionnaire de versions)

La vie est belle