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

Open­sourcé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/component­api.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 re­rendu 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 re­rendu (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/virtual­dom­optim­demo/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: JestAuto­mock: 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 grand­public.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 plate­forme

© 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 code­reuse (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