This document provides an overview of RxJS, a library for composing asynchronous and event-based programs using observable sequences. It discusses key RxJS concepts like Observables, Observers, Operators, and how to create and use Observables. It also provides learning resources and highlights improvements in RxJS 5 like compliance with the Observable specification and better performance.

2. RxJS 101

3. $ whoami

4. Viliam Elischer
SW Engineer at ZOOM International
github.com/vire
twitter.com/vireliam

5. What you need to know to get started with
RxJS tomorrow

6. Java Scala Kotlin Clojure
JavaScript
C# C++ Swift
Ruby Python Groovy

7. The AsyncoGenesis

8. begin("In the beginning, God created the heavens and the earth",
function(earth) {...})

9. Will there be light as rst callback param at
the end of the tunnel?
tunnel.end("...", function(light) {...})

10. No, there is just callback hell!
findUser(userID, function(userErr, user) {
getProfile(user, function(profileErr ,profile) {
getFriends(profile, function(friendsErr, friends) {
// meh
});
});
});;

11. Don't loose fate developers,
I can see the Promised Land

12. getUserFromAPI(userID)
.then(function(user) {
return getUserProfile(user);
}, ...)
.then(function(userProfile) {
return getFriend(userProfile)
}, ...)
.then(function(friends) {
// meh
}, .../*forever alone*/)
.catch(function(reason) {
// The LORD will protect you from all evil!
});

13. Promises look promising
(+) are immutable
(+) good at caching

14. despite some drawbacks
(­) guaranteed future ­ no cancelation
(­) single value (array of promisses)

15. What is RxJS

16. A Library
for composing asynchronous
and event-based programs
using observable sequences

17. "Lodash for events."

18. "... any amount of events over
any amount of time ..."

19. "Uses the same approach for browser and
backend."

20. Concepts

21. General theory of reactivity

22. Pull based Push based
localesFromLS()
.filter(l => l != null)
.map(l => l.toUpperCase())
.forEach(s => log(`locale:${s}`))
localesFromAPI()
.filter (s => s != null)
.map(s => l.toUpperCase())
.subscribe(s => log(`locale:${s}`))
Article: Duality of IEnumerable/IObservable

23. Iterable<T> and Iterator<T>
interactive computations where the consumer
synchronously pulls data out from the producer

24. Observable<T> and Observer<T>
reactive computations where the producer asynchronously
pushes data to the consumer

25. Observable
abstracts data source that accepts an observer and returns
a subscription
ties a producer to a consumer
is by default lazy, and cold*
provides a mechanism to unsubscribe / teardown
function that takes an Observer
*Demystifying Cold and Hot Observables in RxJS

26. Observer
is a consumer of events propagated by the Observable
.next() method handles pushed values
.error() method handles pushed errors
.complete() method handles that the "stream is over"

27. Subject
is a special type (multicast) Observable
similar to EventEmitter - maintains subscribers
differs from Observables which are by default unicast
Every Subject is an Observable - subscribe
Every Subject is an Observer - next, error, complete
BehaviorSubject, ReplaySubject, and AsyncSubject.

28. Operator
transforms source stream into destination stream
joins subscription
applies a projection function, e.g map()
returns an Observable that subscribes to the source
Observable

29. Operator types
Transforming (map, debounce, delay)
Combining (merge, concat, switch)
Filtering ( lter, nd)
Mathematical (sum, max, avg)
Boolean (every)
Conditional (amb)

30. Observable grammar

31. Grammar violations

32. Parametrized concurrency
Schedulers
advanced topic, but in they responsible for time notion

33. RxJS
= Observables + Operators + Schedulers

34. Disclaimer: RxJS is not FRP
FRP is more than just set operations
(.map, .reduce, . lter)

35. What is it good for

36. User interactions -> DOM Events handling
NET -> Ajax, WebSockets
API -> Library gear
State Management -> NgRx, Redux-Rx
WebWorkers
Animations

37. Inspiration
github.com/Reactive-Extensions/RxJS/tree/master/examples

38. How do I create an Observable?

39. Use of teardown logic

40. Observables have "purpose-based" static
methods for creation

41. Observable.of()
arguments to an observable sequence

42. Observable.from(iterable)
(Array | Arguments | Iterable): An array-like or iterable
object to convert to an Observable sequence.

43. Observable.fromPromise

44. Observable.merge

45. Other creation methods
bindCallback, bindNodeCallback, ajax, webSocket + more

46. How do I use an operator?

47. .reduce() and .scan()

48. .map() and .mergeMap()

49. .switchMap()

50. .switchMap() in Angular 2 - out of the box
Christoph Burgdorf - Taking advantage of Observables in
Angular 2

51. @Component({
selector: 'my­app',
template: `
<div>
<h2>Reddit Search</h2>
<input type="text" [ngFormControl]="term"/>
<ul>
<li *ngFor="#item of items | async"><a href={{item.url}}>{{item.title}}<
</ul>
</div>
`
})
export class App {
items: Observable<Array<string>>;
term = new Control();
constructor(private redditService: RedditService) {
this.items = this.term.valueChanges
.debounceTime(400)

52. Operators mastery at level 100

53. RxJS 5

54. Improvements:
Compliance with the TC39 Observable Spec
Perf -> operators are faster (removed closures)
TypeScript
Modularity -> bundling size
MarbleTests
Migration notes

55. Contains RxJS

58. NgRx, Redux-Rx

59. Learning materials

60. Of cial in-repo Documentaion
- interactive, written in Cycle.js
egghead.io
RxJS gitbook
rxmarbles.com

61. Credits

62. Microsoft, Net ix, Google

63. Erik Meijer & Matthew Podwysocki
Ben Lesh, André Staltz, OJ Kwon

64. Thank you

65. #devsUnited
github.com/vire
@vireliam