Matinale React

Présentation
Nicolas Cuillery
Emmanuel Demey
© Copyright Zenika

Programme
8h45 9h15 : Accueil et Petit Déjeuner
9h15 10h00 : Principes et philosophie
10h00 10h30 : Pause
10h30 11h45 : Utiliser la bonne stack de développement
12h00 : Questions / Réponses
© Copyright Zenika

Sommaire
React
Performances
Flux
Mais aussi...
© Copyright Zenika 1 1

Historique
Librairie créée par Jordan Walke (Facebook) en 2011
Portage JavaScript de , une extension PHP initialisée en 2009
Opensourcée en 2013 par Pete Hunt (Instagram)
"Rethinking best practices"
XHP
https://www.youtube.com/watch?v=x7cQ3mrcKaY


Références


React
Version actuelle : 15.0.2
Site :
Documentation :
Sources :
Activement maintenue par Facebook (et la communauté)
http://facebook.github.io/react/
http://facebook.github.io/react/docs/
http://github.com/facebook/react/

Description
Lots of people use React as the V in MVC.
React est une librairie orientée composant.
React seul ne permet pas de construire une application :
→ Modèle Flux (alternative au MVC)
→ Routeur
→ Librairie AJAX/REST

API
Une des forces de React est de proposer une API simple, concise et cohérente.
→ Courbe d'apprentissage très rapide
API composant
Gestion du cycle de vie (componentWillMount, componentDidUpdate,
etc.)
Etat du composant (this.state, this.props)
Gestion du rendu (méthode render, méthode registerComponent)
http://facebook.github.io/react/docs/componentapi.html

Architecture
React est divisé en plusieurs librairies:
React "core" (cycle de vie, composant)
Différentes cibles :
React DOM (rendu spécifique au DOM)
React Native (rendu mobile natif)
React canvas (rendu dans le canvas HTML, librairie tierce)
etc.

Hello World
constHello=React.createClass({
getDefaultProps(){
return{
name:'World'
};
},
render(){
returnReactDOM.createElement('div',null,`Hello${this.props.name}!`);
}
});

Hello World (avec du JSX !)
constHello=React.createClass({
getDefaultProps(){
return{
name:'World'
};
},
render(){
return<div>{this.props.name}</div>;
}
});

Hello World
Rendu du composant :
ReactDOM.render(<Hello/>,document.getElementById('container'));
//ou
ReactDOM.render(<Helloname="Paul"/>,document.getElementById('container'));
Génère le markup suivant :
<div>HelloWorld!</div>

<div>HelloPaul!</div>

Programmation React ive
L'état de sortie est uniquement fonction de l'état d'entrée
Etat d'entrée d'un composant :
Propriétés d'initialisation (this.props)
Etat interne (this.state)
Etat de sortie :
Markup HTML (retour de la méthode render)

Programmation React ive
Le rerendu d'un composant est déclenché uniquement par un changement des
props ou du state
→ Ce paradigme rend aisé le débuggage des composants.

Composant pur
Pour encourager au découpage en composant pur, React propose une déclaration
simplifiée:
constHello=({name='World'})=><div>Hello{name}</div>;
Idéalement, une application est faite de :
Composants purs réalisant uniquement de l'affichage en fonction des props
Composants impurs chargés de constituer les props des composants purs

Ce qu'il faut retenir
→ Une librairie très mature
→ Références nombreuses et solides
→ Une courbe d'apprentissage rapide

Sommaire
React
Performances
Flux
Mais aussi...

Virtual DOM
React ne manipule pas le DOM directement
Virtual DOM sauvegardé en mémoire
Calcul de la différence lors du rerendu (diff)
Mise à jour optimisée du DOM réel (reconciliation)

Virtual DOM : Exemple
Mise à jour d'une liste d'éléments dans le DOM
Exemple :
Avant
AngularJS
Backbone
Ember
Après
React
AngularJS
Ember
Deux méthodes comparées :
Suppression de l'ancien et ajout du nouveau noeud.
Mise à jour des éléments sans modifier l'arbre DOM (React).

JSPerf :
Code :
http://jsperf.com/virtualdomoptimdemo/2

Performances - shouldComponentUpdate
Le concept de virtual DOM est performant, mais :
Même s'il n'y a aucun changement à appliquer, la méthode render sera
quand même exécutée.
Rien n'est plus rapide que "pas de travail du tout" !
Solution : méthode shouldComponentUpdate :
Méthode appelée automatiquement par React avant un rendu : cycle de vie
du composant.
Permet d'annuler l'appel à la méthode render.
S'applique à l'arbre du DOM en cascade !
Doit renvoyer true ou false selon si l'élément doit être mis à jour ou non.

Propagation des modifications avec shouldComponentUpdate

Exemple : implémentation par défaut

