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
130
0

Reactive Programming in Javascript

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

Avatar for Andres Osorio Plata

Andres Osorio Plata

October 28, 2015

More Decks by Andres Osorio Plata

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

Other Decks in Programming

See All in Programming
生成AI時代にこそ効くGo | Why Go Works in the Age of Generative AI
Avatar for mom0tomo mom0tomo
8
3.4k
代数的データ型って何が嬉しいの？ #frontend_phpcon_do
Avatar for Takuma Kajikawa kajitack
8
3.8k
エンジニア向け会社紹介/Findy Company Profile
Avatar for Findy findyinc
6
360k
鹿野さんに聞く！『TypeScriptコードレシピ集』で磨く実践力
Avatar for tonkotsuboy_com tonkotsuboy_com
4
920
どこまでゆるくて許されるのか
Avatar for tk3fftk tk3fftk
0
280
Observability in Practice：Grafana 與 Edge Device SRE 的那些事
Avatar for Blueswen blueswen
0
180
技術記事、 専門家としてのプログラマ、 言語化
Avatar for Koutarou Chikuba mizchi
13
6.7k
トークンをケチるな、設計しろ：GitHub Copilotを賢く使うコンテキスト戦略
Avatar for Ochtum ochtum
0
260
Hunting Vulnerabilities in Symfony with LLMs
Avatar for Vincent Amstoutz vinceamstoutz
0
570
気づいたらRubyで100作品 ー クリエイティブコーディングが生活の一部になるまで / 100 Ruby Sketches Later: How Creative Coding Became Part of My Life
Avatar for chobishiba chobishiba
3
620
ローカルLLMでどこまでコードが書けるか -縮小版 /　How much code can be written on a local LLM Shortened
Avatar for Naoki Kishida kishida
2
140
TAKTでAI駆動開発の品質を設計する
Avatar for かとじゅん j5ik2o
7
1.6k

Featured

See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.2k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
160
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
250
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
410
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
550
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.3k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
410
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
1.8k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
7k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k

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