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, m...
#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 render
dé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 ...
#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 ...
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 csa
profi...
position de
lecture
programme
courant
décalage live
liste des
chaines
chaine
courante
liste des
programmes
rating csa
profi...
position de
lecture
programme
courant
décalage live
liste des
chaines
chaine
courante
liste des
programmes
rating csa
profi...
13h30 14h30 15h30 10h15
BBT
JT
Scandal
M6 Boutique
Scène de ménage
Zone Interdite
Canal+ M6
position
chaine
programmes
+
+...
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, R...
Quand les utiliser ?
(en frontend)
Dès que l’on fait du code asynchrone (tout le temps ?):
• Animations
• XHR / HTTP / Web...
• Encapsuler les états de votre applications qui sont
des valeurs qui changent au cours du temps
• Fournis les opérateurs ...
• Map
• Reduce
• Filter
• Zip
• Merge
• Concat
• FlatMap
• Take
• Skip
• …
• Delay
• Buffer
• Debounce
• Throttle
• …
Démo
[Meet-Up] ReactJS & Reactive Programming
[Meet-Up] ReactJS & Reactive Programming
[Meet-Up] ReactJS & Reactive Programming
[Meet-Up] ReactJS & Reactive Programming
[Meet-Up] ReactJS & Reactive Programming
Prochain SlideShare
Chargement dans…5
×

[Meet-Up] ReactJS & Reactive Programming

597 vues

Publié le

Meet-Up Vivendi autour de ReactJS et le Reactive Programming.

Profitez de la vidéo sur DailyMotion : http://www.dailymotion.com/video/x39v709

MyBestPro accueille les développeurs du groupe Vivendi pour un premier événement autour de technologies innovantes, avec pour invitée la Direction de l'Innovation de Canal+.

En première partie, une présentation de ReactJS, une librairie Javascript open-sourcée par Facebook, animé par Alexandre Duros. En seconde partie, un focus sur le Reactive Programming présenté par Pierre Guilleminot.

Retrouvez Alexandre (https://twitter.com/alxndredrs) et Pierre (https://twitter.com/jinr0h) sur Twitter, ainsi que les nouvelles de la communauté des dev' de Canal+ (https://twitter.com/plusdedev) !

Abonnez-vous à notre chaîne pour plus de meet-up, plus de news, bref plus de dev!

Publié dans : Ingénierie
0 commentaire
3 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
597
Sur SlideShare
0
Issues des intégrations
0
Intégrations
12
Actions
Partages
0
Téléchargements
14
Commentaires
0
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

[Meet-Up] ReactJS & Reactive Programming

  1. 1. React(ive) Dive into the one-player architecture Pierre Guilleminot @jinroh Alexandre Duros @alexduros
  2. 2. React(ive)
  3. 3. React(ive) “C’est comme Angular ?”
  4. 4. React(ive) “C’est mieux que Backbone ?” “C’est comme Angular ?”
  5. 5. React(ive) “C’est comme Angular ?” “C’est mieux que Backbone ?” “Est-ce que ça marche avec jQuery ?”
  6. 6. React(ive) “C’est comme Angular ?” “C’est mieux que Backbone ?” “Est-ce que ça marche avec jQuery ?”
  7. 7. #1 Ceci n’est pas un framework
  8. 8. ● 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
  9. 9. #2 Tout n’est que <Composant/>
  10. 10. ● facile à réutiliser ● vit sa vie indépendamment (lifecycle) ● testable #2 Tout n’est que <Composant/>
  11. 11. #3 Tout est dans le render
  12. 12. #3 Tout est dans le render
  13. 13. #3 Tout est dans le render déclaratif JSX friendly = templating
  14. 14. #4 Et un composant, c’est composable
  15. 15. #5 Virtual DOM
  16. 16. #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
  17. 17. #6 Immutabilité des props
  18. 18. ● Transmises par le parent ● Immutables ● Accessibles via this.props #6 Immutabilité des props
  19. 19. #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
  20. 20. Credits ● Reactjs and why it’s awesome by Andrew Hull ● React.js conf 2015 playlist by Facebook Developers
  21. 21. Un peu de théorie… juste un peu
  22. 22. f(State) → <UI/> React = fonction pure de projection d’un état vers une interface
  23. 23. f(StateA) → <UIA/> f(StateB) → <UIB/> f(StateC) → <UIC/>
  24. 24. StateA StateB StateC <UIA/> <UIB/> <UIC/> render render render
  25. 25. position de lecture programme courant décalage live liste des chaines chaine courante liste des programmes rating csa profile utilisateur
  26. 26. position de lecture programme courant décalage live liste des chaines chaine courante liste des programmes rating csa profile utilisateur
  27. 27. position de lecture programme courant décalage live liste des chaines chaine courante liste des programmes rating csa profile utilisateur
  28. 28. 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
  29. 29. Quelle est la différence entre un tableau et des événements ?
  30. 30. map, filter, reduce, concat, uniq, drop, (et plus encore) sur des événements ? Events = Collection + Temps
  31. 31. Observables • TC39 proposal pour ajout dans ES2016 (ES7) • Support natif dans React, Angular2 et Ember • Existe en Java, Rust, …pick your language
  32. 32. 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
  33. 33. • 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)
  34. 34. • Map • Reduce • Filter • Zip • Merge • Concat • FlatMap • Take • Skip • … • Delay • Buffer • Debounce • Throttle • …
  35. 35. Démo

×