Thinking Reactive in Javascript - WebRebels 2018

Thinking Reactive in Javascript - WebRebels 2018

Transcript

1. Thinking Reactive in @ivanjov96
2. Why I created this talk?
7. Reactive programming!
13. People didn’t see the point of the article!
15. Ivan Jovanovic Senior software engineer @ nearForm https://ivanjov.com @ivanjov96
16. What is Reactive programming?
17. –André Staltz “Reactive programming is programming with asynchronous data streams.”
18. What is Data Stream?
19. “Data stream is an endless sequence of digital signals (data packets)”
20. Data stream 10 20 30 40 50 60
21. In JavaScript, Reactive programming is abstraction of all async processes into the data streams
22. buffer(clickStream.throttle(500ms))
23. map(‘get size of the buffer’) 1 2 3
24. filter(number >= 2) 2 3 1 2 3
25. Why do I need this reactive thing?
26. • External service calls • Better performance • Highly testable • Abstraction over all async processes • Predictable code • Extendable code
27. Observable Observable is official terminology for the stream
28. Observer Observer subscribes to an observable and reacts to whatever item or sequence of items the observable emits.
29. Reactive programming in JS • RxJS - the most popular, the biggest • MostJS - the best performance • Bacon.js • XStream - the smallest
31. • Data flow • Side effects • Functional programming React cons
32. +
33. + +
35. –Cycle.js official website “A functional and reactive JavaScript framework for predictable code”
36. • Data flow • Side effects • Functional programming Cycle.js pros
37. Features • Functional (just write pure functions) • Reactive • Testable • Composable • Explicit dataflow • Made for large codebases
38. Image taken from cycle.js.org
39. run(app, drivers)
40. Drivers - side effects • HTTP • DOM • WebSockets • Local storage driver • HTML5 Notifications driver • …
41. 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 • Run - `run` function for apps made with `xstream` • Most-run - `run` function for apps made with `most` • RxJS-run - `run` function for apps made with `rxjs`
42. Model-View-Intent
43. Simple counter app
47. Intent
48. Model
49. View
51. View + CSS
52. Handling HTTP requests
56. Working with components
59. Cycle.js Cons • Community • Learning new paradigm • Some apps don’t need to be reactive
60. 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
61. Next? https://cycle.js.org/
63. http://rxmarbles.com
65. Thank you Blog ivanjov.com Twitter @ivanjov96