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

Client Side Reactive Programming Using RxJS

r31gN_
July 25, 2016
Technology
0
180

Client Side Reactive Programming Using RxJS

r31gN_

July 25, 2016
Tweet

More Decks by r31gN_

See All by r31gN_
State management in React using Context and Hooks APIs
r31gn
0
230
React internals (fibers, coroutines, algebraic effects)
r31gn
1
390
10 things you need to know about React 16
r31gn
0
400
Breaking React apart Fiber by Fiber
r31gn
0
260
Progressive Web Apps - The Future
r31gn
2
250
The Magic Behind HTTP/2
r31gn
0
150
CSS Architecture
r31gn
1
110
Embrace Native JavaScript
r31gn
0
89
From Callback Hell To Promises Heaven
r31gn
1
120

Other Decks in Technology

See All in Technology
小さな勉強会の始め方、広げ方、あるいは友達の作り方 / How to Start, Grow, and Build Connections with Small Study Groups
ar_tama
4
1.8k
AI時代のアジャイル開発（XP祭り2024版） / Agile Development in the AI Era in XPJUG
takaking22
13
3.5k
O'Reilly Superstream: Building a RAG App to Chat with Your Data
pamelafox
0
100
【shownet.conf_】クロージングセッション
shownet
PRO
0
260
LINEヤフー新卒採用 コーディングテスト解説 アルゴリズム問題編
lycorp_recruit_jp
0
13k
DenoでもViteしたい！インポートパスのエイリアスを指定してラクラクアプリ開発
bengo4com
1
1.8k
Strict Concurrencyにしたらdeinitでクラッシュする話
0si43
0
120
【shownet.conf_】ShowNet伝送改めShowNet APN 2024
shownet
PRO
0
370
【インフラエンジニアbooks】30分でわかる「AWS継続的セキュリティ実践ガイド」
hssh2_bin
4
1.4k
山手線一周のパフォーマンス改善
suzukahr
0
120
Slackbot × RAG で実現する社内情報検索の最適化
howdy39
2
290
Develop to Survive - YAPC::Hakodate 2024 Keynote
moznion
3
480

Featured

See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
125
18k
Typedesign – Prime Four
hannesfritz
39
2.3k
Designing with Data
zakiwarfel
98
5.1k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
How to name files
jennybc
77
99k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
158
15k
How STYLIGHT went responsive
nonsquared
94
5.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
Web development in the modern age
philhawksworth
205
10k
Learning to Love Humans: Emotional Interface Design
aarron
271
40k
Docker and Python
trallard
40
3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
59k

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