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
130

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
20260315 AWSなんもわからん🥲
Avatar for Chiaki Okamoto chiilog
2
160
CSC307 Lecture 15
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
260
API Platformを活用したPHPによる本格的なWeb API開発 / api-platform-book-intro
Avatar for Takashi Kanemoto ttskch
1
140
Claude Code の Skill で複雑な既存仕様をすっきり整理しよう
Avatar for yuichiro_takahashi yuichirokato
1
410
モダンOBSプラグイン開発
Avatar for Kaito Udagawa umireon
0
160
Claude Code Skill入門
Avatar for maya mayahoney
0
400
PHPのバージョンアップ時にも役立ったAST（2026年版）
Avatar for Atsushi Matsuo matsuo_atsushi
0
130
メタプログラミングで実現する「コードを仕様にする」仕組み/nikkei-tech-talk43
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
190
DevinとClaude Code、SREの現場で使い倒してみた件
Avatar for karia/Y.Hisamatsu karia
1
1.1k
Go 1.26でのsliceのメモリアロケーション最適化 / Go 1.26 リリースパーティ #go126party
Avatar for mazrean mazrean
1
420
エラーログのマスキングの仕組みづくりに役立ったASTの話
Avatar for Kenichi Shihota kumoichi
0
240
OTP を自動で入力する裏技
Avatar for Megabits_mzq megabitsenmzq
0
120

Featured

See All Featured
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.1k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
180
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
350
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
180
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.6k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
290
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
17k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
230
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.6k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.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