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

Client Side Reactive Programming Using RxJS

Avatar for r31gN_ r31gN_
July 25, 2016
Technology
0
190

Client Side Reactive Programming Using RxJS

Avatar for r31gN_

r31gN_

July 25, 2016
Tweet

More Decks by r31gN_

See All by r31gN_
State management in React using Context and Hooks APIs
Avatar for r31gN_ r31gn
0
240
React internals (fibers, coroutines, algebraic effects)
Avatar for r31gN_ r31gn
1
540
10 things you need to know about React 16
Avatar for r31gN_ r31gn
0
410
Breaking React apart Fiber by Fiber
Avatar for r31gN_ r31gn
0
270
Progressive Web Apps - The Future
Avatar for r31gN_ r31gn
2
300
The Magic Behind HTTP/2
Avatar for r31gN_ r31gn
0
160
CSS Architecture
Avatar for r31gN_ r31gn
1
120
Embrace Native JavaScript
Avatar for r31gN_ r31gn
0
98
From Callback Hell To Promises Heaven
Avatar for r31gN_ r31gn
1
170

Other Decks in Technology

See All in Technology
複雑さを受け入れるか、拒むか？ - 事業成長とともに育ったモノリスを前に私が考えたこと #RSGT2026
Avatar for bayashi murabayashi
0
530
テストセンター受験、オンライン受験、どっちなんだい？
Avatar for Yuuki Yamashita yama3133
0
200
まだ間に合う！ Agentic AI on AWSの現在地をやさしく一挙おさらい
Avatar for みのるん minorun365
19
3.4k
Oracle Cloud Infrastructure：2025年12月度サービス・アップデート
Avatar for oracle4engineer oracle4engineer
PRO
0
140
[2025-12-12]あの日僕が見た胡蝶の夢 〜人の夢は終わらねェ AIによるパフォーマンスチューニングのすゝめ〜
Avatar for tosite tosite
0
230
Next.js 16の新機能 Cache Components について
Avatar for sutetotanuki sutetotanuki
0
210
AWS Lambda durable functions を使って AWS Lambda の15分の壁を超えてみよう
Avatar for MatsuzawaTakeshi matsuzawatakeshi
0
120
松尾研LLM講座2025 応用編Day3「軽量化」 講義資料
Avatar for Aratako aratako
14
4.8k
AIと融ける人間の冒険
Avatar for pujisi pujisi
0
100
ハッカソンから社内プロダクトへ AIエージェント ko☆shi 開発で学んだ4つの重要要素
Avatar for Tech Leverages leveragestech
0
480
「駆動」って言葉、なんかカッコイイ_Mitz
Avatar for comucal comucal
PRO
0
130
モダンデータスタックの理想と現実の間で～1.3億人Vポイントデータ基盤の現在地とこれから～
Avatar for タロウ taromatsui_cccmkhd
2
290

Featured

See All Featured
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
0
260
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
280
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
570
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
69
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
0
1.9k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
0
2.3k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
4.8k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
180
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
7.8k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k

Transcript

  1. Client-side reactive programming (using RxJS)

  2. Current state of UIs • Extremely complex • Full of

    async events, client/server communication • UIs are always composed based on a state • State is hard to reason about

  3. Imperative programming

  4. None

  5. User action UI Responds User action ….. Uses imperative programming

    Uses imperative programming UI Responds time (s)

  6. Caveats of IP • Isolates state from time • You

    don’t see the bigger picture • Mutable values

  7. Is there a way … ?

  8. Reactive programming

  9. – Andre Staltz “Reactive programming is programming with asynchronous data

    streams.”

  10. Streams • Sequence of ongoing events ordered in time •

    Cheap, ubiquitous • Allow you to react to new data • Think event busses, typical click events, etc.

  11. But in RP …

  12. None

  13. Demo time with RxJS

  14. When to use RxJS • Orchestrate event-based computations • Deal

    with async data • Complex UIs with lots of user interaction

  15. Thank you! @r31gN_ https://github.com/r31gN/rxjs-demo-presentation