Reactive Programming et React

http://www.meetup.com/fr-FR/ReactJS-Paris/

Transcript

1. Reactive Programming and React @fdecampredon ReactJS Paris - 18/02/2016
2. Qu’est-ce que la Reactive programming ?
3. Qu’est-ce que la Reactive programming ? Réactif ?
4. React !== Reactive Programming
5. Qu’est-ce que la Reactive programming ?
6. Un peu compliqué …
7. « In the Interactive pattern, module X defines which other modules X affects. In the Reactive pattern, module X defines which other modules affect X.» André Staltz @andrestaltz
8. Interactive vs Reactive Interactive Reactive
9. Dans la programmation interactive, on expose les modules de notre application « into the wild »
10. Reactive programming avec RxJS
11. RxJS • Observable • Operators • Scheduler
12. Observable « Pushed Based Collection »
13. « The idea of futures value — Maybe » Paul Taylor @trxcllnt
14. Observable SINGLE MULTIPLE PULL Value Array<Value> PUSH Promise<Value> Observable<Value>
15. Observable Une « Promise » qui « push » de multiples values
16. « Observable is a function that, when invoked, returns 0 - ∞ values between now and the end of times » Paul Taylor @trxcllnt
17. Operators Transforme notre « Push based collection »
18. Operators Transforme notre « push based collection » comme on transforme un array
19. Operators
20. « A scheduler controls when a subscription starts and when notifications are published » RxJS Doc Schedulers
21. Schedulers Contrôle quand les valeurs sont « pushed »
22. Tout peut devenir un Observable ! Dom events Http request
23. Back to React
24. Events management avec React
25. A simple React component : What’s happening ? User click on the button `onButtonClick` handler State update Re-rendering
26. Angular version User click on the button `onButtonClick` handler State update Re-rendering What’s happening ?
27. Backbone version : User click on the button `onButtonClick` handler State update Re-rendering What’s happening ?
28. It’s all the same
29. C’est parce que c’est simple !
30. A naive drag implementation
31. Vraiment ?
32. Problèmes… • Logique fragmentée • Des états intermédiaires de partout • La Relation entre l’état du composant et les « user inputs » n’est pas explicite.
33. RxJS + React = <3
34. Drag with RxJS State
35. • Cohérent: Toute la logique au même endroit • Les états intermédiaires deviennent implicites • On exprime de manière claire la relation entre l’état du composant et les « user inputs » Avantages
36. React + RxJS à la mano
37. Ca marche, mais c’est un peu verbeux …
38. rx-react A collection of helpers for working with React and RxJS
39. rx-react: • « FuncSubject »: Callable subject • « StateStreamMixin »: Bind l’état d’un component au valeur « pushed » par un Observable • And more …
40. « FuncSubject »: Callable Subject • Un Sujet et une Fonction • Invoquer la function == invoquer la méthode « onNext » • Utilisé comme Event handler, méthode de lifecycle, référence…
41. « StateStreamMixin » Bind l’état d’un composant 
 à un observable • Quand le composant est « monté » la méthode `getStateStream`est appelée • Chaque fois que l’observable push une valeur l’état est mis à jour • La Subscription est automatiquement nettoyée quand le composant est « unmounted »
42. rx-react with ES6 class • RxReact.Component implemente le `StateStreamMixin` (entre autre …) • Malheureusement basé sur l’héritage :/
43. react-rx-component by Andrew Clark @acdlite « Create smart components using RxJS observables »
44. react-rx-component • Un Higher order « smart » component implémente la logique • Un « dumb » component transforme les props en virtual dom
45. Let’s Flux
46. Classic flux store : • Le dispatcher « push » des actions dans le temps • Les Stores agrégent les actions et « push » les résultats intermédiaires • Ça vous dit quelque chose ?
47. Et si Flux n’était qu’une association d’Observable ?
48. Flux store as observable • le dispatcher est un observable • Une store n’est que le résultat d’une opération « scan » sur le dispatcher • Lest composants peuvent bind leurs états aux stores.
49. • React n’est pas …. Réactif :D • La « Reactive programming » c’est simple ! (Ou presque) • RxJS + React = <3 Conclusion
50. François de Campredon @fdecampredon https://github.com/fdecampredon/ Questions ? rx-react: https://github.com/fdecampredon/rx-react/ react-rx-component: https://github.com/acdlite/react-rx-component/ RxJS: https://github.com/Reactive-Extensions/RxJS