$30 off During Our Annual Pro Sale. View Details »

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
540
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
300
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
Lookerで実現するセキュアな外部データ提供
Avatar for ZOZO Developers zozotech
PRO
0
140
.NET 10の概要
Avatar for tomokusaba tomokusaba
0
110
IAMユーザーゼロの運用は果たして可能なのか
Avatar for Yuuki Yamashita yama3133
1
410
Challenging Hardware Contests with Zephyr and Lessons Learned
Avatar for misoji engineer iotengineer22
0
220
SSO方式とJumpアカウント方式の比較と設計方針
Avatar for Yuto Obayashi yuobayashi
7
690
寫​了​幾年​ Code，​然後​呢？​軟體​工程師​必須重新​認識​的​ DevOps
Avatar for Cheng-Wei Chen cheng_wei_chen
1
1.4k
AI 駆動開発勉強会 フロントエンド支部 #1 w/あずもば
Avatar for 1ft-seabass 1ftseabass
PRO
0
380
WordPress は終わったのか ～今のWordPress の制作手法ってなにがあんねん？～ / Is WordPress Over? How We Build with WordPress Today
Avatar for tbshiki tbshiki
1
780
AWSを使う上で最低限知っておきたいセキュリティ研修を社内で実施した話 ~みんなでやるセキュリティ~
Avatar for maimyyym maimyyym
2
1.5k
CARTAのAI CoE が挑む「事業を進化させる AI エンジニアリング」 / carta ai coe evolution business ai engineering
Avatar for CARTA Engineering carta_engineering
0
1.6k
Debugging Edge AI on Zephyr and Lessons Learned
Avatar for misoji engineer iotengineer22
0
210
mairuでつくるクレデンシャルレス開発環境 / Credential-less development environment using Mailru
Avatar for Issei Naruta mirakui
5
530

Featured

See All Featured
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
24
3.8k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.3k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
57k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.2k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
186
22k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
8
1.3k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k

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