[Meet-Up] ReactJS & Reactive Programming

456 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
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
456
Sur SlideShare
0
Issues des intégrations
0
Intégrations
13
Actions
Partages
0
Téléchargements
10
Commentaires
0
J’aime
2
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

×