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!

1. React(ive)
Dive into the one-player architecture
Pierre Guilleminot
@jinroh
Alexandre Duros
@alexduros

4. React(ive)

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

6. React(ive)
“C’est mieux que Backbone ?”
“C’est comme Angular ?”

7. React(ive)
“C’est comme Angular ?”
“C’est mieux que Backbone ?”
“Est-ce que ça marche avec
jQuery ?”

8. React(ive)
“C’est comme Angular ?”
“C’est mieux que Backbone ?”
“Est-ce que ça marche avec
jQuery ?”

9. #1 Ceci n’est pas un framework

10. ● 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

11. #2 Tout n’est que <Composant/>

15. ● facile à réutiliser
● vit sa vie indépendamment (lifecycle)
● testable
#2 Tout n’est que <Composant/>

16. #3 Tout est dans le render

17. #3 Tout est dans le render

18. #3 Tout est dans le render
déclaratif
JSX friendly = templating

19. #4 Et un composant, c’est composable

20. #5 Virtual DOM

21. #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

22. #6 Immutabilité des props

23. ● Transmises par le parent
● Immutables
● Accessibles via this.props
#6 Immutabilité des props

24. #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

25. Credits
● Reactjs and why it’s awesome by Andrew Hull
● React.js conf 2015 playlist by Facebook Developers

26. Un peu de théorie…
juste un peu

27. f(State) → <UI/>
React =
fonction pure de projection d’un état vers une interface

28. f(StateA) → <UIA/>
f(StateB) → <UIB/>
f(StateC) → <UIC/>

29. StateA StateB StateC
<UIA/> <UIB/> <UIC/>
render render render

30. position de
lecture
programme
courant
décalage live
liste des
chaines
chaine
courante
liste des
programmes
rating csa
profile
utilisateur

31. position de
lecture
programme
courant
décalage live
liste des
chaines
chaine
courante
liste des
programmes
rating csa
profile
utilisateur

32. position de
lecture
programme
courant
décalage live
liste des
chaines
chaine
courante
liste des
programmes
rating csa
profile
utilisateur

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

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

35. map, filter, reduce, concat, uniq, drop,
(et plus encore)
sur des événements ?
Events = Collection + Temps

36. Observables
• TC39 proposal pour ajout dans ES2016 (ES7)
• Support natif dans React, Angular2 et Ember
• Existe en Java, Rust, …pick your language

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

38. • 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)

39. • Map
• Reduce
• Filter
• Zip
• Merge
• Concat
• FlatMap
• Take
• Skip
• …
• Delay
• Buffer
• Debounce
• Throttle
• …

40. Démo