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

Client Side Reactive Programming Using RxJS

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
550
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
120
Embrace Native JavaScript
Avatar for r31gN_ r31gn
0
99
From Callback Hell To Promises Heaven
Avatar for r31gN_ r31gn
1
180

Other Decks in Technology

See All in Technology
「使いにくい」も「運用疲れ」も卒業する　UIデザイナーとエンジニアが創る持続可能な内製開発
Avatar for NRI Netcom nrinetcom
PRO
1
770
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
2.8k
Secure Boot 2026 - Aggiornamento dei certificati UEFI e piano di adozione in azienda
Avatar for Intune Italian User Group memiug
0
130
Introduction to Bill One Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
380
dbt meetup #19 『dbtを『なんとなく動かす』を卒業します』
Avatar for t-hiroto tiltmax3
0
150
AIに視覚を与えモバイルアプリケーション開発をより円滑に行う
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
770
AI Coding Agentの地殻変動 ～ ai-coding.info の定点観測 ～
Avatar for kotauchisunsun kotauchisunsun
1
510
What's new in Go 1.26?
Avatar for Koya IWAMURA ciarana
2
280
Introduction to Sansan Meishi Maker Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
360
JAWS DAYS 2026 CDP道場 事前説明会 / JAWS DAYS 2026 CDP Dojo briefing document
Avatar for Naomi Yamasaki naospon
0
120
類似画像検索モデルの開発ノウハウ
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
410
マルチロールEMが実践する「組織のレジリエンス」を高めるための組織構造と人材配置戦略
Avatar for coconala_engineer coconala_engineer
2
290

Featured

See All Featured
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
870
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.1k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
380
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
1.9k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
1.9k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
760
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.6k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
110
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.4k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
830
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.7k

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