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
230
React internals (fibers, coroutines, algebraic effects)
Avatar for r31gN_ r31gn
1
450
10 things you need to know about React 16
Avatar for r31gN_ r31gn
0
400
Breaking React apart Fiber by Fiber
Avatar for r31gN_ r31gn
0
260
Progressive Web Apps - The Future
Avatar for r31gN_ r31gn
2
270
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
93
From Callback Hell To Promises Heaven
Avatar for r31gN_ r31gn
1
140

Other Decks in Technology

See All in Technology
Devin＆Cursor、それぞれの「本質」から導く最適ユースケース戦略
Avatar for empitsu empitsu
8
2.4k
LT:組込み屋さんのオシロが壊れた！
Avatar for windy windy_pon
0
450
Roo Codeにすべてを委ねるためのルール運用
Avatar for PharmaX（旧YOJO Technologies）開発チーム pharma_x_tech
1
230
Redmineの意外と知らない便利機能 （Redmine 6.0対応版）
Avatar for MAEDA Go vividtone
0
1.2k
mnt_data_とは？ChatGPTコード実行環境を深堀りしてみた
Avatar for Issei.Komori icck
0
210
Swiftは最高だよの話
Avatar for 野瀬田　裕樹 yuukiw00w
2
290
RDRA3.0を知ろう
Avatar for 神崎 kanzaki
2
430
会社紹介資料 / Sansan Company Profile
Avatar for Sansan, Inc. sansan33
PRO
6
360k
libsyncrpcってなに？
Avatar for uhyo uhyo
0
150
AIとSREの未来 / AI and SRE
Avatar for ymotongpoo ymotongpoo
2
1.3k
“⾞が通れるほど⼤きな”セキュリティーホールを抑えながらログインしたい
Avatar for taiseiue taiseiue
0
160
All About Sansan – for New Global Engineers
Avatar for Sansan, Inc. sansan33
PRO
1
1.2k

Featured

See All Featured
Docker and Python
Avatar for Tania Allard trallard
44
3.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
1
79
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
87
Code Reviewing Like a Champion
Avatar for maltzj maltzj
523
40k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
5
620
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
245
12k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
85
4.7k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
45
9.6k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.6k

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