testfully.io Reactive Programming in React with RxJS Behind the scenes of building testfully.io using React and RxJS Matt Valley Software Engineer, Founder of testfully.io [email protected] @mattvalleycodes Presented at Brisbane Javascript meetup / June 7th, 2021 Icons by fl aticon.com Available for work! 

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 

testfully.io Icons by fl aticon.com Testfully.io API Test Automation & Monitoring solution 

testfully.io Icons by fl aticon.com Works for engineers, Dev Ops and 
 Software testers No Coding Required Use same tests to verify local, staging and Production APIs without any change. Test local & deployed APIs Your tests are available to all of Your team members. Cloud-based solution Monitor running APIs using all or some of your test cases. Test & Monitor Run your test cases as part of your CI/CD Process Integrates with your CI/CD You can run tests via our CLI as well Run tests via UI or CLI Forget about coding and maintaining tests yourself, focus on your product. Save time & money Leverage Testfully to full potential without paying a cent. Generous free plan We’re also software engineers :) Made by developers Testfully.io API Test Automation & Monitoring solution 

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 

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 

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 

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 

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 

Let’s build a counter app together! testfully.io Icons by fl aticon.com 

testfully.io Icons by fl aticon.com Counter app using React 

testfully.io Icons by fl aticon.com Counter app using React & Redux 

testfully.io Icons by fl aticon.com Counter app without any state 

testfully.io Icons by fl aticon.com State for the Counter app using RxJS 

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 

testfully.io Thank you! Icons by fl aticon.com Matt Valley Software Engineer, Founder of testfully.io [email protected] @mattvalleycodes Available for work! Sign up today! testfully.io [email protected] @testfullyio