Reactive Programming et React

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