React : la bibliothèque JavaScript de Facebook pour créer des interfaces utilisateurs

Instagram.com en est un bel exemple

Le 2014-12-19 10:52:26, par vermine, Expert éminent sénior

React : la bibliothèque JavaScript de Facebook pour créer des interfaces utilisateurs

React est une bibliothèque JavaScript développée par Facebook qui permet de créer des interfaces utilisateurs. Instagram.com en est un bel exemple.

Elle utilise un concept appelé le DOM virtuel qui restitue sélectivement les sous-arborescences de nœuds en fonction des changements d'état. L'objectif est de réduire le nombre de manipulations du DOM tout en gardant les composants à jour. Ce DOM virtuel peut être rendu sur un serveur utilisant Node.js.

React peut en fait être votre système de vues dans une application MVC car elle ne se tracasse pas du reste des composants. Et donc, signalons-le, React ne représente que cette couche view. Il ne sert à rien de vouloir la comparer à des frameworks qui offrent plus d'intelligence. Par contre, il faudra combiner React avec quelque chose pour obtenir une application dynamique complexe.

Autour de cette bibliothèque, il est permis de constituer des composants pour ou utilisant React.

Par exemple, il y a le rc-calendar. Ce composant permet d'afficher des calendriers selon certaines propriétes comme :

la localité ;
un bouton "Aujourd'hui" ;
la gestion d'événements.

Il a également un composant de graphiques : Reusable D3 Charts. Cette bibliothèque implémente les graphiques de types barres, camembert, donuts (!), etc.

Bref, ce ne sont que des exemples parmi d'autres. Il y en aura sans doute de plus en plus car React est encore jeune et intéresse pas mal de développeurs.

Le site de React.
D'après un article de DailyJS.

Et vous ?

Que pensez-vous de cette bibliothèque ?
Quels outils utilisez-vous pour créer votre couche d'affichage ?

Discussion forum

6 commentaires

kdmbella
Expert éminent

J'ai découvert React Js dans les discussion sur developpez.com; j'avoue ne pas encore l'avoir utilisé, mais son côté manipulation virtuelle du DOM laisse présager des interfaces encore plus légères et donc lus rapide au chargement.

Dans la pratique j'utilise DHTMLX (dhtmlx.com) pour mes vues / affichages et pour le moment j'en suis pleinement satisfait.

Je laisse à React le temps de gagner un peu de maturité

le 22/12/2014 à 5:01
SylvainPV
Rédacteur/Modérateur

J'ai exploré en long et en large le templating client (voir mon article) et React semble être à l'opposé de toutes les bonnes pratiques que j'ai pu tirer de mon expérience: il met markup et logique au même endroit, il nécessite de recourir à un préprocesseur et il apporte une abstraction complète du DOM qui complique énormément le débogage depuis les vues. Les benchs sont mis en avant mais il va falloir un peu plus que ça pour me convaincre !

Depuis un peu plus d'un an, je travaille sur ma propre lib de templating basés sur des principes radicalement différents de ceux adoptés par React, ce qui ne doit pas m'aider à l'apprécier notamment des templates en pur HTML, sans interpolation de texte, avec un autoupdate à base de proxy au lieu de dirty-checking. D'après moi, un bon templating est un lien entre markups et modèles préexistants, un lien le plus transparent et intuitif possible. Il ne s'agit pas comme le fait React de "générer une structure depuis une logique" ou l'inverse ; il s'agit de travailler sur les deux séparément, puis de les relier. Ça colle mieux avec ma façon de travailler, ainsi qu'à celle dans ma boîte où ce ne sont pas les mêmes équipes qui produisent les maquettes que ceux qui les dynamisent.

le 22/12/2014 à 12:31
stailer
Membre chevronné

Tu peux faire des composants HTML réutilisables avec DHTMLX ?

Attention, il faut pas confondre "composant" et "vue (ou templates)".
Avec JQuery et de nombreux frameworks tu peux déjà utiliser des moteurs ou tu vas stocker ton template d'un côté et l'appeler avec des paramètres de l'autre.
Donc il y a une petite ressemble mais là l'idée est de fabriquer un vrai composant.

React n'est il pas davantage une petite alternative aux composants de HTML5 ?

le 22/12/2014 à 11:16
kdmbella
Expert éminent

Envoyé par stailer

Tu peux faire des composants HTML réutilisables avec DHTMLX ?

Salut

DHTMLX est déjà en lui même une bibliothèque de composants AJAX réutilisables et oui je les réutilise à volonté dans mes
développements à moins que je ne comprenne pas ce que tu entends exactement par composant; du coup je t'invite un peu
à découvrir ou à parcourir cette bibliothèque et me dire si ça correspond à ce que tu veux dire ...
La Bibliothèque DHTMLX

le 23/12/2014 à 0:26
Paleo
Membre éclairé

Mêmes critiques que SylvainPV vis-à-vis de React. Et puis leur "JSX" est une resucée de E4X, en retard d'un train.

Envoyé par SylvainPV

Depuis un peu plus d'un an, je travaille sur ma propre lib de templating basés sur des principes radicalement différents de ceux adoptés par React, ce qui ne doit pas m'aider à l'apprécier notamment des templates en pur HTML, sans interpolation de texte, avec un autoupdate à base de proxy au lieu de dirty-checking.

Sous une licence open source ?
Quelle position par rapport à Vue.js ? Ou encore par rapport au futur HTMLBars de l'équipe de Ember.js ?

le 23/12/2014 à 10:17
SylvainPV
Rédacteur/Modérateur

@Tahr: A la différence de la plupart des libs de templating, elle ne fonctionnera pas par interpolation de texte. J'ouvrirai un topic lorsque la lib sera prête pour publication, et bien entendu elle sera opensource

le 23/12/2014 à 10:56

Poster une réponse