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

Going Reactive with React

fdecampredon
November 04, 2015

Going Reactive with React

fdecampredon

November 04, 2015
Tweet

More Decks by fdecampredon

Other Decks in Technology

Transcript

  1. Going Reactive with React
    @fdecampredon

    Full-stack developper at Fadio IT (http://www.fadio.it)

    Reactive2015 conference, November 4th 2015

    View full-size slide

  2. 1. React Changes Everything

    2. What about Event Management ?

    3. Event management with RxJS

    4. React + RxJS

    5. Other fields of Application
    Plan

    View full-size slide

  3. React Changes
    Everything

    View full-size slide

  4. Template => JSX

    View full-size slide

  5. REST => GraphQL

    View full-size slide

  6. CSS => Inline Styles

    View full-size slide

  7. And much more !

    View full-size slide

  8. But what about Event
    Management ?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. Event management has
    not changed so much
    with React

    View full-size slide

  13. Is it fine ?

    View full-size slide

  14. A naive drag implementation

    View full-size slide

  15. Problems…
    • Fragmented logic

    • Intermediate state hell

    • Relationship between user input and Component
    state is not clearly established

    View full-size slide

  16. Can we do better ?

    View full-size slide

  17. RxJS to the rescue !

    View full-size slide

  18. RxJS: Reactive Extensions for JavaScript
    • Observable: Push based Collection

    • Operators: Array like operators (map, filter, flatMap,
    etc …)

    • Scheduler: Controls when a subscription starts and
    when notifications are published.

    View full-size slide

  19. Counter component with RxJS
    State

    View full-size slide

  20. Drag with RxJS
    State

    View full-size slide

  21. • Coherence: all the logic at the same place

    • Implicit intermediate state

    • Express the relationship between state and user input
    in a declarative way
    Advantages

    View full-size slide

  22. React + RxJS:
    How to

    View full-size slide

  23. Fine but a little
    verbose

    View full-size slide

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

    View full-size slide

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

    • « StateStreamMixin »: Bind component state to an
    observable

    • And more …

    View full-size slide

  26. « FuncSubject »: Callable Subject
    • Subjects that can be used as
    callback

    • Calling the function is the same
    as calling `onNext`

    • Designed to be event handler or
    lifecycle method.

    View full-size slide

  27. « StateStreamMixin »
    Bind the State of a component to
    an observable

    • On mount the `getStateStream`
    method is called

    • Component state is bound to
    the returned observable

    • Subscription is automatically
    disposed on unmounting

    View full-size slide

  28. rx-react with ES6 class
    • RxReact.Component implements
    the `StateStreamMixin`

    • Need to find a better pattern to
    avoid inheritance

    View full-size slide

  29. react-rx-component
    by @aciditte
    « Create smart components
    using RxJS observables »

    View full-size slide

  30. react-rx-component
    • Higher order « smart »
    component implement the logic

    • « dumb » component merely
    return elements for given props

    View full-size slide

  31. Other fields of application

    View full-size slide

  32. Pre-computation
    of events

    View full-size slide

  33. Pre-computation of events
    • Simple slider component

    • Designed to be a « controlled »
    component

    • We implement the « onChange »

    Event without any state

    View full-size slide

  34. Classic flux store :
    • Dispatcher « push » actions
    over time

    • Store aggregate actions and
    « push » intermediate results

    • Does it reminds you
    something ?

    View full-size slide

  35. Flux store as observable
    • Dispatcher is an observable

    • A store is just the result of the
    « scan » operator applied
    Dispatcher

    • Component can just bind their
    state to the Store observable

    View full-size slide

  36. Animation
    • Define the `stream` of state that will
    control the animation

    • A bit similar to Flash « timeline »

    • Easing function by Paul Taylor:

    https://github.com/trxcllnt/rxjs-easing

    View full-size slide

  37. • React changes Everything

    • But not Event Management

    • We can do better !

    • RxJS + React: perfect match
    Summary

    View full-size slide

  38. François de Campredon - Fadio IT
    @fdecampredon
    https://github.com/fdecampredon/
    Questions ?
    rx-react: https://github.com/fdecampredon/rx-react/
    react-rx-component: https://github.com/acdlite/react-rx-component/

    View full-size slide