Download to read offline
![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/75/Cycle-js-Functional-reactive-UI-framework-Nikos-Kalogridis-7-2048.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/75/Cycle-js-Functional-reactive-UI-framework-Nikos-Kalogridis-8-2048.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/75/Cycle-js-Functional-reactive-UI-framework-Nikos-Kalogridis-9-2048.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/75/Cycle-js-Functional-reactive-UI-framework-Nikos-Kalogridis-10-2048.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/75/Cycle-js-Functional-reactive-UI-framework-Nikos-Kalogridis-26-2048.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/75/Cycle-js-Functional-reactive-UI-framework-Nikos-Kalogridis-28-2048.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/75/Cycle-js-Functional-reactive-UI-framework-Nikos-Kalogridis-32-2048.jpg)
Uploaded byGreeceJS
Cycle.js - Functional reactive UI framework (Nikos Kalogridis)
Cycle.js is a functional reactive UI framework that emphasizes unidirectional data flow, immutability, and pure functions. It has evolved through various versions since its initial commit in 2014, incorporating features like observable streams for better asynchronous programming. While it offers a truly reactive programming style with a declarative UI design, it presents a steep learning curve and lacks a comprehensive component library.
Cycle.js - Functional reactive UI framework (Nikos Kalogridis)
- 1. CYCLE.JS A Functional reactiveUI framework Nikos Kalogridis @nikoskalogridis
- 2. WHY ANOTHER FRAMEWORK? Programmingis 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 flowof 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 insteadof imperative Pure functions Immutability
- 7. MAP Returns a newarray 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 newarray 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 elementsto 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 Givenan 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 afunction that takes a function as a parameter or returns a function or both
- 12. HIGHER ORDER FUNCTION EXAMPLES functionadd(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 returnvalue is affected only by its passed parameters and has no side effects
- 14. PURE VS IMPURE vara = 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 asyncfunction save(Something) { try { await Something.save(); } catch (ex) { //error handling } console.log('success'); }
- 21. OBSERVABLE // data$ isan 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 programmingwith 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
- 23.
- 24. RXJS EXAMPLE import Rxfrom '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 importRx 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 OFSTREAMS 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 ASTREAM 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.
- 30.
- 31. A CYCLE.JS PROGRAMIS A PURE FUNCTION function cycleProgram(sources) { return sinks; }
- 32. function main(sources) { constmodel$ = 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() DOMside effects HTTP side effects Other side effects pure dataflow
- 34.
- 35.
- 36. PROS Truly reactive programmingstyle Declarative UI design Fast - thanks to Snabdom and xstream Fractal state management
- 37. CONS Brain rewiring forusing 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)
- 38.
- 39.
- 40.