Developpez.com

Plus de 14 000 cours et tutoriels en informatique professionnelle à consulter, à télécharger ou à visionner en vidéo.

React : la bibliothèque JavaScript de Facebook pour créer des interfaces utilisateurs
Instagram.com en est un bel exemple

Le , par vermine, Responsable JavaScript & AJAX
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 ?


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de kdmbella kdmbella - Expert éminent http://www.developpez.com
le 22/12/2014 à 5:01
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é
Avatar de stailer stailer - Membre chevronné http://www.developpez.com
le 22/12/2014 à 11:16
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 ?
Avatar de SylvainPV SylvainPV - Rédacteur/Modérateur http://www.developpez.com
le 22/12/2014 à 12:31
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.
Avatar de kdmbella kdmbella - Expert éminent http://www.developpez.com
le 23/12/2014 à 0:26
Citation Envoyé par stailer  Voir le message
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

Avatar de Tarh_ Tarh_ - Membre confirmé http://www.developpez.com
le 23/12/2014 à 10:17
Mêmes critiques que SylvainPV vis-à-vis de React. Et puis leur "JSX" est une resucée de E4X, en retard d'un train.

Citation Envoyé par SylvainPV  Voir le message
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 ?
Avatar de SylvainPV SylvainPV - Rédacteur/Modérateur http://www.developpez.com
le 23/12/2014 à 10:56
@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
Offres d'emploi IT
Développeur javascript h/f
CTS Consulting - Pays de la Loire - Nantes (44000)
Associé développeur html5, css, javascript
MyC2V - Ile de France - Paris (75000)
Ingénieur d'études javascript (H/F)
CTS Consulting - Provence Alpes Côte d'Azur - Marseille (13000)

Voir plus d'offres Voir la carte des offres IT
Responsable bénévole de la rubrique JavaScript : Xavier Lecomte -