Building fast single page apps with DoneJS

Building fast single page apps with DoneJS

earn how to build the fastest single page applications with DoneJS (http://donejs.com). This talk details some most important performance techniques used in single page applications like: server side rendering, progressively loading optimized bundles, and use of content delivery networks. We will discover how DoneJS solves these problems while building a simple real-time chat application.

4394f414f0d4a043ad5e8fa261fa2953?s=128

Matthew Phillips

January 20, 2016
Tweet

Transcript

  1. 2.

    FAQ • Open Source JavaScript framework (MIT) • Backend services

    agnostic • Built on top of: • StealJS (SystemJS) • CanJS (jQuery, Zepto, Dojo, or Mootools) • Testee (FuncUnit; Syn; QUnit, Mocha, or Jasmine) • DocumentJS • can-connect (can-set) • can-ssr (can-simple-dom; NodeJS) • IE8 Support • Windows, Linux, OSX • Node 5, 4, 0.12, IoJS • Not a new framework!
  2. 3.

    • Server Side Rendering • Progressive Loading • Data Caching

    • Minimal DOM Updates • Worker Rendering • CDN Deploys • Comprehensive Testing • Hot Module Swapping • CI & CD • ES6 Modules • NPM Packages • Modlets • Custom Elements • MVVM • Generators • Real Time • Two-way Routing • IE8+ • iOS, Android • Desktop Performance Maintainability Usability
  3. 4.
  4. 5.

    Performance • Server Side Rendered aka Isomorphic aka Universal •

    Progressive Loading • Minimal Data Requests • Minimal DOM updates • Worker Thread Rendering • CDN Deploys
  5. 6.

    Traditionally Built SPA <html> <head> <link href="production.css" rel="stylesheet"/> </head> <body>

    <img src="loading.png"/> <script src="production.js"></script> </body> </html>
  6. 11.

    Traditional Timeline <html> <head> <link href="production.css" rel="stylesheet"/> </head> <body> <img

    src="loading.png"/> <script src="production.js"></script> </body> </html> html CSS & JS data
  7. 20.
  8. 21.
  9. 22.

    Chat • Server Side Rendering • Progressive Loading • Data

    Caching • CDN Deploys • Hot Module Swapping • NPM Packages • Custom Elements • Generators • Real Time
  10. 23.

    Steps 1. Setup 2. Add Bootstrap and checkout “Hot Module

    Swapping” and SSR 3. Add routing 4. Finish messages page 5. Connect real time service 6. Finish homepage 7. Build and Deploy
  11. 25.
  12. 26.
  13. 27.
  14. 29.
  15. 30.
  16. 31.
  17. 34.
  18. 35.
  19. 37.
  20. 38.
  21. 39.
  22. 40.
  23. 43.
  24. 44.

    New new 1 new 2 todoConnection.getList({type: 'new'}) todoConnection.getList({type: 'assigned'}) [{id:

    1,…},{id: 2,…}] [{id: 3,…},{id: 4,…}] Assigned assigned 3 assigned 4 real-time behavior
  25. 45.

    New new 1 new 2 todoConnection.getList({type: 'new'}) todoConnection.getList({type: 'assigned'}) [{id:

    1,…},{id: 2,…}] [{id: 3,…},{id: 4,…}] Assigned assigned 3 assigned 4 real-time behavior
  26. 46.

    New new 1 new 2 todoConnection.getList({type: 'new'}) todoConnection.getList({type: 'assigned'}) [{id:

    1,…},{id: 2,…}] [{id: 3,…},{id: 4,…}] Assigned assigned 3 assigned 4 {type: 'assigned'} {type: 'new'} real-time behavior
  27. 47.

    New new 1 new 2 [{id: 1,…},{id: 2,…}] [{id: 3,…},{id:

    4,…}] Assigned assigned 3 assigned 4 {type: 'assigned'} {type: 'new'} real-time behavior
  28. 48.

    New new 1 new 2 [{id: 1,…},{id: 2,…}] [{id: 3,…},{id:

    4,…}] Assigned assigned 3 assigned 4 {type: 'assigned'} {type: 'new'} listStore real-time behavior
  29. 49.

    New new 1 new 2 Assigned assigned 3 assigned 4

    listStore todoConnection.updateInstance({ id: 2, type: 'assigned' }) real-time behavior [{id: 1,…},{id: 2,…}] [{id: 3,…},{id: 4,…}] {type: 'assigned'} {type: 'new'}
  30. 50.

    New new 1 new 2 [{id: 3,…},{id: 4,…}, ] Assigned

    assigned 3 assigned 4 listStore real-time behavior todoConnection.updateInstance({ id: 2, type: 'assigned' }) [{id: 1,…},{id: 2,…}] {type: 'assigned'} {type: 'new'}
  31. 51.

    New new 1 new 2 Assigned assigned 3 assigned 4

    listStore real-time behavior todoConnection.updateInstance({ id: 2, type: 'assigned' }) todoConnection.updateInstance({ id: 2, type: 'assigned' }) [{id: 1,…}] [{id: 3,…},{id: 4,…},{id: 2,…}] {type: 'assigned'} {type: 'new'} listStore
  32. 52.

    New new 1 new 2 [{id: 1,…}] [{id: 3,…},{id: 4,…},{id:

    2,…}] Assigned assigned 3 assigned 4 {type: 'assigned'} {type: 'new'} listStore real-time behavior todoConnection.updateInstance({ id: 2, type: 'assigned' })
  33. 53.

    New new 1 new 2 [{id: 1,…}] [{id: 3,…},{id: 4,…},{id:

    2,…}] Assigned assigned 3 assigned 4 {type: 'assigned'} listStore todoConnection.updateInstance({ id: 2, type: 'assigned' }) assigned 2 real-time behavior {type: 'new'}
  34. 55.
  35. 57.
  36. 58.
  37. 59.

    Chat • Server Side Rendering • Progressive Loading • Data

    Caching • CDN Deploys • Hot Module Swapping • NPM Packages • Custom Elements • Generators • Real Time
  38. 60.

    Chat • Server Side Rendering • Progressive Loading • Data

    Caching • CDN Deploys • Hot Module Swapping • NPM Packages • Custom Elements • Generators • Real Time • iOS, Android • Desktop
  39. 61.
  40. 62.