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

Reactive Programming in Javascript

Avatar for Andres Osorio Plata Andres Osorio Plata
October 28, 2015
Programming
0
110

Reactive Programming in Javascript

- What is RxJS
- Event Stream
- Why RxJS
- Rx Functions
Avatar for Andres Osorio Plata

Andres Osorio Plata

October 28, 2015
Tweet

More Decks by Andres Osorio Plata

See All by Andres Osorio Plata
Material Design Lite
Avatar for Andres Osorio Plata codeandrop
0
130
Todo App Angular 2
Avatar for Andres Osorio Plata codeandrop
1
170

Other Decks in Programming

See All in Programming
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
Avatar for uutan1108 ohmori_yusuke
2
230
LT 2025-06-30: プロダクトエンジニアの役割
Avatar for Keisuke Yamamoto yamamotok
0
570
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
Avatar for shiro seike seike460
PRO
1
340
C++20 射影変換
Avatar for Akira Takahashi faithandbrave
0
540
なぜ「共通化」を考え、失敗を繰り返すのか
Avatar for Rinchoku rinchoku
1
570
Kotlin エンジニアへ送る：Swift 案件に参加させられる日に備えて～似てるけど色々違う Swift の仕様 / from Kotlin to Swift
Avatar for Elvis Shi lovee
1
260
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
Avatar for Sébastien LECACHEUR slecache
0
110
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
310
エンジニア向け採用ピッチ資料
Avatar for 犬飼嵩 inusan
0
170
Bytecode Manipulation 으로 생산성 높이기
Avatar for Daekyu bigstark
2
380
型付きアクターモデルがもたらす分散シミュレーションの未来
Avatar for Takatomo Torigoe piyo7
0
810
Benchmark
Avatar for 송상윤 sysong
0
270

Featured

See All Featured
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
357
30k
Designing for Performance
Avatar for Lara Hogan lara
609
69k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.5k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
35
6.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
2.8k
Faster Mobile Websites
Avatar for Dean Hume deanohume
307
31k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
46
9.6k

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