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
  2. 1. React Changes Everything 2. What about Event Management ?

    3. Event management with RxJS 4. React + RxJS 5. Other fields of Application Plan
  3. A simple React component : What’s happening ? User click

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

    State update Re-rendering What’s happening ?
  5. Problems… • Fragmented logic • Intermediate state hell • Relationship

    between user input and Component state is not clearly established
  6. 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.
  7. • Coherence: all the logic at the same place •

    Implicit intermediate state • Express the relationship between state and user input in a declarative way Advantages
  8. rx-react: • « FuncSubject »: Callable subject • « StateStreamMixin

    »: Bind component state to an observable • And more …
  9. « 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.
  10. « 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
  11. react-rx-component • Higher order « smart » component implement the

    logic • « dumb » component merely return elements for given props
  12. Pre-computation of events • Simple slider component • Designed to

    be a « controlled » component • We implement the « onChange »
 Event without any state
  13. Classic flux store : • Dispatcher « push » actions

    over time • Store aggregate actions and « push » intermediate results • Does it reminds you something ?
  14. 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
  15. 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
  16. • React changes Everything • But not Event Management •

    We can do better ! • RxJS + React: perfect match Summary
  17. 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/