Cycle.js - Functional reactive UI framework (Nikos Kalogridis)
0 likes503 views
Managing application state, asynchronous events and manually updating the DOM is hard. Cycle.js is a minimal framework that combines a pure functional programming style, immutability, and state management using Observables and Virtual DOM rendering. In this presentation we take a mild introduction to why that's interesting.
![MAP
Returns a new array with the result of applying a
function on each element of the array
var myArray = [1, 2, 3, 4, 5];
myArray.map(function (value) {
return value + 1;
});
// -> [2, 3, 4, 5, 6]](https://image.slidesharecdn.com/cycle-js-presentation-170612070552/85/Cycle-js-Functional-reactive-UI-framework-Nikos-Kalogridis-7-320.jpg)
![FILTER
Returns a new array with all elements that pass the
test implemented by the provided function
var myArray = [1, 2, 3, 4, 5];
myArray.filter(function (value) {
return value < 4;
});
// -> [1, 2, 3]](https://image.slidesharecdn.com/cycle-js-presentation-170612070552/85/Cycle-js-Functional-reactive-UI-framework-Nikos-Kalogridis-8-320.jpg)
![REDUCE
Reduces the elements to a single value applying a
function to each of them
var myArray = [1, 2, 3, 4, 5];
myArray.reduce(function (acc, value) {
return acc + value;
}, 0);
// -> 15](https://image.slidesharecdn.com/cycle-js-presentation-170612070552/85/Cycle-js-Functional-reactive-UI-framework-Nikos-Kalogridis-9-320.jpg)
![IMPERATIVE VS DECLARATIVE
Given an array of numbers return the numbers that
are less than 4 and add to each of those 10
var myArray = [1, 2, 3, 4, 5];
var result = [];
var i = 0;
for (i; i < myArray.length; i += 1) {
if (myArray[i] < 4) {
result.push(myArray[i] + 10);
}
}
var myArray = [1, 2, 3, 4, 5];
var result = myArray
.filter((value) => value < 4)
.map((value) => value + 10);](https://image.slidesharecdn.com/cycle-js-presentation-170612070552/85/Cycle-js-Functional-reactive-UI-framework-Nikos-Kalogridis-10-320.jpg)
![OTHER TYPES OF STREAMS
Rx.Observable.from([1, 2, 3, 4, 5])
.filter((x) => x < 4)
.map((x) => x + 10)
.subscribe({
next: (value) => console.log(value),
complete: () => console.log('done')
});
// ->
// 11
// 12
// 13
// done](https://image.slidesharecdn.com/cycle-js-presentation-170612070552/85/Cycle-js-Functional-reactive-UI-framework-Nikos-Kalogridis-26-320.jpg)
![COMBINING STREAMS
const data1$ = Rx.Observable.from([1, 2, 3]);
const data2$ = Rx.Observable.from([6, 7, 8]);
Rx.merge(data1$, data2$)
.subscribe({
next: (value) => console.log(value)
});
// ->
// 1
// 6
// 2
// 7
// 3
// 8](https://image.slidesharecdn.com/cycle-js-presentation-170612070552/85/Cycle-js-Functional-reactive-UI-framework-Nikos-Kalogridis-28-320.jpg)
![function main(sources) {
const model$ = sources
.DOM.select('.increase').events('click')
.mapTo(1).fold((acc, value) => acc + value, 0);
const vtree$ = model$.map((value) =>
div([
button('.increase', 'Increase'),
span(value)
])
);
return {DOM: vtree$};
}
Cycle.run(main, {
DOM: makeDOMDriver('#app')
});](https://image.slidesharecdn.com/cycle-js-presentation-170612070552/85/Cycle-js-Functional-reactive-UI-framework-Nikos-Kalogridis-32-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to Cycle.js - Functional reactive UI framework (Nikos Kalogridis) (20)
Ad
More from GreeceJS (19)
Ad
Recently uploaded (20)
Cycle.js - Functional reactive UI framework (Nikos Kalogridis)
- 1. CYCLE.JS A Functional reactive UI framework Nikos Kalogridis @nikoskalogridis
- 2. WHY ANOTHER FRAMEWORK? Programming is hard! Complexity of Web apps is growing exponentially Asynchronous programming complicates things even more
- 3. CYCLE.JS ANDRÉ MEDEIROS (AKA. ANDRÉ STALTZ)
- 4. CYCLE.JS FEATURES Functional Reactive Unidirectonal flow of data Virtual DOM A Cycle.js program is a pure function - no side effects
- 5. CYCLE.JS HISTORY Nov-2014 - Initial commit on github based on RxJs Nov-2015 - A fork of the project was made based most.js Jun-2016 - Merged back this time supporting xstream, Rxjs v4, Rxjs v5 and most.js TC39 Observable proposal Feb-2017 - Dropped stream adapters and now uses Observable to convert between streams. Also dropped support for Rxjs v4
- 6. FUNCTIONAL PROGRAMMING Declarative instead of imperative Pure functions Immutability
- 7. MAP Returns a new array with the result of applying a function on each element of the array var myArray = [1, 2, 3, 4, 5]; myArray.map(function (value) { return value + 1; }); // -> [2, 3, 4, 5, 6]
- 8. FILTER Returns a new array with all elements that pass the test implemented by the provided function var myArray = [1, 2, 3, 4, 5]; myArray.filter(function (value) { return value < 4; }); // -> [1, 2, 3]
- 9. REDUCE Reduces the elements to a single value applying a function to each of them var myArray = [1, 2, 3, 4, 5]; myArray.reduce(function (acc, value) { return acc + value; }, 0); // -> 15
- 10. IMPERATIVE VS DECLARATIVE Given an array of numbers return the numbers that are less than 4 and add to each of those 10 var myArray = [1, 2, 3, 4, 5]; var result = []; var i = 0; for (i; i < myArray.length; i += 1) { if (myArray[i] < 4) { result.push(myArray[i] + 10); } } var myArray = [1, 2, 3, 4, 5]; var result = myArray .filter((value) => value < 4) .map((value) => value + 10);
- 11. HIGHER ORDER FUNCTION a function that takes a function as a parameter or returns a function or both
- 12. HIGHER ORDER FUNCTION EXAMPLES function add(amount) { return function (value) { return value + amount; } } function lessThan(amount) { return function (value) { return value < amount; } } var result = myArray.filter(lessThan(4)).map(add(10));
- 13. PURE FUNCTION its return value is affected only by its passed parameters and has no side effects
- 14. PURE VS IMPURE var a = 10; function impure(x) { return x + a; } function pure(x, y) { return x + y; }
- 15. SIDE EFFECTS var a = 0; function impure(x) { a = x + a; } function impure(x) { console.log(x); return x + 1; }
- 16. ASYNCHRONOUS PROGRAMMING IN JAVASCRIPT Callbacks Promises Generators / yield Async / await Observables
- 17. CALLBACKS var counter = 0; function callback() { counter += 1; } document .getElementById('myButton') .addEventListener('click', callback); var xhr = new XMLHttpRequest(); xhr.open('GET', '/server', true); xhr.onload = function () { // Request finished. Do processing here. };
- 18. PROMISES var requestPromise = fetch({url: 'http://www.google.com'}); requestPromise .then(function (response) { // do something with the response }) .catch(function (error) { // handle the error });
- 19. GENERATORS / YIELD function* foo () { var index = 0; while (index < 2) { yield index++; } } var bar = foo(); console.log(bar.next()); // { value: 0, done: false } console.log(bar.next()); // { value: 1, done: false } console.log(bar.next()); // { value: undefined, done: true }
- 20. ASYNC / AWAIT async function save(Something) { try { await Something.save(); } catch (ex) { //error handling } console.log('success'); }
- 21. OBSERVABLE // data$ is an Observable object var subscription = data$.subscribe( { next: function (value) { // handle next value }, error: function (error) { // handle error }, complete: function () { // finished so do cleanup... } } );
- 22. REACTIVE PROGRAMMING is programming with data streams (synchronous or asynchronous) on top of that you are given an amazing toolbox of functions to combine, create, filter any of those streams
- 24. RXJS EXAMPLE import Rx from 'rxjs/Rx'; let counter = 0; const increaseButton = document.querySelector('#increase'); const increaseClick$ = Rx.Observable.fromEvent(increaseButton, 'click'); increaseClick$.subscribe({ next: function () { // click received counter += 1; console.log(counter); } });
- 25. RXJS EXAMPLE REVISED import Rx from 'rxjs/Rx'; const increaseButton = document.querySelector('#increase'); const increaseClick$ = Rx.Observable.fromEvent(increaseButton, 'click'); const counter$ = increaseClick$ .mapTo(1) // always maps to a constant value .scan((acc, value) => acc + value, 0); // hint: reduce counter$.subscribe({ next: function (counter) { // new count event received console.log(counter); } });
- 26. OTHER TYPES OF STREAMS Rx.Observable.from([1, 2, 3, 4, 5]) .filter((x) => x < 4) .map((x) => x + 10) .subscribe({ next: (value) => console.log(value), complete: () => console.log('done') }); // -> // 11 // 12 // 13 // done
- 27. PROMISE AS A STREAM const myPromise = new Promise((resolve) => resolve('hello')); Rx.Observable.from(myPromise) .subscribe({ next: (value) => console.log(value), complete: () => console.log('done') }); // -> // hello // done
- 28. COMBINING STREAMS const data1$ = Rx.Observable.from([1, 2, 3]); const data2$ = Rx.Observable.from([6, 7, 8]); Rx.merge(data1$, data2$) .subscribe({ next: (value) => console.log(value) }); // -> // 1 // 6 // 2 // 7 // 3 // 8
- 29. MERGE OPERATOR
- 31. A CYCLE.JS PROGRAM IS A PURE FUNCTION function cycleProgram(sources) { return sinks; }
- 32. function main(sources) { const model$ = sources .DOM.select('.increase').events('click') .mapTo(1).fold((acc, value) => acc + value, 0); const vtree$ = model$.map((value) => div([ button('.increase', 'Increase'), span(value) ]) ); return {DOM: vtree$}; } Cycle.run(main, { DOM: makeDOMDriver('#app') });
- 33. NO SIDE EFFECTS Sources Sinks main() DOM side effects HTTP side effects Other side effects pure dataflow
- 34. IN CYCLE.JS
- 35. DEMO
- 36. PROS Truly reactive programming style Declarative UI design Fast - thanks to Snabdom and xstream Fractal state management
- 37. CONS Brain rewiring for using functional reactive style Relatively small community compared to React or Angular Steep learning curve especially on stream libraries Lacks a complete UI component library (as of today)
- 39. QUESTIONS
- 40. THANK YOU