Cycle.js is a functional and reactive JavaScript framework for building user interfaces based on Observables and declarative code. It uses RxJS Observables to model asynchronous behavior and data flow in applications. This allows the unidirectional data flow of views updating models via intents to be modeled as Observables. The document includes code examples of using Cycle.js with RxJS to build reactive UIs, including handling events, updating state, and generating HTML. It also summarizes how the Cycle.run function coordinates driving the application by connecting sources to sinks.

1. CYCLE.JS: FUNCTIONAL AND
REACTIVE
EUGENE ZHARKOV

2. Cycle.js
virtual-dom
RxJS
cycle/corecycle/dom

3. EXISTED APPLICATION DATA FLOW | FLUX / REDUX
VIEW
DISPATCHER
STORE
action
action
action
STORE
USER
ACTION

4. EXISTED APPLICATION DATA FLOW | MODEL VIEW INTENT
VIEW
INTENT
MODEL
USER
ACTION
observable
observable
observable

5. 1
A
B
2
3
C
I’m loving it

6. RX UNDER THE HOOD

7. CODE EXAMPLE
function intent(DOM, name = '') {
const removeClicks$ = DOM.select('.remove-btn').events('click');
const stop$ = removeClicks$;
const remove$ = removeClicks$.delay(500);
return {stop$, remove$};
}
function model(actions, givenColor$) {
const x$ = Observable.interval(50).startWith(0).takeUntil(actions.stop$);
const y$ = Observable.interval(100).startWith(0).takeUntil(actions.stop$);
const color$ = Observable.merge(
givenColor$.takeUntil(actions.stop$),
actions.stop$.map(() => '#FF0000')
);
return combineLatestObj({x$, y$, color$});
}
function view(state$) {
return state$.map(({color, x, y}) => {
const style = {color, backgroundColor: '#ECECEC'};
return div('.ticker', {style}, [
h4(`x${x} ${color}`),
h1(`Y${y} ${color}`),
button('.remove-btn', 'Remove')
]);
});
}
BUTTON CLICK
HTML GENERATION
COLOR CHANGE

8. JSBIN.COM/VUGARUR/
BASIC EXAMPLE
import Cycle from '@cycle/core';
import {div, label, input, hr, h1, makeDOMDriver} from '@cycle/dom';
function main(sources) {
return {
DOM: sources.DOM.select('.myinput').events('input')
.map(ev => ev.target.value)
.startWith('')
.map(name =>
div([
label('Name:'),
input('.myinput', {attributes: {type: 'text'}}),
hr(),
h1(`Hello ${name}`)
])
)
};
}
Cycle.run(main, {
DOM: makeDOMDriver('#main-container')
});

9. JSBIN.COM/VUGARUR/
BASIC EXAMPLE
import Cycle from '@cycle/core';
import {div, label, input, hr, h1, makeDOMDriver} from '@cycle/dom';
function main(sources) {
return {
DOM: sources.DOM.select('.myinput').events('input')
.map(ev => ev.target.value)
.startWith('')
.map(name =>
div([
label('Name:'),
input('.myinput', {attributes: {type: 'text'}}),
hr(),
h1(`Hello ${name}`)
])
)
};
}
Cycle.run(main, {
DOM: makeDOMDriver('#main-container')
});
HANDLE EVENT
GET INPUT VALUE
DEFAULT VALUE
HTML

10. JSBIN.COM/VUGARUR/
BASIC EXAMPLE
import Cycle from '@cycle/core';
import {div, label, input, hr, h1, makeDOMDriver} from '@cycle/dom';
function main(sources) {
return {
DOM: sources.DOM.select('.myinput').events('input')
.map(ev => ev.target.value)
.startWith('')
.map(name =>
div([
label('Name:'),
input('.myinput', {attributes: {type: 'text'}}),
hr(),
h1(`Hello ${name}`)
])
)
};
}
Cycle.run(main, {
DOM: makeDOMDriver('#main-container')
});
DOM..DRIVER..???

11. TEXT
DRIVER
▸ DRIVER - effect, “action”
▸ HTTP, WebSocket, User Event, Browser Event etc
▸ SINK - Observable input

12. JSBIN.COM/LELUHO
SINK
function main () {
return Rx.Observable.timer(0, 1000)
.map(i => `Seconds elapsed ${i}`);
}
function htmlEffect(text$) {
text$.subscribe(text => {
const container = document.querySelector('#main');
container.textContent = text;
})
}
function consoleEffect(msg$) {
msg$.subscribe(msg => console.log(msg));
}
const sink = main();
htmlEffect(sink);
consoleEffect(sink);
STREAM GOT INPUT
STEP BY STEP EFFECT

13. TEXT
SINK

14. TEXT
RX PLAYGROUD
HTTP://RXMARBLES.COM

15. JSBIN.COM/VUGARUR/
BASIC EXAMPLE
.map(name =>
div([
label('Name:'),
input('.myinput', {attributes: {type: 'text'}}),
hr(),
h1(`Hello ${name}`)
])
)
};
}
Cycle.run(main, {
DOM: ………..
});
CYCLE RUN

16. GITHUB.COM/CYCLEJS/CORE/BLOB/MASTER/SRC/CYCLE.JS
CYCLE.RUN
function run(main, drivers) {
if (typeof main !== `function`) {
throw new Error(`First argument given to Cycle.run() must be the 'main' ` +
`function.`) }
if (typeof drivers !== `object` || drivers === null) {
throw new Error(`Second argument given to Cycle.run() must be an object ` +
`with driver functions as properties.`) }
if (Object.keys(drivers).length === 0) {
throw new Error(`Second argument given to Cycle.run() must be an object ` +
`with at least one driver function declared as a property.`) }
let sinkProxies = makeSinkProxies(drivers)
let sources = callDrivers(drivers, sinkProxies)
let sinks = main(sources)
let subscription = replicateMany(sinks, sinkProxies).subscribe()
let sinksWithDispose = attachDisposeToSinks(sinks, subscription)
let sourcesWithDispose = attachDisposeToSources(sources)
return {sources: sourcesWithDispose, sinks: sinksWithDispose}
}

17. BASIC DEMO

18. HTTP DEMO

19. JSX MIX DEMO

20. THANK YOU
@2J2E
EU.ZHARKOV@GMAIL.COM
!

21. TEXT
RESOURCES
▸ https://jsbin.com/zizabe/
▸ https://jsbin.com/xataxe/
▸ https://jsbin.com/vugarur
▸ https://jsbin.com/dogumi
▸ egghead.io