React est la librairie orientée composant, produite par Facebook, qui est venue bousculer le paysage JavaScript ces dernier mois. Peut-être en avez-vous entendu parler mais vous avez du mal à positionner cette librairie dans une architecture orientée Web ? Découvrez les raisons pour lesquelles React fait le buzz.

1. Matinale React

2. Présentation
Nicolas Cuillery
Emmanuel Demey
© Copyright Zenika

3. 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

4. © Copyright Zenika

5. React
1

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

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

8. Références
© Copyright Zenika 1 ­ 3

9. 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/
© Copyright Zenika 1 ­ 4

10. 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
© Copyright Zenika 1 ­ 5

11. 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/component­api.html
© Copyright Zenika 1 ­ 6

12. 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.
© Copyright Zenika 1 ­ 7

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

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

15. 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>
<!--ou-->
<div>HelloPaul!</div>
© Copyright Zenika 1 ­ 10

16. 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)
© Copyright Zenika 1 ­ 11

17. Programmation React ive
Le re­rendu d'un composant est déclenché uniquement par un changement des
props ou du state
→ Ce paradigme rend aisé le débuggage des composants.
© Copyright Zenika 1 ­ 12

18. 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
© Copyright Zenika 1 ­ 13

19. Ce qu'il faut retenir
→ Une librairie très mature
→ Références nombreuses et solides
→ Une courbe d'apprentissage rapide
© Copyright Zenika 1 ­ 14

20. Performances
2

21. Sommaire
React
Performances
Flux
Mais aussi...
© Copyright Zenika 2 ­ 1

22. Virtual DOM
React ne manipule pas le DOM directement
Virtual DOM sauvegardé en mémoire
Calcul de la différence lors du re­rendu (diff)
Mise à jour optimisée du DOM réel (reconciliation)
© Copyright Zenika 2 ­ 2

23. 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).
© Copyright Zenika 2 ­ 3

24. Virtual DOM : Exemple
JSPerf :
Code :
http://jsperf.com/virtual­dom­optim­demo/2
© Copyright Zenika 2 ­ 4

25. Virtual DOM : Exemple
© Copyright Zenika 2 ­ 5

26. 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.
© Copyright Zenika 2 ­ 6

27. Performances - shouldComponentUpdate
Propagation des modifications avec shouldComponentUpdate
© Copyright Zenika 2 ­ 7

28. Performances - shouldComponentUpdate
Exemple : implémentation par défaut
importReactfrom'react';
exportdefaultMyComponentextendsReact.Component{
constructor(props){
super(props);
}
render(){...}
shouldComponentUpdate(nextProps,nextState){
returntrue;
}
}
© Copyright Zenika 2 ­ 8

29. Performances - shouldComponentUpdate
Exemple : implémentation idéale, fonction render pure
importReactfrom'react';
importshallowComparefrom'react-addons-shallow-compare';
exportdefaultMyComponentextendsReact.Component{
constructor(props){
super(props);
}
render(){...}
shouldComponentUpdate(nextProps,nextState){
returnshallowCompare(this,nextProps,nextState);
}
}
© Copyright Zenika 2 ­ 9

30. Ce qu'il faut retenir
→ Très performant de base
→ API et devtools pour tuner le rendu
© Copyright Zenika 2 ­ 10

31. Flux
3

32. Sommaire
React
Performances
Flux
Mais aussi...
© Copyright Zenika 3 ­ 1

33. Présentation
Architecture pour concevoir des applications.
Pas un framework !
Pas une librairie !
Poussée par Facebook.
https://facebook.github.io/flux
© Copyright Zenika 3 ­ 2

34. Flux
© Copyright Zenika 3 ­ 3

35. 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)
© Copyright Zenika 3 ­ 4

36. 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
© Copyright Zenika 3 ­ 5

37. Architecture Flux
Le modèle Flux est unidirectionel
Rappelle le fonctionnement de React : props → render → markup
→ Debugging aisé
→ Architecture propre
© Copyright Zenika 3 ­ 6

38. 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 !
© Copyright Zenika 3 ­ 7

39. Redux
© Copyright Zenika 3 ­ 8

40. Diffé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"
© Copyright Zenika 3 ­ 9

41. Ce qu'il faut retenir
→ Un modèle en adéquation avec React
→ Un écosystème (enfin) stable
→ Developer eXperience
© Copyright Zenika 3 ­ 10

42. Mais aussi...
4

43. Sommaire
React
Performances
Flux
Mais aussi...
© Copyright Zenika 4 ­ 1

44. Testabilité
Framework de test créé par la team React: Jest
Auto­mock: 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
© Copyright Zenika 4 ­ 2

45. Jest
jest.unmock('../CheckboxWithLabel');
importReactfrom'react';
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

46. Isomorphisme
Une raison pour laquelle React a été rapidement adopté pour les sites grand­public.
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
© Copyright Zenika 4 ­ 4

47. 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)
© Copyright Zenika 4 ­ 5

48. 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>
);
}
© Copyright Zenika 4 ­ 6

49. 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 plate­forme
© Copyright Zenika 4 ­ 7

50. 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 code­reuse (iOS vs Android mais également Web vs
Mobile)
© Copyright Zenika 4 ­ 8

51. React Native
Beaucoup d'efforts pour conserver la même Developer eXperience :
Live Reload
Hot Reload
Debug dans les Chrome Dev Tools
Testabilité
© Copyright Zenika 4 ­ 9

52. Merci !
© Copyright Zenika 4 ­ 10