Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Reactive JavaScript framework Milo.js

4,583 views

Published on

Talk at FullStackCon about Milo.js framework (https://github.com/MailOnline/milo), video: https://skillsmatter.com/skillscasts/5857-milo-the-reactive-javascript-framework

Published in: Software

Reactive JavaScript framework Milo.js

  1. 1. Reactive programming with Milo.js framework Jason Green & Evgeny Poberezkin
  2. 2. Aren’t there enough?
  3. 3. Milo is different • Modular components • The most advanced reactive programming
  4. 4. Reactive programming x := y + 1
  5. 5. DOM as data
  6. 6. A typical user
  7. 7. A typical user
  8. 8. Components
  9. 9. Container Component Data List Dom Item
  10. 10. Models
  11. 11. Safe deep property access
  12. 12. Property access
  13. 13. Property access
  14. 14. Safe property access
  15. 15. Safe property access
  16. 16. Model Path
  17. 17. Model Path
  18. 18. Model Path
  19. 19. Accessing array elements
  20. 20. Accessing array elements
  21. 21. Accessing array elements
  22. 22. Subscribing to changes
  23. 23. Subscribing to changes
  24. 24. Subscribing to changes
  25. 25. Subscribing to changes
  26. 26. Subscribing to changes
  27. 27. Subscribing to changes
  28. 28. How did we make it work?
  29. 29. Constructor returning functions
  30. 30. Creating access methods Template render Code eval Function
  31. 31. Creating access methods
  32. 32. Creating access methods
  33. 33. Is eval evil?
  34. 34. Only if used wrongly
  35. 35. Property interpolation
  36. 36. Property interpolation
  37. 37. Connectors
  38. 38. Data connection Data source Data source Connector subscription subscription Data sources: • Models: var m = new Model; • Model paths: var mPath = m('.info.name'); • Data facet: comp.data;
  39. 39. Application architecture
  40. 40. Problem: Fat Controller
  41. 41. MailOnline CMS
  42. 42. milo.minder.getConnectors().length == ?
  43. 43. milo.minder.getConnectors().length == 87
  44. 44. Fork, play, contribute: https://github.com/MailOnline/milo http://goo.gl/XCtVW9 https://github.com/jasoniangreen @aziraphael https://github.com/epoberezkin @epoberezkin

×