Getting Reactive with Cycle.js and xstream

Getting Reactive with
Cycle.js and XStream
TechExeter2017
Steve Lee
steve@opendirective.com
@SteveALee

Three things
• What is Reactive Programming with Streams
and Cycle.js.
• Why I should I care?
• How can I get started?

What we’ll cover
• Reactive programming with streams
• Cycle.js
• A little Functional Programming
• Some ES6+ Javascript syntax
• Virtual DOM and/or JSX

What is Reactive Programming?
• Reactive programming is programming with
asynchronous data streams – Andre Staltz

Observable and Observer
Observable Observer

Nothing New
• Event busses, queues, handlers…
• Microsoft Rx Extensions about 5 yrs old
• Netflix use Rx for their apps
• Angular provides Rx as an option

What is Cycle.js
• Tiny amount of code
• Small set of general principles
• “A unified theory of everything, but for
JavaScript.” - @Widdershin
• It’s streams all the way down

Principles
• Event loop between App and external world
• I/O Side effects separate from application logic
• No global state – data flows & reducers

Bonuses
• Explicit asynchronous dataflow
• Extensible by adding new drivers
• Relatively easy to test

Show me some Code!
https://jsbin.com/tewiwal/edit?js,output

HTML
// Placeholder element
<body>
<div id="app"></div>
</body>

Import Dependencies
// ES6 imports via Babel or TypeScript
// or global script with NPM CDN
const xs = … xstream
const Cycle = … cycle.js
const makeDOMDriver = … @cycle/DOM

Cycle.js Entry Function
// The Cycle.js framework API!
Cycle.run(Toggle, {
DOM: makeDOMDriver('#app')
});

Main Componet
// Toggle is our main component - App
Cycle.run(Toggle, {
});

Collection of Drivers
Cycle.run(Toggle, {
});

Drivers
• Just functions
• Output one of component sources
– DOM event Stream selector
• Input is a sink stream from the component
– VDOM updates – becomes the DOM
• Cycle connects based on Driver name

A Cycle.js Component
function Toggle(sources) {
const sinks = {
DOM: …};
return sinks;
}

A Cycle.js Component
// Passed sources, one per driver
// Returns Sinks, one per useful output stream
function Toggle((sources) {
const sinks = {
DOM: /* VDOM update stream */
};
return sinks;
}

The Complete Component
function Toggle(sources) {
const sinks = {
DOM: sources.DOM
.select('input').events('change')
.map(ev => ev.target.checked)
.startWith(false)
.map(toggled =>
div([
input({attrs: {type: 'checkbox'}}), 'Toggle me',
p(`${toggled ? 'ON' : 'off'}`)
])
)
};
return sinks;
}

Component with MVI
function Toggle({DOM}) {
const intent$ = DOM.select('input').events('change')
const model$ = intent$.map(ev => ev.target.checked)
.startWith(false)
const view$ = model$.map(toggled =>
div([
])
)
sinks = { DOM: view$ }
return sinks
}

Object Destructuring
Given
const sources = { DOM: … }
Then
const DOM = sources.DOM
Can be written as
const {DOM} = sources
foo({DOM})

User Intent
const intent$ = DOM.select('input').events('change’)
…
return sinks
}

DOM Driver events
• All input events come in through sources
• Driver lets you use CSS selectors
• Composition requires event “isolation”

Model
// state is true or false, initially false
…
const model$ = intent$.map(ev => ev.target.checked)
.startWith(false)
…
return sinks
}

ES6 Fat Arrow Functions
const mapper = ev => ev.target.checked
Somewhat equivalent to
Function mapper(ev){
return ev.target.checked
}
• Expression
• Shortcut syntax
• No “wtf is this” problems

View
// Return a stream of VDOM Nodes
…
const view$ = model$.map(toggled =>
div([
])
)
sinks = { DOM: view$ }
return sinks
}

