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
Cloudflare Realtime と Workers でつくるサーバーレス WebRTC
Avatar for Taiyu Yoshizawa nekoya3
0
410
C++20 射影変換
Avatar for Akira Takahashi faithandbrave
0
480
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
Avatar for yukyan n3xem
0
660
実践ArchUnit ～実例による検証パターンの紹介～
Avatar for 荻原利雄 ogiwarat
2
270
UPDATEがシステムを複雑にする？ イミュータブルデータモデルのすすめ
Avatar for a.shimomura shimomura
1
550
技術懸念に立ち向かい 法改正を穏便に乗り切った話
Avatar for popCashew pop_cashew
0
1.4k
KotlinConf 2025 現地参加の土産話
Avatar for Takehata Naoto n_takehata
0
100
ASP.NETアプリケーションのモダナイズ インフラ編
Avatar for tomokusaba tomokusaba
1
330
プロダクト開発でも使おう 関数のオーバーロード
Avatar for yoiwamoto yoiwamoto
0
150
複数アプリケーションを育てていくための共通化戦略
Avatar for irof irof
10
3.9k
Effect の双対、Coeffect
Avatar for ゆきくらげ yukikurage
5
1.4k
從零到一：搭建你的第一個 Observability 平台
Avatar for Blueswen blueswen
1
940

Featured

See All Featured
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.7k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
32
5.9k
Scaling GitHub
Avatar for Zach Holman holman
459
140k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
94
14k
Designing for Performance
Avatar for Lara Hogan lara
609
69k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
20
1.3k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
41
7.3k
Docker and Python
Avatar for Tania Allard trallard
44
3.4k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.3k

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