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. « 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
  2. « Observable is a function that, when invoked, returns 0

    - ∞ values between now and the end of times » Paul Taylor @trxcllnt
  3. « A scheduler controls when a subscription starts and when

    notifications are published » RxJS Doc Schedulers
  4. A simple React component : What’s happening ? User click

    on the button `onButtonClick` handler State update Re-rendering
  5. Backbone version : User click on the button `onButtonClick` handler

    State update Re-rendering What’s happening ?
  6. 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.
  7. • 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
  8. rx-react: • « FuncSubject »: Callable subject • « StateStreamMixin

    »: Bind l’état d’un component au valeur « pushed » par un Observable • And more …
  9. « 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…
  10. « 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 »
  11. rx-react with ES6 class • RxReact.Component implemente le `StateStreamMixin` (entre

    autre …) • Malheureusement basé sur l’héritage :/
  12. react-rx-component • Un Higher order « smart » component implémente

    la logique • Un « dumb » component transforme les props en virtual dom
  13. 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 ?
  14. 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.
  15. • React n’est pas …. Réactif :D • La «

    Reactive programming » c’est simple ! (Ou presque) • RxJS + React = <3 Conclusion