REACT JS EN QUELQUES MOTS

Présentation rapide de REACT en vue de son utilisation chez OAB (ORANGE APPLICATION FOR BUSINESS) aux équipes de développeurs.

Transcript

1. Nicolas Perussel - 03 Octobre 2017 Introduction et approche
2. REACT JS Salut, je m’appelle Jordan Walke (Facebook engineer) et je suis à l’origine de la lib REACT. Pete Hunt (Instagram) m’a rejoint pour améliorer la lib.  Librairie développée par Facebook  ReactJS est « open source » depuis 2013  Sur les paradigmes MV*, REACT JS se concentre uniquement sur la « vue »  REACT JS n’est donc pas un framework  Utilisé par : Facebook, Netflix, Airbnb, Atlassian, Sony, En Marche !
3. REACT JS  Conçu comme un portage de XHP (une librairie également développée par Facebook, permettant l'inclusion de HTML au sein de PHP)  La première version de REACT prenait 17 minutes pour rendre 10 000 DOM Elements avec un processeur de 1Ghz  REACT a été utilisé et approuvé par Facebook lorsque celui-ci a « réparé » le « bug perpétuel » du Chat Facebook.  Publiée sous : • Licence Apache 2.0 le 29 mai 2013, • Octobre 2014, la version 0.12.0 est publiée sous licence BSD modifiée, • Licence BSD mise à jour en avril 2015 • 26 septembre 2017, React 16.0.0 a été publié sous la licence MIT
4. REACT JS  Librairie orientée RENDU  Prône l’utilisation de composants réutilisables via les WEB COMPONENTS  La GESTION DE L’ETAT (DOM) est centrale  Très performant grâce à la mise en place d’un VIRTUAL DOM (différence de DOM) Salut, je m’appelle Jordan Walke (Facebook engineer) et je suis à l’origine de la lib REACT. Pete Hunt (Instagramm) m’a rejoint pour améliorer la lib. Un composant REACT n’est au final qu’une fonction idempotente pouvant décrire votre UI à un moment précis dans le temps de façon extrêmement fiable
5. C’EST PARTI  COMPONENT == JSX (Javascript XML)  COMPONENT embarque ses propres actions et son propre état  COMPONENTS sont indépendants les uns des autres props : propriétés du composant state : état interne du composant. getInitialState : initialiser le “state” interne du composant. (retourne un objet qui sera ensuite mappé sur this.state) setState : méthode permettant simplement de mettre à jour le “state”. (appelée de l’extérieur pour mettre à jour les données) componantDidMount : appelée lors de la création du composant, elle permet d’initialiser des méthodes et données. componantWillUnmount : Appelé lors de la destruction du composant. Peut être utilisé pour transmettre des données lors de cette phase. render : se charge de l’affichage du composant
6. JSX  JSX n’est qu’un DSL (Domain Specific Language) représentant le DOM  Nécessite une étape de compilation  Son utilisation est complétement optionnel (reste très lisible et pratique) https://facebook.github.io/jsx/
7. VIRTUAL DOM A chaque mise à jour des données, REACT :  Construit un nouvel arbre visuel à partir de celles-ci  Effectue un diff avec la version précédente de l’arbre  Stocke en ensemble atomique de modifications au sein d’une queue  Traite cette queue par lot (batch processing) IT’S REALLY FAST !
8. VIRTUAL DOM : en profondeur  Pas de reconstruction du DOM global  Traitement uniquement des changements  Truly minimal Diff : O(N3)  React Diff : O(N) React traite ses composants comme des « pures functions ». Tout changement invoqué via .render() renvoie un nouvel arbre de composant. React applique son DIFF afin de déterminer comment mettre à jour le DOM réel par rapport au DOM virtuel (changement d’état).
9. RAPPEL Une fonction pure ne dépend pas et ne modifie pas l’état de variables hors de sa portée. En pratique, cela signifie qu’une fonction pure retourne toujours le même résultat avec des paramètres identiques. Son exécution ne dépend pas de l’état du système. Les fonctions pures sont d’ailleurs un pilier de la programmation fonctionnelle. C’est quoi ça une fonction “pure” ? Source : http://www.nicoespeon.com/fr/2015/01/fonctions-pures-javascript/
10. RAPPEL Le Shadow DOM permet l’encapsulation de ses Web Components. Shadow DOM
11. INSTALLER REACT Créer une nouvelle application REACT
12. Un composant simple
13. Un composant avec état
14. MVC : loin d’être parfait  MVC n’est pas scalable  La maintenance devient laborieuse, plus on ajoute de modèles, de contrôleurs et de vues, plus la complexité augmente.  Facebook à inventer « FLUX » (observer pattern)  Architecture unidirectionnelle  Evaluation facilité du chemin critique d’un événement Interraction
15. REDUX Flux est un pattern Redux une librairie
16. Merci de votre écoute