Archives pour la catégorie React (Javascript)

React – Création d’une application “one page”

Vous trouverez dans cet article une technique de développement Javascript d’une application “one page” (ou SPA pour Single Page Application) utilisant la librairie React de Facebook. Dans ce genre d’application, il est nécessaire d’avoir un conteneur générique pour y injecter le contenu dynamique.

Structure HTML de base de l’application one page

Ci dessous le fichier Javascript incluant le controller ainsi que l’injection dans la balise portant la classe pmToolApp__rp

Si vous avez des questions ou des commentaires sur le code ou son fonctionnement, n’hésitez pas à les poster 😉

La librairie ultra performante de Facebook

React – La librairie ultra performante de Facebook

J’ai découvert React en Janvier 2014 au cours d’une toute nouvelle mission chez Palo-IT pour le compte de la SACEM. L’objectif est de développer un nouveau portail web pour les clients de la SACEM. Plus tard, viendra le site mobile ainsi que l’application mobile. Je ne connais pas encore les technologies que nous utiliserons pour le site mobile ni pour l’application mais React est en tout cas bien ancré pour le future portail web de la SACEM et c’est avec une très grosse motivation que je commence cette nouvelle missions en découvrant cette superbe librairie.

React, à quoi ça sert ?

React est une librairie Javascript qui s’occupe de gérer le rendu des pages web. Autrement dit, son boulot, c’est de gérer le DOM des navigateurs et à ma connaissance, il le fait mieux que personne. En effet, mettre à jour plusieurs centaines de noeuds en simultané est un jeu d’enfant ! Son secret ? il créé un DOM virtuel (qui est une copie du vrai DOM) et calcul le différentiel par rapport au DOM du navigateur de façon à ne mettre à jour que les noeuds concernés par la partie dynamique. Il limite ainsi les accès en lecture / écriture au DOM pour économiser les ressources du navigateur. En effet, les “lectures / écritures” étant ce qui consomme le plus de ressource sur les pages dynamiques, vous comprendrez que React  a un atout sérieux. C’est d’ailleurs la raison pour laquelle Instagram à également choisi cette technologie révolutionnaire.

Ci-dessous, un petit exemple très simple de “Hello world!” version React JS

On suppose la structure HTML suivante :

Et le fichier javascript “myApp.js” suivant :

Pour en savoir plus, rendez-vous directement sur leur site : http://facebook.github.io/react/