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
510
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
OCI Network Firewall 概要
Avatar for oracle4engineer oracle4engineer
PRO
2
7.9k
AgentCon Accra: Ctrl + Alt + Assist: AI Agents Edition
Avatar for Bethany Jepchumba bethany
0
110
今この時代に技術とどう向き合うべきか
Avatar for gree_tech gree_tech
PRO
2
1.7k
CoRL 2025 Survey
Avatar for Haruki Abe harukiabe
1
200
HR Force における DWH の併用事例 ~ サービス基盤としての BigQuery / 分析基盤としての Snowflake ~@Cross Data Platforms Meetup #2「BigQueryと愉快な仲間たち」
Avatar for Ryo Suzuki ryo_suzuki
0
220
ガバメントクラウド（AWS）へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
Avatar for SHIFT EVOLVE shift_evolve
PRO
2
200
フレームワークを意識させないワークショップづくり
Avatar for Keigo Suda keigosuda
0
190
能登半島災害現場エンジニアクロストーク 【JAWS FESTA 2025 in 金沢】
Avatar for Masakatsu Sugii ditccsugii
0
830
なぜAWSを活かしきれないのか？技術と組織への処方箋
Avatar for NRI Netcom nrinetcom
PRO
5
900
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
Avatar for maimyyym maimyyym
10
4.7k
衛星画像超解像化によって実現する2D, 3D空間情報の即時生成と“AI as a Service”/ Real-time generation spatial data enabled_by satellite image super-resolution
Avatar for Yuji Kobayashi lehupa
0
170
GoでもGUIアプリを作りたい！
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
0
140

Featured

See All Featured
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
657
61k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
24
3.7k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
13k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
224
10k
KATA
Avatar for Megan Lloyd mclloyd
32
15k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k

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