Matinale React
-
Upload
zenika -
Category
Engineering
-
view
201 -
download
0
Transcript of Matinale React
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
© Copyright Zenika
React
1
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
© Copyright Zenika 1 2
Références
© Copyright Zenika 1 3
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
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
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
© Copyright Zenika 1 6
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
Hello World
const Hello = React.createClass({
getDefaultProps() { return { name: 'World' }; },
render() { return ReactDOM.createElement('div', null, ̀Hello ${this.props.name} !̀); }
});
© Copyright Zenika 1 8
Hello World (avec du JSX !)
const Hello = React.createClass({
getDefaultProps() { return { name: 'World' }; },
render() { return <div>{this.props.name}</div>; }
});
© Copyright Zenika 1 9
Hello World
Rendu du composant :
ReactDOM.render(<Hello />, document.getElementById('container'));
// ou
ReactDOM.render(<Hello name="Paul" />, document.getElementById('container'));
Génère le markup suivant :
<div>Hello World !</div>
<!-- ou -->
<div>Hello Paul !</div>
© Copyright Zenika 1 10
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
Programmation React ive
Le rerendu d'un composant est déclenché uniquement par un changement desprops ou du state
→ Ce paradigme rend aisé le débuggage des composants.
© Copyright Zenika 1 12
Composant pur
Pour encourager au découpage en composant pur, React propose une déclarationsimplifiée:
const Hello = ({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
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
Performances
2
Sommaire
React
Performances
Flux
Mais aussi...
© Copyright Zenika 2 1
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)
© Copyright Zenika 2 2
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
Virtual DOM : Exemple
JSPerf :
Code :
http://jsperf.com/virtualdomoptimdemo/2
© Copyright Zenika 2 4
Virtual DOM : Exemple
© Copyright Zenika 2 5
Performances - shouldComponentUpdate
Le concept de virtual DOM est performant, mais :
Même s'il n'y a aucun changement à appliquer, la méthode render seraquand 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 viedu 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
Performances - shouldComponentUpdate
Propagation des modifications avec shouldComponentUpdate
© Copyright Zenika 2 7
Performances - shouldComponentUpdate
Exemple : implémentation par défaut
import React from 'react';
export default MyComponent extends React.Component { constructor(props) { super(props); }
render() { ... }
shouldComponentUpdate(nextProps, nextState) { return true; }}
© Copyright Zenika 2 8
Performances - shouldComponentUpdate
Exemple : implémentation idéale, fonction render pure
import React from 'react';import shallowCompare from 'react-addons-shallow-compare';
export default MyComponent extends React.Component { constructor(props) { super(props); }
render() { ... }
shouldComponentUpdate(nextProps, nextState) { return shallowCompare(this, nextProps, nextState); }}
© Copyright Zenika 2 9
Ce qu'il faut retenir
→ Très performant de base→ API et devtools pour tuner le rendu
© Copyright Zenika 2 10
Flux
3
Sommaire
React
Performances
Flux
Mais aussi...
© Copyright Zenika 3 1
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
Flux
© Copyright Zenika 3 3
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
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
Architecture Flux
Le modèle Flux est unidirectionel
Rappelle le fonctionnement de React : props → render → markup
→ Debugging aisé→ Architecture propre
© Copyright Zenika 3 6
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
Redux
© Copyright Zenika 3 8
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
Ce qu'il faut retenir
→ Un modèle en adéquation avec React→ Un écosystème (enfin) stable→ Developer eXperience
© Copyright Zenika 3 10
Mais aussi...
4
Sommaire
React
Performances
Flux
Mais aussi...
© Copyright Zenika 4 1
Testabilité
Framework de test créé par la team React: JestAutomock: tests réellement unitaires avec un minimum de boilerplateRemplace à lui seul la stack classique :
Karma,
Jasmine / Mocha
PhantomJS
Sinon
Utilise JSDom pour le rendu DOM
© Copyright Zenika 4 2
Jest
jest.unmock('../CheckboxWithLabel');
import React from 'react';import ReactDOM from 'react-dom';import TestUtils from 'react-addons-test-utils';import CheckboxWithLabel from '../CheckboxWithLabel';
describe('CheckboxWithLabel', () => { it('changes the text after click', () => { const checkbox = TestUtils.renderIntoDocument(<CheckboxWithLabel labelOn="On" labelOff="Off" />);
const checkboxNode = ReactDOM.findDOMNode(checkbox);
// Verify that it's Off by default expect(checkboxNode.textContent).toEqual('Off');
// Simulate a click and verify that it is now On 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';
let markup = renderToString(<MyRootComponent />);
Coté client, React s'exécute et compare le markup existant avec celui qu'on veutafficher
© Copyright Zenika 4 4
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)
const store = createStore(reducer, initialState)
© Copyright Zenika 4 5
React Native
Le pari de Facebook: Qu'un développeur React puisse développer des applicationsmobiles
render() { let {movie} = this.props; return ( <View> <Text>{movie.title}</Text> <Text>{movie.year}</Text> <Image source={{uri: movie.posters.thumbnail}} /> </View> );}
© Copyright Zenika 4 6
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 dechaque plateforme
© Copyright Zenika 4 7
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 vsMobile)
© Copyright Zenika 4 8
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
Merci !
© Copyright Zenika 4 10