Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Client Side Reactive Programming Using RxJS

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for r31gN_ r31gN_
July 25, 2016
Technology
200
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
260
React internals (fibers, coroutines, algebraic effects)
Avatar for r31gN_ r31gn
1
580
10 things you need to know about React 16
Avatar for r31gN_ r31gn
0
430
Breaking React apart Fiber by Fiber
Avatar for r31gN_ r31gn
0
290
Progressive Web Apps - The Future
Avatar for r31gN_ r31gn
2
350
The Magic Behind HTTP/2
Avatar for r31gN_ r31gn
0
170
CSS Architecture
Avatar for r31gN_ r31gn
1
140
Embrace Native JavaScript
Avatar for r31gN_ r31gn
0
110
From Callback Hell To Promises Heaven
Avatar for r31gN_ r31gn
1
190

Other Decks in Technology

See All in Technology
Deploying a Full-Stack Bun-Native Framework on Cloudflare Workers
Avatar for daiki7nohe 7nohe
0
140
WAF 運用改善の承認サイクル/SRE_BizReach_MIXI_1
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
2
450
Adaptive Warehouse を今すぐ導入すべき理由と迷ったときの判断基準
Avatar for あれ __allllllllez__
0
180
AI-DLCって実際どう？ 〜聞きたいこと全部聞いてみる〜
Avatar for 荒木 ARK news_it_enj
0
260
omasushiというライブラリを作った
Avatar for polidog polidog
PRO
0
200
AIに丸投げしないトイル削減 / Eliminating Toil Without Leaving It All to AI
Avatar for kohbis kohbis
4
1.1k
AIで開発は速くなったのに、なぜ現場は楽にならないのか 〜あなたの組織のボトルネックを突き止めるワークショップ〜
Avatar for Kazuto Kusama jacopen
1
330
AIオーケストレーションを活用した 開発ワークフローの設計と実践
Avatar for bqnq bqnq
0
130
Claude in Chrome 入門 / Introduction to Claude in Chrome
Avatar for yuta cielo1985
0
260
多層防御と最⼩権限で実現する、安全なAIエージェント設計パターン
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
260
2026-09-11 【Snowflake World Tour Tokyo 2026】Snowflakeを起点に、AI Agentが自律稼働し続ける未来へ / Driving AI Agents with Snowflake
Avatar for civitaspo civitaspo
0
330
Sigmaで作る業務アプリ
Avatar for kazushiro_honma kazushiro_honma
0
120

Featured

See All Featured
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.4k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
370
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
3
1.2k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
2.1k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.4k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
Done Done
Avatar for chrislema chrislema
186
16k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
190
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
2.6k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.8k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
25k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
570

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