Reactive Programming, Rx.js & React

In this talk, I go through the idea of using Rx.js & React.

Presented at React Sydney
May 3rd, 2021

Transcript

1. testfully.io Reactive Programming + RxJS + React = Or how did I build a relatively complex React app without using Redux! Matt Valley Software Engineer, Founder of testfully.io matt@testfully.io @mattvalleycodes Presented at React Sydney meetup, May 3rd 2021 This is Teddy! - - - - > Icons by fl aticon.com
2. testfully.io Interact with back-ends Communicate within the app Manage State Navigation Handle Errors Business Logic The User Interface Typical Front-end application Icons by fl aticon.com
3. testfully.io Project Requirements Integrate with socket-based & HTTP-based backends Minimum number of open source Dependencies Maximise usage of core React features Separation of concerns, 
 Use React for UI only. Deep Links & Url-based State management Inter-component data- 
 sharing & communication Can be used by both React & vanilla Javascript Easy Unit Testing Decentralised state management Real-time UI updates Icons by fl aticon.com
4. testfully.io A programming model structured around asynchronous data streams. Reactive Programming A model of working with the asynchronous data streams. Observer Pattern An API for asynchronous programming with observable streams. ReactiveX ReactiveX in Javascript. RxJS Reactive Programming 101 Icons by fl aticon.com
5. Observables testfully.io Observables can complete at some point which means there won’t be any new data coming anymore. Complete They can error and when it happens the Stream ends, there won’t be any more data. Error Consumers receive data asynchronously, as soon as it becomes available to observer. Asynchronous Icons by fl aticon.com
6. testfully.io Create new observables by combining exiting observables. Combine Observables Just like Array.map or Array. fi lter but way more powerful with a lot more options. Transform Observables Subscribe to observables and receive data as soon as it becomes available. Subscribe Create asynchronous data streams from di ff erent sources. Create Observables RxJS Icons by fl aticon.com
7. testfully.io Create Rx.js observables from Props & use them like any other observables Observe Props Transform incoming data to props and actions. Handle side e ff ects with ease. Transform incoming data Communicate with UI using callbacks, transformed to observables. Callback props as observable Subscribe as soon as the component mounts. Unsubscribe upon unmount. Auto subscribe & Unsubscribe Transform incoming data to React components, Render them straight away! Observables to components Refract Icons by fl aticon.com
8. Let’s build a counter app together! testfully.io Icons by fl aticon.com
9. <Counter /> component testfully.io Icons by fl aticon.com
10. <CounterE ff ects /> component testfully.io Icons by fl aticon.com
11. testfully.io You can do more than data fetching with it. State management, real-time collaboration and Inter-component communication are just a few ways to use Observables. Observables Simple yet very powerful What have I learned so far? Prepared to be frustrated with RxJS. 
 Apparently the steep learning curve is 
 one main reason why people don’t get 
 close to it. RxJS Steep learning curve, very steep! React is all about data to UI. Observables are all about streams of data. Refract glues the two together very well. Reactive Programming & React A match made in haven Working with observables is all about composition of observables which happens via operators. 
 Mastering operators is key to successfully using RP. Master RxJS Operators Key to success Icons by fl aticon.com
12. testfully.io Shameless Plug! Icons by fl aticon.com Sign up today for free! testfully.io matt@testfully.io @testfullyio
13. testfully.io Thank you! testfully.io Matt Valley Software Engineer, Founder of testfully.io matt@testfully.io @mattvalleycodes Teddy The cavoodle @teddy.bear.cavoodle Sign up today for free! Icons by fl aticon.com