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
180

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
520
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
290
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
96
From Callback Hell To Promises Heaven
Avatar for r31gN_ r31gn
1
160

Other Decks in Technology

See All in Technology
Playwrightで始めるUI自動テスト入門
Avatar for とことんDevOps devops_vtj
0
170
OPENLOGI Company Profile for engineer
Avatar for OPENLOGI hr01
1
46k
ubuntu-latest から ubuntu-slim へ移行しよう！コスト削減うれしい～！
Avatar for asumikam asumikam
0
110
20251102 WordCamp Kansai 2025
Avatar for Chiaki Okamoto chiilog
1
550
AIで急増した生産「量」の荒波をCodeRabbitで乗りこなそう
Avatar for Atsushi Nakatsugawa moongift
PRO
0
560
20251106 Offers DeepDive 知識を民主化！あらゆる業務のスピードと品質を 改善するためのドキュメント自動更新・活用術
Avatar for Masashi Yokota masashiyokota
1
220
窓口業務を生成AIにおまかせ！Bedrock Agent Coreで実現する自治体AIエージェント！
Avatar for Ray Oshikawa rayofhopejp
0
180
Pythonで構築する全国市町村ナレッジグラフ: GraphRAGを用いた意味的地域検索への応用
Avatar for negi111111 negi111111
0
120
Snowflakeとdbtで加速する 「TVCMデータで価値を生む組織」への進化論 / Evolving TVCM Data Value in TELECY with Snowflake and dbt
Avatar for CARTA Engineering carta_engineering
0
160
AWS IAM Identity Centerによる権限設定をグラフ構造で可視化＋グラフRAGへの挑戦
Avatar for Yuta Kimi ykimi
1
100
kotlin-lsp の開発開始に触発されて、Emacs で Kotlin 開発に挑戦した記録 / kotlin‑lsp as a Catalyst: My Journey to Kotlin Development in Emacs
Avatar for nabeo nabeo
2
340
ピープルウエア x スタートアップ
Avatar for operandoOS operando
2
3.4k

Featured

See All Featured
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
15k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
940
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
How GitHub (no longer) Works
Avatar for Zach Holman holman
315
140k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.9k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
62k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k

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