Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Thinking Reactive in JavaScript - Sphere.it JS Krakow

Thinking Reactive in JavaScript - Sphere.it JS Krakow

4ff4d0c579ce1bdbe505d8317e158a20?s=128

Ivan Jovanovic

October 09, 2019
Tweet

Transcript

  1. Thinking Reactive in @ivanjov96

  2. Why I created this talk?

  3. None
  4. None
  5. None
  6. None
  7. Reactive programming!

  8. None
  9. None
  10. None
  11. None
  12. None
  13. People didn’t see the point of the article!

  14. None
  15. Ivan Jovanovic https://ivanjov.com @ivanjov96 IJ Consulting https://jsremotely.com

  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
  30. None
  31. • Data flow • Side effects • Functional programming React

    cons
  32. +

  33. + +

  34. None
  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

  44. None
  45. None
  46. None
  47. Intent

  48. Model

  49. View

  50. None
  51. View + CSS

  52. Handling HTTP requests

  53. None
  54. None
  55. None
  56. Working with components

  57. None
  58. None
  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/

  62. None
  63. http://rxmarbles.com

  64. None
  65. Thank you Blog ivanjov.com Twitter @ivanjov96