An introduction to Reactive Programming in React using Rx.js with a simple counter app written in React. I have developed the customer-facing dashboard of testfully.io (API testing & monitoring) using this service.
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!
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
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
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
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
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
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
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
mattvalleycodes
.png){kind=avatar}
yuriko1211
tnagao7
yusukeito
azuki
twada
hollycummins
happymana
memory1994
qnighy
yusukebe
krpk1900
tasshi
destraynor
moore
palkan
cassininazir
cromwellryan
eileencodes
smashingmag
malarkey
iamctodd
tammyeverts
lemiorhan
notwaldorf
