Functional reactive programming in javascript.

reactive-programming-js.md

Reactive programming with Javascript

Jakob Hohlfeld Web Developer, Freelancer, Founder, Entrepreneur @jhohlfeld

---

Lightning talk

• Reactive programming
• Reactive extensions (RxJS)
• Case studies & links
• example app

---

What is reactive programming?

Or, what are Reactive Systems?

Reactive Manifesto (2014) http://www.reactivemanifesto.org/

• Responsive The system responds in a timely manner if at all possible. Responsiveness is the cornerstone of usability and utility, [...]
• Resilient The system stays responsive in the face of failure.
• Elastic The system stays responsive under varying workload.
• Message Driven Reactive Systems rely on asynchronous message-passing [...]

---

Case studies & tutorials

Google search for 'reactive programming heise' i.e. http://www.heise.de/developer/artikel/Reactive-Programming-vom-Hype-zum-Praxiseinsatz-2059533.html

Video von RP bei Netflix https://www.youtube.com/watch?v=XE692Clb5LU

The introduction to Reactive Programming you've been missing (by @andrestaltz) https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

---

Reactive extensions (Rx)

Reacticex.io

Reactive extensions Javascript implementation docs http://reactivex.io/rxjs/

---

Rx Operators: map

Map transform the items emitted by an Observable by applying a function to each item

---

Rx Operators: flatMap

FlatMap transform the items emitted by an Observable into Observables, then flatten the emissions from those into a single Observable FlatMap

---

Example app

http://jsbin.com/pujapob/4/edit?output

// 1. use as input stream (data input)
const cities = [ 'London', 'Madrid'/*, ...*/ ]

// 2. create interaction stream (user input)
const subject = new Rx.Subject()

// 3. combine streams (user/date interaction)
const citiesStream = Rx.Observable.combineLatest // ...

// 4. subscribe to changes, render app
citiesStream.subscribe //...

---

Cycle.js

Cycle.js

Pattern: Model-View-Intent

---

MobX

Interesting alternative approach using observable pattern (not Rx): https://mobxjs.github.io/mobx/

---

Thank you

Written with StackEdit.