React(ive) Dive into the one-player architecture

Pierre Guilleminot @jinroh

Alexandre Duros @alexduros

React(ive)

React(ive)“C’est comme Angular ?”

React(ive)“C’est mieux que Backbone ?”

“C’est comme Angular ?”

React(ive)“C’est comme Angular ?”

“C’est mieux que Backbone ?”

“Est-ce que ça marche avec jQuery ?”

React(ive)“C’est comme Angular ?”

“C’est mieux que Backbone ?”

“Est-ce que ça marche avec jQuery ?”

#1 Ceci n’est pas un framework

● Librairie javascript permettant de

construire des interfaces utilisateurs

● Pas de notions de contrôleurs,

directives, modèles, etc.

● On ne parle que de la vue

#2 Tout n’est que <Composant/>

● facile à réutiliser

● vit sa vie indépendamment (lifecycle)

● testable

#2 Tout n’est que <Composant/>

#3 Tout est dans le render

#3 Tout est dans le render

#3 Tout est dans le renderdéclaratif

JSX friendly = templating

#4 Et un composant, c’est composable

#5 Virtual DOM

#5 Virtual DOM

● Plus léger car ne contient que les

informations nécessaires

● Permet une représentation dans un

contexte headless

● Rendu optimisé

● Testable

#6 Immutabilité des props

● Transmises par le parent

● Immutables

● Accessibles via this.props

#6 Immutabilité des props

#7 Mutabilité du state

state render

● state mise à jour via setState

● déclenche un render du virtual DOM

● acessible via this.state peut être transmis

par les props

● transmission unidirectionnel des changements

Credits● Reactjs and why it’s awesome by Andrew Hull

● React.js conf 2015 playlist by Facebook Developers

Un peu de théorie…juste un peu

f(State) → <UI/>React =

fonction pure de projection d’un état vers une interface

f(StateA) → <UIA/>

f(StateB) → <UIB/>

f(StateC) → <UIC/>

StateA StateB StateC

<UIA/> <UIB/> <UIC/>

render render render

position de lecture

programme courant

décalage live

liste des chaines

chaine courante

liste des programmes

rating csaprofile

utilisateur

position de lecture

programme courant

décalage live

liste des chaines

chaine courante

liste des programmes

rating csaprofile

utilisateur

position de lecture

programme courant

décalage live

liste des chaines

chaine courante

liste des programmes

rating csaprofile

utilisateur

13h30 14h30 15h30 10h15

BBT JT Scandal

M6 Boutique Scène de ménage Zone Interdite

Canal+ M6

position

chaine

programmes

+

+

=

BBT M6 BoutiqueLE programme JT Scandal

Quelle est la différence entre un tableau et des événements ?

map, filter, reduce, concat, uniq, drop, (et plus encore)

sur des événements ?

Events = Collection + Temps

Observables

• TC39 proposal pour ajout dans ES2016 (ES7)

• Support natif dans React, Angular2 et Ember

• Existe en Java, Rust, …pick your language

Quand les utiliser ? (en frontend)

Dès que l’on fait du code asynchrone (tout le temps ?):

• Animations

• XHR / HTTP / WebSocket

• Entrée utilisateur

• Back pressure

• Encapsuler les états de votre applications qui sont des valeurs qui changent au cours du temps

• Fournis les opérateurs fonctionnels pour composer ces valeurs:

Quand les utiliser ? (en frontend)

• Map • Reduce • Filter • Zip • Merge • Concat • FlatMap • Take • Skip • …

• Delay • Buffer • Debounce • Throttle • …

Démo