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
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
310
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
98
From Callback Hell To Promises Heaven
Avatar for r31gN_ r31gn
1
170

Other Decks in Technology

See All in Technology
Bill One急成長の舞台裏 開発組織が直面した失敗と教訓
Avatar for SansanTech sansantech
PRO
2
320
Codex 5.3 と Opus 4.6 にコーポレートサイトを作らせてみた / Codex 5.3 vs Opus 4.6
Avatar for ama-ch ama_ch
0
110
茨城の思い出を振り返る ～CDKのセキュリティを添えて～ / 20260201 Mitsutoshi Matsuo
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
220
セキュリティについて学ぶ会 / 2026 01 25 Takamatsu WordPress Meetup
Avatar for Rocket Martue rocketmartue
1
290
マーケットプレイス版Oracle WebCenter Content For OCI
Avatar for oracle4engineer oracle4engineer
PRO
5
1.6k
こんなところでも（地味に）活躍するImage Modeさんを知ってるかい？- Image Mode for OpenShift -
Avatar for Masataka Tsukamoto tsukaman
0
120
（金融庁共催）第4回金融データ活用チャレンジ勉強会資料
Avatar for tak takumimukaiyama
0
140
OCI Database Management サービス詳細
Avatar for oracle4engineer oracle4engineer
PRO
1
7.4k
コスト削減から「セキュリティと利便性」を担うプラットフォームへ
Avatar for SansanTech sansantech
PRO
3
1.4k
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
Avatar for Sansan, Inc. sansan33
PRO
0
3k
Stately
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
1
110
データの整合性を保ちたいだけなんだ
Avatar for ShoheiMitani shoheimitani
8
3k

Featured

See All Featured
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
48
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
57
50k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
200
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.4k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
9.5k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.6k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
4
1.4k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k

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