Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Reactive Programming et React

fdecampredon
February 18, 2016

Reactive Programming et React

fdecampredon

February 18, 2016
Tweet

More Decks by fdecampredon

Other Decks in Technology

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