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. Your App. Done. Performance, Usability, Maintainability

  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!
  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
  4. None
  5. Performance • Server Side Rendered aka Isomorphic aka Universal •

    Progressive Loading • Minimal Data Requests • Minimal DOM updates • Worker Thread Rendering • CDN Deploys
  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>
  7. Traditional Timeline

  8. Finally Ready Traditional Timeline

  9. Traditional Timeline html CSS & JS data

  10. Traditional Timeline html CSS & JS data

  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
  12. Traditional Timeline html CSS & JS data

  13. Traditional Timeline html CSS & JS data

  14. html & data JS & CSS DoneJS Timeline

  15. html & data JS & CSS DoneJS Timeline

  16. html & data JS & CSS DoneJS Timeline

  17. html & data JS & CSS DoneJS Timeline

  18. html & data JS & CSS DoneJS Timeline

  19. HTML & Data JS & CSS HTML CSS & JS

    Data
  20. None
  21. None
  22. Chat • Server Side Rendering • Progressive Loading • Data

    Caching • CDN Deploys • Hot Module Swapping • NPM Packages • Custom Elements • Generators • Real Time
  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
  24. Setup (1/7)

  25. None
  26. None
  27. None
  28. Add Bootstrap and Checkout Hot-Module-Swapping & SSR (2/7)

  29. None
  30. None
  31. None
  32. Add Routing (3/7)

  33. <chat-messages> <chat-home>

  34. None
  35. None
  36. Finish Messages Page (4/7)

  37. None
  38. None
  39. None
  40. None
  41. Set logic!

  42. Connect Real Time Service (5/7)

  43. None
  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
  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
  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
  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
  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
  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'}
  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'}
  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
  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' })
  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'}
  54. Finish Homepage (6/7)

  55. None
  56. Build and Deploy (7/7)

  57. None
  58. None
  59. Chat • Server Side Rendering • Progressive Loading • Data

    Caching • CDN Deploys • Hot Module Swapping • NPM Packages • Custom Elements • Generators • Real Time
  60. Chat • Server Side Rendering • Progressive Loading • Data

    Caching • CDN Deploys • Hot Module Swapping • NPM Packages • Custom Elements • Generators • Real Time • iOS, Android • Desktop
  61. None
  62. None
  63. Comprehensive Guide

  64. • http://donejs.com • http://github.com/donejs/donejs • @donejs • http://www.meetup.com/DoneJS-Louisville