Thinking Reactive in 

Ivan Jovanovic Senior software engineer @ Welltok ivanjov.com @ivanjov96 

What is Reactive programming? 

–André Staltz “Reactive programming is programming with asynchronous data streams.” 

What is Data Stream? 

“Data stream is an endless sequence of digital signals (data packets)” 

Data stream 10 20 30 40 50 60 

In JavaScript, Reactive programming is abstraction of all async processes into the data streams 

buffer(clickStream.throttle(500ms)) 

map(‘get size of the buffer’) 1 2 3 

filter(number >= 2) 2 3 1 2 3 

Why do I need this reactive thing? 

• External service calls • Better performance • Highly testable • Abstraction over all async processes • Predictable code • Extendable code 

Observable Observable is official terminology for the stream 

Reactive programming in JS • RxJS - the most popular, biggest • MostJS - best performance • Bacon.js • XStream - the smallest 

No content

• Data flow • Side effects • Functional programming React cons 

+ 

+ + 

No content

André Staltz Creator of Cycle.js 

–Cycle.js official website “A functional and reactive JavaScript framework for predictable code” 

• Data flow • Side effects • Functional programming Cycle.js pros 

Features • Functional (just write pure functions) • Reactive • Testable • Composable • Explicit dataflow • Made for large codebases 

Image taken from cycle.js.org 

run(app, drivers); 

Drivers - side effects • HTTP • DOM • WebSockets • Local storage driver • HTML5 Notifications driver • … 

Cycle.js official packages • DOM - collection of drivers that work with DOM; it has DOM driver and HTML driver, based on snabdom virtual DOM library • History - driver for History API • HTTP - driver for HTTP requests, based on superagent • Isolate - function for making scoped dataflow components • Most-run - `run` function for apps made with `most` • Run - `run` function for apps made with `xstream` • RxJS-run - `run` function for apps made with `rxjs` 

Model-View-Intent 

Simple counter app 

import xs from 'xstream'; import { run } from '@cycle/run'; import { div, button, p, makeDOMDriver } from '@cycle/dom'; function main(sources) { const action$ = xs.merge( sources.DOM.select('.decrement').events('click').map(ev => -1), sources.DOM.select('.increment').events('click').map(ev => +1) ); const count$ = action$.fold((acc, x) => acc + x, 0); const vdom$ = count$.map(count => div([ button('.decrement', 'Decrement'), button('.increment', 'Increment'), p('Counter: ' + count) ]) ); return { DOM: vdom$, }; } run(main, { DOM: makeDOMDriver('#main') }); 

No content

function main(sources) { const action$ = xs.merge( sources.DOM.select('.decrement').events('click').map(ev => -1), sources.DOM.select('.increment').events('click').map(ev => +1) ); const count$ = action$.fold((acc, x) => acc + x, 0); const vdom$ = count$.map(count => div([ button('.decrement', 'Decrement'), button('.increment', 'Increment'), p('Counter: ' + count) ]) ); return { DOM: vdom$, }; } 

Intent const action$ = xs.merge( sources.DOM.select('.decrement').events('click').map(ev => -1), sources.DOM.select('.increment').events('click').map(ev => +1) ); 

Model const count$ = action$.fold((acc, x) => acc + x, 0); 

View const vdom$ = count$.map(count => div([ button('.decrement', 'Decrement'), button('.increment', 'Increment'), p('Counter: ' + count) ]) ); 

No content

View + CSS const style = { backgroundColor: 'blue', width: '60px', height: '60px' } const vdom$ = count$.map(count => div([ button('.decrement', { style }, ’Decrement’), button('.increment', { style }, ’Increment’), p('Counter: ' + count) ]) ); 

Handling HTTP requests 

import { makeHTTPDriver } from ‘@cycle/http'; function main(sources) { const request$ = xs.periodic(1000) .mapTo({ url: 'http://localhost:3000', category: 'api', }); const vdom$ = sources.HTTP.select('api') .flatten() .map(res => res.body) .startWith({ response: ‘’ }) .map(result => div([ h2('.label', `Response from the server: ${result.response}`) ]) ); return { DOM: vdom$, HTTP: request$ }; } run(main, { DOM: makeDOMDriver('#main'), HTTP: makeHTTPDriver() }); 

function main(sources) { const request$ = xs.periodic(1000) .mapTo({ url: 'http://localhost:3000', category: 'api', }); const vdom$ = sources.HTTP.select('api') .flatten() .map(res => res.body) .startWith({ response: ‘’ }) .map(result => div([ h2('.label', `Response: ${result.response}`) ]) ); return { DOM: vdom$, HTTP: request$ }; } 

const request$ = xs.periodic(1000) .mapTo({ url: 'http://localhost:3000', category: 'api', }); 

const vdom$ = sources.HTTP.select('api') .flatten() .map(res => res.body) .startWith({ response: '' }) .map(result => div([ h2('.label', `Response: ${result.response}`) ]) ); 

Working with components 

No content

import isolate from '@cycle/isolate'; const sources = {DOM: sources.DOM}; const childComponent = isolate(Component)(sources); const childComponentVDom$ = childComponent.DOM; const childComponentValue$ = childComponent.value; 

Cycle.js Cons • Community • Learning new paradigm • Some apps don’t need to be reactive 

Conclusion • Old paradigm with the new usage • Not for everyone • Perfect for real time apps that require high performance • Testable, predictable code • One interface for all async processes 

Next? https://cycle.js.org/ 

Thank you Blog ivanjov.com Twitter @ivanjov96