Digging into Cycle.js

Introduction to Cycle.js framework

Transcript

1. Digging into Cycle.js
2. Ivan Jovanovic Full stack web developer ivanjov.com
4. What is Reactive programming?
5. –André Staltz “Reactive programming is programming with asynchronous data streams.”
6. Data stream 10 20 30 40 50 60
8. Observable Observable is official terminology for the stream
9. Reactive programming in JS • RxJS • MostJS • Bacon.js • XStream
11. André Staltz Creator of Cycle.js
12. –Cycle.js official website “A functional and reactive JavaScript framework for predictable code”
13. Features • Functional (just write pure functions) • Reactive • Testable • Composable • Explicit dataflow • Made for large codebases
15. run(app, drivers);
16. Drivers - side effects • HTTP • DOM • WebSockets • Local storage driver • HTML5 Notifications driver • …
17. 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`
18. Model-View-Intent
19. Simple counter app
20. 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') });
21. 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$, }; }
22. Intent const action$ = xs.merge( sources.DOM.select('.decrement').events('click').map(ev => -1), sources.DOM.select('.increment').events('click').map(ev => +1) );
23. Model const count$ = action$.fold((acc, x) => acc + x, 0);
24. View const vdom$ = count$.map(count => div([ button('.decrement', 'Decrement'), button('.increment', 'Increment'), p('Counter: ' + count) ]) );
25. 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) ]) );
26. Handling HTTP requests
27. import {makeHTTPDriver} from ‘@cycle/http'; function main(sources) { const request$ = xs.periodic(1000) .mapTo({ url: 'http://localhost:3000', category: 'api', }); const vtree$ = sources.HTTP.select('api') .flatten() .map(res => res.body) .startWith({ response: ‘’ }) .map(result => div([ h2('.label', `Response from the server: ${result.response}`) ]) ); return { DOM: vtree$, HTTP: request$ }; } run(main, { DOM: makeDOMDriver('#main'), HTTP: makeHTTPDriver() });
28. function main(sources) { const request$ = xs.periodic(1000) .mapTo({ url: 'http://localhost:3000', category: 'api', }); const vtree$ = sources.HTTP.select('api') .flatten() .map(res => res.body) .startWith({ response: ‘’ }) .map(result => div([ h2('.label', `Response from the server: ${result.response}`) ]) ); return { DOM: vtree$, HTTP: request$ }; }
29. const request$ = xs.periodic(1000) .mapTo({ url: 'http://localhost:3000', category: 'api', });
30. const vtree$ = sources.HTTP.select('api') .flatten() .map(res => res.body) .startWith({ response: '' }) .map(result => div([ h2('.label', `Response from the server: ${result.response}`) ]) );
31. Working with components
33. function LabeledSlider(sources) { const domSource = sources.DOM; const props$ = sources.props; const newValue$ = domSource .select('.slider') .events('input') .map(ev => ev.target.value); const state$ = props$ .map(props => newValue$ .map(val => ({ label: props.label, unit: props.unit, min: props.min, value: val, max: props.max })) .startWith(props) ); const vdom$ = state$ .map(state => div('.labeled-slider', [ span('.label', `${state.label} ${state.value}${state.unit}` ), input('.slider', { attrs: {type: 'range', min: state.min, max: state.max, value: state.value} }) ]) ); const sinks = { DOM: vdom$, value: state$.map(state => state.value), }; return sinks; }
34. import isolate from '@cycle/isolate'; const sliderSources = {DOM: sources.DOM, props: sliderProps$}; const slider = isolate(LabeledSlider)(sliderSources); const sliderVDom$ = slider.DOM; const sliderValue$ = slider.value;
35. Next? Egghead
36. Questions?