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

    View full-size slide

  2. Qu’est-ce que la
    Reactive programming ?

    View full-size slide

  3. Qu’est-ce que la Reactive programming ?
    Réactif ?

    View full-size slide

  4. React !== Reactive Programming

    View full-size slide

  5. Qu’est-ce que la Reactive programming ?

    View full-size slide

  6. Un peu compliqué …

    View full-size slide

  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

    View full-size slide

  8. Interactive vs Reactive
    Interactive Reactive

    View full-size slide

  9. Dans la programmation interactive, on expose les
    modules de notre application « into the wild »

    View full-size slide

  10. Reactive programming
    avec RxJS

    View full-size slide

  11. RxJS
    • Observable
    • Operators
    • Scheduler

    View full-size slide

  12. Observable
    « Pushed Based Collection »

    View full-size slide

  13. « The idea of futures
    value — Maybe »
    Paul Taylor @trxcllnt

    View full-size slide

  14. Observable
    SINGLE MULTIPLE
    PULL Value Array
    PUSH Promise Observable

    View full-size slide

  15. Observable
    Une « Promise » qui « push » de multiples values

    View full-size slide

  16. « Observable is a function that,
    when invoked, returns 0 - ∞ values
    between now and the end of times »
    Paul Taylor @trxcllnt

    View full-size slide

  17. Operators
    Transforme notre
    « Push based collection »

    View full-size slide

  18. Operators
    Transforme notre « push based collection »
    comme on transforme un array

    View full-size slide

  19. « A scheduler controls when a
    subscription starts and when
    notifications are published »
    RxJS Doc
    Schedulers

    View full-size slide

  20. Schedulers
    Contrôle quand les valeurs sont « pushed »

    View full-size slide

  21. Tout peut devenir un Observable !
    Dom events Http request

    View full-size slide

  22. Back to React

    View full-size slide

  23. Events management
    avec React

    View full-size slide

  24. A simple React component :
    What’s happening ?
    User click on the button
    `onButtonClick` handler
    State update
    Re-rendering

    View full-size slide

  25. Angular version
    User click on the button
    `onButtonClick` handler
    State update
    Re-rendering
    What’s happening ?

    View full-size slide

  26. Backbone version :
    User click on the button
    `onButtonClick` handler
    State update
    Re-rendering
    What’s happening ?

    View full-size slide

  27. It’s all the same

    View full-size slide

  28. C’est parce que c’est
    simple !

    View full-size slide

  29. A naive drag implementation

    View full-size slide

  30. 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.

    View full-size slide

  31. RxJS + React = <3

    View full-size slide

  32. Drag with RxJS
    State

    View full-size slide

  33. • 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

    View full-size slide

  34. React + RxJS à la mano

    View full-size slide

  35. Ca marche, mais c’est un peu
    verbeux …

    View full-size slide

  36. rx-react
    A collection of helpers for
    working with React and RxJS

    View full-size slide

  37. rx-react:
    • « FuncSubject »: Callable subject

    • « StateStreamMixin »: Bind l’état d’un component au
    valeur « pushed » par un Observable

    • And more …

    View full-size slide

  38. « 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…

    View full-size slide

  39. « 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 »

    View full-size slide

  40. rx-react with ES6 class
    • RxReact.Component implemente le
    `StateStreamMixin` (entre autre …)

    • Malheureusement basé sur
    l’héritage :/

    View full-size slide

  41. react-rx-component
    by Andrew Clark @acdlite
    « Create smart components
    using RxJS observables »

    View full-size slide

  42. react-rx-component
    • Un Higher order « smart »
    component implémente la logique

    • Un « dumb » component
    transforme les props en virtual
    dom

    View full-size slide

  43. Let’s Flux

    View full-size slide

  44. 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 ?

    View full-size slide

  45. Et si Flux n’était qu’une
    association d’Observable ?

    View full-size slide

  46. 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.

    View full-size slide

  47. • React n’est pas …. Réactif :D

    • La « Reactive programming »
    c’est simple ! (Ou presque)

    • RxJS + React = <3
    Conclusion

    View full-size slide

  48. 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

    View full-size slide