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
500
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
AWS 잘하는 개발자 되기 - AWS 시작하기: 클라우드 개념부터 IAM까지
Avatar for KimJaewook kimjaewook
0
120
VCC 2025 Write-up
Avatar for bata_24 bata_24
0
190
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
Avatar for oracle4engineer oracle4engineer
PRO
3
5.5k
o11yで育てる、強い内製開発組織
Avatar for _awache _awache
3
130
AIツールでどこまでデザインを忠実に実装できるのか
Avatar for Oikon oikon48
6
2.9k
How to achieve interoperable digital identity across Asian countries
Avatar for Naohiro Fujie fujie
0
140
リーダーになったら未来を語れるようになろう/Speak the Future
Avatar for Genki Sano sanogemaru
0
350
extension 現場で使えるXcodeショートカット一覧
Avatar for とんとんぼ ktombow
0
220
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
4
350
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
Avatar for maimyyym maimyyym
4
2.8k
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
Avatar for Ken'ichirou Kimura kenichirokimura
3
160
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
Avatar for Sansan R&D sansan_randd
0
130

Featured

See All Featured
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Scaling GitHub
Avatar for Zach Holman holman
463
140k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
368
20k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
697
190k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.8k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
185
22k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.5k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
53
9k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k

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