How Reactive Programming makes developer lives easier. - Tracy Lee

tags: jsdc2018

Reactive programming in standards

• TC39
  • Promises
  • Observables

Observable

• currently in Stage 1
• RxJS is a reference implementation

EventTarget Observable

• add method called on to EventTarget

button.on('click')

Reactive programming in frameworks

Reactive programming is standard

D3, Angular, Vue.js 都有用到 Reactive programming

• Angular & NgRX
• Reactive Programming in React
  • React
  • redux-observable
  • MobX
• Vue & Vue-Rx

Reactive is just a fancy term to quantify a way of programming.

• WebSockets
• user events
• animations
• HTTP requests
• network
• …

How to think reactively?

• everything can be modeled as an event
• All applications are event driven
• Evenything can represented as a set of values over time, even evnets

What is RxJS?

Domain specific language (DSL) for reacting to events
The most popular reactive programming library.

other dialects:
RxJava, RxPHP, RX.NET, RxRuby, etc.

What an Observable is
The simple technical …

Observable

• it's just a function with a lot of cool guarantee
• wrap it in a calss that handles that stuff
• We call it via subscribe

Observer

• next(value)
• error(error) (observable 會自動處理 ? only if observer implemented error function)
• complete()

operator

• always return a new Observable

operators in Array:

• map
• filter

operators in Observable

There are 60+ operators in RxJS
(不需要自己實作 map … 等 operator)

How reactive programming makes development easier

• less code
• drag & drop in Angular could be easy

We could do more complex things like multiplexing over a websocket using RxJS

Sending and receiving multiple indenpendent requests and responses concurrently over …

Easy ways to integrate RxJS

• click handlers
• AJAX requests
• Anything async
• … or just call subscribe for normal operation is fine :)

RxJS docs - come contribute!
https://github.com/ReactiveX/rxjs

@ladyleet