# How Reactive Programming makes developer lives easier. - Tracy Lee

{%hackmd dh921X26R26y_elFAEP5yg %}

###### 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](http://reactivex.io/documentation/operators.html)
(不需要自己實作 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