Thinking Reactive while writing JavaScript

Talk about Reactive programming in JavaScript. What is reactive programming, what are our choices, how to make React reactive, intro to Cycle.js

Transcript

1. Thinking Reactive while writing
2. Ivan Jovanovic Senior software engineer @ Welltok ivanjov.com @ivanjov96
3. What is Reactive programming?
4. –André Staltz “Reactive programming is programming with asynchronous data streams.”
5. What is Data Stream?
6. “Data stream is an endless sequence of digital signals (data packets)”
7. Data stream 10 20 30 40 50 60
8. In JavaScript, Reactive programming is abstraction of all async processes into the data streams
9. buffer(clickStream.throttle(500ms))
10. map(‘get size of the buffer’) 1 2 3
11. filter(number >= 2) 2 3 1 2 3
12. Why I need this reactive thing?
13. • External service calls • Better performance • Highly testable • Abstraction over all async processes • Predictable code • Extendable code
14. Observable Observable is official terminology for the stream
15. Reactive programming in JS • RxJS - the most popular, biggest • MostJS - best performance • Bacon.js • XStream - the smallest
17. • Data flow • Side effects • Functional programming
18. +
19. + +
21. André Staltz Creator of Cycle.js
22. –Cycle.js official website “A functional and reactive JavaScript framework for predictable code”
23. • Data flow • Side effects • Functional programming
24. Features • Functional (just write pure functions) • Reactive • Testable • Composable • Explicit dataflow • Made for large codebases
25. Image taken from cycle.js.org
26. run(app, drivers);
27. Drivers - side effects • HTTP • DOM • WebSockets • Local storage driver • HTML5 Notifications driver • …
28. 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`
29. Model-View-Intent
30. Simple counter app
31. 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') });
33. 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$, }; }
34. Intent const action$ = xs.merge( sources.DOM.select('.decrement').events('click').map(ev => -1), sources.DOM.select('.increment').events('click').map(ev => +1) );
35. Model const count$ = action$.fold((acc, x) => acc + x, 0);
36. View const vdom$ = count$.map(count => div([ button('.decrement', 'Decrement'), button('.increment', 'Increment'), p('Counter: ' + count) ]) );
38. 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) ]) );
39. Handling HTTP requests
40. import { makeHTTPDriver } from ‘@cycle/http'; function main(sources) { const request$ = xs.periodic(1000) .mapTo({ url: 'http://localhost:3000', category: 'api', }); const vdom$ = sources.HTTP.select('api') .flatten() .map(res => res.body) .startWith({ response: ‘’ }) .map(result => div([ h2('.label', `Response from the server: ${result.response}`) ]) ); return { DOM: vdom$, HTTP: request$ }; } run(main, { DOM: makeDOMDriver('#main'), HTTP: makeHTTPDriver() });
41. function main(sources) { const request$ = xs.periodic(1000) .mapTo({ url: 'http://localhost:3000', category: 'api', }); const vdom$ = sources.HTTP.select('api') .flatten() .map(res => res.body) .startWith({ response: ‘’ }) .map(result => div([ h2('.label', `Response: ${result.response}`) ]) ); return { DOM: vdom$, HTTP: request$ }; }
42. const request$ = xs.periodic(1000) .mapTo({ url: 'http://localhost:3000', category: 'api', });
43. const vdom$ = sources.HTTP.select('api') .flatten() .map(res => res.body) .startWith({ response: '' }) .map(result => div([ h2('.label', `Response: ${result.response}`) ]) );
44. Working with components
46. import isolate from '@cycle/isolate'; const sources = {DOM: sources.DOM}; const childComponent = isolate(Component)(sources); const childComponentVDom$ = childComponent.DOM; const childComponentValue$ = childComponent.value;
47. Cycle.js Cons • Community • Learning new paradigm • Some apps don’t need to be reactive
48. Conclusion • Old paradigm with the new usage • Not for everyone • Perfect for real time apps that require high performance • Testable, predictable code • One interface for all async processes
49. Next? https://cycle.js.org/
50. Thank you Blog ivanjov.com Twitter @ivanjov96