From zero to hero with the Reactive extensions for JavaScript · Reactive programming is very...
Transcript of From zero to hero with the Reactive extensions for JavaScript · Reactive programming is very...
![Page 1: From zero to hero with the Reactive extensions for JavaScript · Reactive programming is very powerful. Compose multiple asynchronous data streams. Transform streams using operators](https://reader031.fdocuments.net/reader031/viewer/2022040516/5e75764cfc10f72e48663e27/html5/thumbnails/1.jpg)
From zero to hero with the Reactive Extensions for JavaScriptMaurice de Beijer
@mauricedb
![Page 2: From zero to hero with the Reactive extensions for JavaScript · Reactive programming is very powerful. Compose multiple asynchronous data streams. Transform streams using operators](https://reader031.fdocuments.net/reader031/viewer/2022040516/5e75764cfc10f72e48663e27/html5/thumbnails/2.jpg)
Who am I?
Maurice de Beijer
The Problem Solver
Microsoft Azure MVP
Freelance developer/instructor
Twitter: @mauricedb and @React_Tutorial
Web: http://www.TheProblemSolver.nl
E-mail: [email protected]
2
![Page 4: From zero to hero with the Reactive extensions for JavaScript · Reactive programming is very powerful. Compose multiple asynchronous data streams. Transform streams using operators](https://reader031.fdocuments.net/reader031/viewer/2022040516/5e75764cfc10f72e48663e27/html5/thumbnails/4.jpg)
Topics
What is RxJS?
Why use it?
How to create observables.
Using operators with observables.
![Page 9: From zero to hero with the Reactive extensions for JavaScript · Reactive programming is very powerful. Compose multiple asynchronous data streams. Transform streams using operators](https://reader031.fdocuments.net/reader031/viewer/2022040516/5e75764cfc10f72e48663e27/html5/thumbnails/9.jpg)
Why?
Reactive programming. Programming with asynchronous data streams.
Most actions are not standalone occurrences. Example: A mouse click triggers an Ajax request which triggers a UI
update.
RxJS composes these streams in a functional style.
![Page 10: From zero to hero with the Reactive extensions for JavaScript · Reactive programming is very powerful. Compose multiple asynchronous data streams. Transform streams using operators](https://reader031.fdocuments.net/reader031/viewer/2022040516/5e75764cfc10f72e48663e27/html5/thumbnails/10.jpg)
Filtering data
![Page 11: From zero to hero with the Reactive extensions for JavaScript · Reactive programming is very powerful. Compose multiple asynchronous data streams. Transform streams using operators](https://reader031.fdocuments.net/reader031/viewer/2022040516/5e75764cfc10f72e48663e27/html5/thumbnails/11.jpg)
With array functions
![Page 12: From zero to hero with the Reactive extensions for JavaScript · Reactive programming is very powerful. Compose multiple asynchronous data streams. Transform streams using operators](https://reader031.fdocuments.net/reader031/viewer/2022040516/5e75764cfc10f72e48663e27/html5/thumbnails/12.jpg)
With RxJS
![Page 13: From zero to hero with the Reactive extensions for JavaScript · Reactive programming is very powerful. Compose multiple asynchronous data streams. Transform streams using operators](https://reader031.fdocuments.net/reader031/viewer/2022040516/5e75764cfc10f72e48663e27/html5/thumbnails/13.jpg)
Fetching data
![Page 14: From zero to hero with the Reactive extensions for JavaScript · Reactive programming is very powerful. Compose multiple asynchronous data streams. Transform streams using operators](https://reader031.fdocuments.net/reader031/viewer/2022040516/5e75764cfc10f72e48663e27/html5/thumbnails/14.jpg)
With promises
![Page 15: From zero to hero with the Reactive extensions for JavaScript · Reactive programming is very powerful. Compose multiple asynchronous data streams. Transform streams using operators](https://reader031.fdocuments.net/reader031/viewer/2022040516/5e75764cfc10f72e48663e27/html5/thumbnails/15.jpg)
With RxJS
![Page 16: From zero to hero with the Reactive extensions for JavaScript · Reactive programming is very powerful. Compose multiple asynchronous data streams. Transform streams using operators](https://reader031.fdocuments.net/reader031/viewer/2022040516/5e75764cfc10f72e48663e27/html5/thumbnails/16.jpg)
Asynchronous data
![Page 17: From zero to hero with the Reactive extensions for JavaScript · Reactive programming is very powerful. Compose multiple asynchronous data streams. Transform streams using operators](https://reader031.fdocuments.net/reader031/viewer/2022040516/5e75764cfc10f72e48663e27/html5/thumbnails/17.jpg)
With imperative code
![Page 18: From zero to hero with the Reactive extensions for JavaScript · Reactive programming is very powerful. Compose multiple asynchronous data streams. Transform streams using operators](https://reader031.fdocuments.net/reader031/viewer/2022040516/5e75764cfc10f72e48663e27/html5/thumbnails/18.jpg)
With RxJS
![Page 19: From zero to hero with the Reactive extensions for JavaScript · Reactive programming is very powerful. Compose multiple asynchronous data streams. Transform streams using operators](https://reader031.fdocuments.net/reader031/viewer/2022040516/5e75764cfc10f72e48663e27/html5/thumbnails/19.jpg)
The RxJSObservable
An Observable is the object that emits a stream of event. The observer is the code that subscribes to the event stream.
![Page 20: From zero to hero with the Reactive extensions for JavaScript · Reactive programming is very powerful. Compose multiple asynchronous data streams. Transform streams using operators](https://reader031.fdocuments.net/reader031/viewer/2022040516/5e75764cfc10f72e48663e27/html5/thumbnails/20.jpg)
A simple clock
![Page 21: From zero to hero with the Reactive extensions for JavaScript · Reactive programming is very powerful. Compose multiple asynchronous data streams. Transform streams using operators](https://reader031.fdocuments.net/reader031/viewer/2022040516/5e75764cfc10f72e48663e27/html5/thumbnails/21.jpg)
Unsubscribing
![Page 22: From zero to hero with the Reactive extensions for JavaScript · Reactive programming is very powerful. Compose multiple asynchronous data streams. Transform streams using operators](https://reader031.fdocuments.net/reader031/viewer/2022040516/5e75764cfc10f72e48663e27/html5/thumbnails/22.jpg)
Creating observables
![Page 23: From zero to hero with the Reactive extensions for JavaScript · Reactive programming is very powerful. Compose multiple asynchronous data streams. Transform streams using operators](https://reader031.fdocuments.net/reader031/viewer/2022040516/5e75764cfc10f72e48663e27/html5/thumbnails/23.jpg)
RxJS operators
Operators are used to operate on the event stream between the source and the subscriber.
There are many operators for all sorts of purposes: Transforming
Filtering
Combining
Error handling
Aggregate
…
![Page 25: From zero to hero with the Reactive extensions for JavaScript · Reactive programming is very powerful. Compose multiple asynchronous data streams. Transform streams using operators](https://reader031.fdocuments.net/reader031/viewer/2022040516/5e75764cfc10f72e48663e27/html5/thumbnails/25.jpg)
Events
![Page 26: From zero to hero with the Reactive extensions for JavaScript · Reactive programming is very powerful. Compose multiple asynchronous data streams. Transform streams using operators](https://reader031.fdocuments.net/reader031/viewer/2022040516/5e75764cfc10f72e48663e27/html5/thumbnails/26.jpg)
Ajax
![Page 27: From zero to hero with the Reactive extensions for JavaScript · Reactive programming is very powerful. Compose multiple asynchronous data streams. Transform streams using operators](https://reader031.fdocuments.net/reader031/viewer/2022040516/5e75764cfc10f72e48663e27/html5/thumbnails/27.jpg)
Retry failed requests
![Page 28: From zero to hero with the Reactive extensions for JavaScript · Reactive programming is very powerful. Compose multiple asynchronous data streams. Transform streams using operators](https://reader031.fdocuments.net/reader031/viewer/2022040516/5e75764cfc10f72e48663e27/html5/thumbnails/28.jpg)
Retry with backing off
![Page 29: From zero to hero with the Reactive extensions for JavaScript · Reactive programming is very powerful. Compose multiple asynchronous data streams. Transform streams using operators](https://reader031.fdocuments.net/reader031/viewer/2022040516/5e75764cfc10f72e48663e27/html5/thumbnails/29.jpg)
Combining streams
Streams can be combined in may ways: Switching
Combine
Merging
Zip
…
![Page 30: From zero to hero with the Reactive extensions for JavaScript · Reactive programming is very powerful. Compose multiple asynchronous data streams. Transform streams using operators](https://reader031.fdocuments.net/reader031/viewer/2022040516/5e75764cfc10f72e48663e27/html5/thumbnails/30.jpg)
Merge Example
![Page 31: From zero to hero with the Reactive extensions for JavaScript · Reactive programming is very powerful. Compose multiple asynchronous data streams. Transform streams using operators](https://reader031.fdocuments.net/reader031/viewer/2022040516/5e75764cfc10f72e48663e27/html5/thumbnails/31.jpg)
Conclusion
Reactive programming is very powerful.
Compose multiple asynchronous data streams.
Transform streams using operators as needed.
Retry failures.
Cancel subscriptions as needed.
![Page 32: From zero to hero with the Reactive extensions for JavaScript · Reactive programming is very powerful. Compose multiple asynchronous data streams. Transform streams using operators](https://reader031.fdocuments.net/reader031/viewer/2022040516/5e75764cfc10f72e48663e27/html5/thumbnails/32.jpg)
Thank you
Maurice de Beijer - @mauricedb