importReactfrom'react';
exportdefaultMyComponentextendsReact.Component{
constructor(props){
super(props);
}
render(){...}
shouldComponentUpdate(nextProps,nextState){
returntrue;
}
}

Exemple : implémentation idéale, fonction render pure

importshallowComparefrom'react-addons-shallow-compare';
exportdefaultMyComponentextendsReact.Component{
constructor(props){
super(props);
}
render(){...}
shouldComponentUpdate(nextProps,nextState){
returnshallowCompare(this,nextProps,nextState);
}
}

→ Très performant de base
→ API et devtools pour tuner le rendu

Sommaire
React
Performances
Flux
Mais aussi...

Présentation
Architecture pour concevoir des applications.
Pas un framework !
Pas une librairie !
Poussée par Facebook.
https://facebook.github.io/flux

Flux

Actions
Code impératif (fonction) pour réaliser quelque chose:
Data fetching
Soumission de formulaire
Ouverture de modale
Etc.
et soumettre un résultat (payload)

Stores
Contiennent l'état de l'application
Unique source de vérité
→ L'affichage (composants React) ne dépend que de l'état des stores

Architecture Flux
Le modèle Flux est unidirectionel
Rappelle le fonctionnement de React : props → render → markup
→ Debugging aisé
→ Architecture propre

Redux
Pendant longtemps : le paysage des implémentations Flux était très morcelé
Aujourd'hui : Une librairie écrase les autres :
Créée par Dan Abramov
Interprétation simplifiée du modèle Flux
Concise ( ) et extensible100 LoC !

Redux

Diﬀérences avec Flux
Pas de dispatcher, mais un reducer
Store unique
Pas de notification aux composants, mais un changement de référence
→ Très peu de "boilerplate"

→ Un modèle en adéquation avec React
→ Un écosystème (enfin) stable
→ Developer eXperience

Sommaire
React
Performances
Flux
Mais aussi...

Testabilité
Framework de test créé par la team React: Jest
Automock: tests réellement unitaires avec un minimum de boilerplate
Remplace à lui seul la stack classique :
Karma,
Jasmine / Mocha
PhantomJS
Sinon
Utilise JSDom pour le rendu DOM

Jest
jest.unmock('../CheckboxWithLabel');
importReactDOMfrom'react-dom';
importTestUtilsfrom'react-addons-test-utils';
importCheckboxWithLabelfrom'../CheckboxWithLabel';
describe('CheckboxWithLabel',()=>{
it('changesthetextafterclick',()=>{
constcheckbox=TestUtils.renderIntoDocument(<CheckboxWithLabellabelOn="On"
labelOff="Off"/>);
constcheckboxNode=ReactDOM.findDOMNode(checkbox);
//Verifythatit'sOffbydefault
expect(checkboxNode.textContent).toEqual('Off');
//SimulateaclickandverifythatitisnowOn
TestUtils.Simulate.change(
TestUtils.findRenderedDOMComponentWithTag(checkbox,'input')
);
expect(checkboxNode.textContent).toEqual('On');
});
}); © Copyright Zenika 4 3

Isomorphisme
Une raison pour laquelle React a été rapidement adopté pour les sites grandpublic.
React est capable de faire du rendu DOM dans une chaîne de caractère:
import{renderToString}from'react-dom/server';
letmarkup=renderToString(<MyRootComponent/>);
Coté client, React s'exécute et compare le markup existant avec celui qu'on veut
afficher

Isomorphisme
Coût non négligeable: il faut savoir générer le même markup coté server et coté
client
→ Un site ne peut pas être 100% isomorphique
→ Transmission de l'état de l'application du server au client (facile grâce à Flux)
conststore=createStore(reducer,initialState)

React Native
Le pari de Facebook: Qu'un développeur React puisse développer des applications
mobiles
render(){
let{movie}=this.props;
return(
<View>
<Text>{movie.title}</Text>
<Text>{movie.year}</Text>
<Imagesource={{uri:movie.posters.thumbnail}}/>
</View>
);
}

React Native
Hier iOS
Aujourd'hui Android
Demain Windows Phone
Learn Once, Run Everywhere
Socle commun (View, Image, Text)
Composant spécifique (ListView, TabBar, Navigator) pour les ergonomies de
chaque plateforme

React Native
Quelques applications mobiles Facebook utilisent React Native
Migration de l'application principal dans la roadmap
Peu d'exemples externes (Discord)
→ Gros potentiel en terme de codereuse (iOS vs Android mais également Web vs
Mobile)

React Native
Beaucoup d'efforts pour conserver la même Developer eXperience :
Live Reload
Hot Reload
Debug dans les Chrome Dev Tools
Testabilité

Merci !

Matinale React

Contenu connexe

En vedette

Plus de Zenika

Dernier

Matinale React