Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Reactive Programming in Javascript

Andres Osorio Plata
October 28, 2015
Programming
0
83

Reactive Programming in Javascript

- What is RxJS
- Event Stream
- Why RxJS
- Rx Functions

Andres Osorio Plata

October 28, 2015
Tweet

More Decks by Andres Osorio Plata

See All by Andres Osorio Plata
Material Design Lite
codeandrop
0
120
Todo App Angular 2
codeandrop
1
140

Other Decks in Programming

See All in Programming
Snowflakeで眠ったデータを起こそう！
estie
0
140
What We Can Learn From OSS
inouehi
0
430
Site Reliability Engineering for GMO
pyama86
8
1.1k
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
480
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
370
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
720
ゆるい個人開発のススメ
kuroppe1819
10
1k
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
120
VS Code をプロダクトにどう取り込むか
onomax
1
650
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
400
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
120
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
870

Featured

See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Designing for humans not robots
tammielis
248
25k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Unsuck your backbone
ammeep
663
57k
YesSQL, Process and Tooling at Scale
rocio
165
13k
Stop Working from a Prison Cell
hatefulcrawdad
267
19k
A Philosophy of Restraint
colly
197
16k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Embracing the Ebb and Flow
colly
80
4.2k
Building Your Own Lightsaber
phodgson
100
5.7k

Transcript

  1. Reactive Programming in Javascript Andres Osorio @codeandrop

  2. Agenda • What is RxJS • Event Stream • Why

    RxJS • Rx Functions • Demo time!

  3. RxJS - What • Asynchronous • Event-based • Observable sequences

    • Fluent query operators (filter, map, etc) • Extends the observer pattern • Data Streams

  4. Event Stream

  5. ASCII Diagram

  6. RxJS - Why • Avoid callback hell • Treat streams

    like collections (Array) • Promises on steroids • No flow control statements (if/for/etc)

  7. RxJS - Definition • Specify dynamic values behavior at time

    of declaration

  8. Double click event stream

  9. Example - "Who to follow" box

  10. Rx Functions - map

  11. Rx Functions - map

  12. Rx Functions - flatMap

  13. Rx Functions - flatMap

  14. Rx Functions - merge

  15. Rx Functions - merge

  16. Rx Functions - merge

  17. Rx Functions - combineLatest

  18. Rx Functions - combineLatest

  19. Demo Time!

  20. Links • http://jsfiddle.net/staltz/8jFJH/48/ • https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 • https://egghead.io/series/introduction-to-reactive- programming

  21. Andres Osorio @codeandrop