Virtual DOM
• DOM updates are slow
• Virtual DOM looks like DOM but is faster
• Manages when to update DOM and what
• Practical to define view based on state
• React made Virtual DOMs popular
• Cycle uses one called snabbdom

Snabbdom
// Hyperscript helper functions. Can also use JSX
div([
])
Is rendered as this HTML
<div>
<input type="checkbox">Toggle me
<p>off</p>
</input>
</div>

ES6 Template string
// backtick allows embedded expressions
const string = `${toggled ? 'ON' : 'off'}`

Stream view
// Select a stream of DOM events
sources.DOM.select('input').events('change’)
// Converts each event to checked state
.map(ev => ev.target.checked)
// Initial state is false
.startWith(false)
// Convert state to VDOM update
.map(toggled =>
div([
])
)

Streams
• Explicit flow of ‘events’
• From Sources (producer) to sinks (consumer)
• Through a sequence of simple operators

Declarative
• The stream operators say what happens
• Not how – eg no imperative loops
• Uses functional style operators on streams
– Eg map, reduce (aka fold), filter ….
– Similar to array extras, but over time not in
memory
– Stream specific operators like “merge”

Marble Diagram
http://rxmarbles.com/

Immutable
• Operators return new streams
• Pure functions – no surprises
• No modification of global state

State handling
• Follow events
• Fold() modifies ‘state’ over a series of events
• Onionify provide single state tree cf. Redux
– Layered to match composition structure
– State input to component as a Stream
– Changes in state returned as reducer functions
– Persist to browser storage
• Roll your own

Summary
• Component is functional stream code
– no side effects, immutable, pure
• Side effects in the drivers
• Intent selected events from the DOM driver
• Intent maps to model state
• Model maps to view stream of VNodes
• VNodes returned to driver for rendering

What about those Observables?
• Cycle keeps them in drivers
• Interface between streams and side effects
• Keeps ‘external’ imperative logic out of main
• Uses xstream library rather then RxJS
– Always hot

Observable pattern
• Separates producer and consumer
• Streams between observable and observer
• Pub Sub
• Push
• GoF “Observer” plus “Iterable” patterns
• ECMAScript TC39 Stage 1 proposal

// Adds a listener (Observer) to the input stream
Function logDriver(msg$){
msg$.addListener({
next: msg => console.log(msg)
})
/* no source */
}
A Write-only Driver

// Pushes message to stream when a websocket message arrives
function WSDriver(/* no sinks */) {
return xs.create({
start: listener => {
this.connection = new WebSocket('ws://localhost:4000’);
connection.onmessage = (msg) => {
listener.next(msg)
}
});
}
A Read-only Driver

Learning Curve - Brain rewire
• Seems weird if only used to Classical OOP
• New idioms and traps to learn
• Different method of state handling
• Much easier than just using streams
• ES6+ Fat Arrows, Destructuring, Rest/Spread

Why bother
• Explicitly handles async complexity
– Simpler than long promise chains
• Cleaner declarative code
• Functional code predicability
• Pure code is easier to test - no mocking
• You might like it
• Matches “Event driven” serverless

Why Not?
• Effort to internalise new concepts
• Is young and still being refined
• Debugging can be tricky as lack of tools
– Often effectively log to console
• Finding developers may be hard
– FP is sadly not as familiar as it could be
• Community is small – also good

How can I start?
• CreateCycleApp and One Fits All flavor
• Cycle.js docs and samples
• Staltz’s “The introduction to Reactive
Programming you've been missing”
• Staltz’s egghead.io courses
• Helpful community on GitHub and gitter

Questions?
@SteveALee
steve@opendirective.com

Getting Reactive with Cycle.js and xstream

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Getting Reactive with Cycle.js and xstream

Similar to Getting Reactive with Cycle.js and xstream (20)

More from Steve Lee

More from Steve Lee (10)

Recently uploaded

Recently uploaded (20)

Getting Reactive with Cycle.js and xstream

Editor's Notes