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

Client Side Reactive Programming Using RxJS

Avatar for r31gN_

r31gN_

July 25, 2016

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
560
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
320
The Magic Behind HTTP/2
Avatar for r31gN_ r31gn
0
170
CSS Architecture
Avatar for r31gN_ r31gn
1
130
Embrace Native JavaScript
Avatar for r31gN_ r31gn
0
100
From Callback Hell To Promises Heaven
Avatar for r31gN_ r31gn
1
180

Other Decks in Technology

See All in Technology
AWSで2番目にリリースされたサービスについてお話しします(諸説あります)
Avatar for Yuuki Yamashita yama3133
0
120
プロダクトを育てるように生成AIによる開発プロセスを育てよう
Avatar for KAKEHASHI kakehashi
PRO
1
380
最大のアウトプット術は問題を作ること
Avatar for ryoAccount ryoaccount
0
300
Oracle AI Databaseデータベース・サービス: BaseDB/ExaDB-Dの可用性
Avatar for oracle4engineer oracle4engineer
PRO
1
110
推し活エージェント
Avatar for ゆんたん yuntan_t
1
770
Zephyr(RTOS)でARMとRISC-Vのコア間通信をしてみた
Avatar for misoji engineer iotengineer22
0
130
Kubernetes基盤における開発者体験 とセキュリティの両⽴ / Balancing developer experience and security in a Kubernetes-based environment
Avatar for mekka chmikata
0
130
Physical AI on AWS リファレンスアーキテクチャ / Physical AI on AWS Reference Architecture
Avatar for shota aws_shota
1
330
GitHub Copilotを極める会 - 開発者のための活用術
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
1
670
Cortex Code君、今日から内製化支援担当ね。
Avatar for あべ coco_se
0
250
Oracle Cloud Infrastructure：2026年3月度サービス・アップデート
Avatar for oracle4engineer oracle4engineer
PRO
0
370
Cortex Codeでデータの仕事を全部Agenticにやりきろう！
Avatar for harry gappy50
0
290

Featured

See All Featured
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.4k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
170
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
160
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.8k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
25k
Fireside Chat
Avatar for paigeccino paigeccino
42
3.9k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.5k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
240

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