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

Reactive Programming et React

81348eb8214d6478bbdcdc5a1698bdd4?s=47 fdecampredon
February 18, 2016

Reactive Programming et React

81348eb8214d6478bbdcdc5a1698bdd4?s=128

fdecampredon

February 18, 2016
Tweet

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