Rxjs workshop
@channikhabra
Functional
Programmer
Test
There are no silver bullets
Disprove this statement
and prove it too
Hint: Recursion
Congratulations
You just learned how to work with Infinite Sequences
Phase 1
A gentle Introduction to Reactive Programming
Pragmatic
Approach
Code Like Chuck Norris App
Tutorial
Objective
- Realising how awesome Reactive Programming is
- Realising how easy Reactive Programming is
- Realising how familiar Reactive Programming is
Promise
Observable
vs
Observable
wut o_O?
Synchronous
- Values
Asynchronous
- Promise
- Arrays
- Observable
Array
Observable
[1, 2, 3]
use_array()
----1------2-----3--|
use_observable()
How to use
Promise
- .onNext(fn)
- .onError(fn)
- .onCompleted(fn)
Observable
- .then(fn)
- .catch(fn)
}
subscriber
.subscribe(obj)
}
How to use
Operators
- .map
- .filter
- .reduce
- .scan
- .merge
- .
- .
- .
}
Array extras API
and much more
Let's write some Code
Observable.create(fn)
(observer) => {
.
.
.
}
{
onNext: fn,
onError: fn,
onCompleted: fn
}
Observable.create(fn)
(observer) => {
.
.
.
return disposable_fn;
}
{
onNext: fn,
onError: fn,
onCompleted: fn
}
When do Observable gets disposed?
When it finishes. -> onCompleted
When any error occurs. -> onError
On observable.subscribe(obj).dispose()
Observable are lazy
- Observable carries the computation itself
- Computation is evaluated when an Observer subscribes to the Observable
More than one async operations
Things get complicated when there are
Observable Factories
- Observable.create
- Observable.fromEvent
- Observable.fromInterval
- Observable.fromPromise
- Observable.fromCallback
- Observable.fromNodeCallback
Bonus
Observable play very well with Promise
We can reuse our Promise in Observable chains. They're treated first class in there.
That's all
For CLCN app
Phase 2
The static site generator
Recene
Markdown
HTML
Markdown
+ YAML
HTML
- [ ] List files in the posts dir
- [ ] Parse post level config from file-name
- [ ] Read markdown files from posts dir
- [ ] Parse post level config from posts
- [ ] Convert markdown to HTML
- [ ] Apply post html to site theme
- [ ] Delete existing public dir
- [ ] Recreate empty public dir
- [ ] Copy theme's CSS over to dest dir
- [ ] Write final HTML to files
- [ ] Create index page
flatMap
Synchronous DS:
b = a.map(func);
// b = [[1, 2,3], [4, 5, 6]]
b = flatten(b);
// b = [1, 2, 3, 4, 5, 6]
// map then flatten
b = flatMap(func);
// b = [1, 2, 3, 4, 5, 6];combineLatest
zip
reduce
concat
Cold Observable
- Act like asynchronous functions
- Every new subscription is like calling that function
Hot Observable
- Act like event listeners
- All subscriptions share same source
Cold Observable
Hot Observable
.share()
Thank You
Happy hacking : )
@channikhabra
Copy of Jschannel RxJS workshop Nov 2015
By Denis Tsoi
Copy of Jschannel RxJS workshop Nov 2015
Reactive Functional Programming workshop @js_channel using RxJS
