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

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.

Matthew Phillips

January 20, 2016
Tweet

Other Decks in Technology

Transcript

  1. Your App. Done.
    Performance, Usability, Maintainability

    View full-size slide

  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!

    View full-size slide

  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

    View full-size slide

  4. Performance
    • Server Side Rendered aka Isomorphic aka Universal
    • Progressive Loading
    • Minimal Data Requests
    • Minimal DOM updates
    • Worker Thread Rendering
    • CDN Deploys

    View full-size slide

  5. Traditionally Built SPA









    View full-size slide

  6. Traditional Timeline

    View full-size slide

  7. Finally
    Ready
    Traditional Timeline

    View full-size slide

  8. Traditional Timeline
    html CSS & JS data

    View full-size slide

  9. Traditional Timeline
    html CSS & JS data

    View full-size slide

  10. Traditional Timeline









    html CSS & JS data

    View full-size slide

  11. Traditional Timeline
    html CSS & JS data

    View full-size slide

  12. Traditional Timeline
    html CSS & JS data

    View full-size slide

  13. html & data JS & CSS
    DoneJS Timeline

    View full-size slide

  14. html & data JS & CSS
    DoneJS Timeline

    View full-size slide

  15. html & data JS & CSS
    DoneJS Timeline

    View full-size slide

  16. html & data JS & CSS
    DoneJS Timeline

    View full-size slide

  17. html & data JS & CSS
    DoneJS Timeline

    View full-size slide

  18. HTML & Data JS & CSS
    HTML CSS & JS Data

    View full-size slide

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

    View full-size slide

  20. 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

    View full-size slide

  21. Add Bootstrap and Checkout
    Hot-Module-Swapping & SSR
    (2/7)

    View full-size slide

  22. Add Routing (3/7)

    View full-size slide

  23. Finish Messages Page
    (4/7)

    View full-size slide

  24. Connect Real Time Service
    (5/7)

    View full-size slide

  25. 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

    View full-size slide

  26. 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

    View full-size slide

  27. 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

    View full-size slide

  28. 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

    View full-size slide

  29. 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

    View full-size slide

  30. 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'}

    View full-size slide

  31. 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'}

    View full-size slide

  32. 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

    View full-size slide

  33. 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'
    })

    View full-size slide

  34. 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'}

    View full-size slide

  35. Finish Homepage
    (6/7)

    View full-size slide

  36. Build and Deploy
    (7/7)

    View full-size slide

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

    View full-size slide

  38. Chat
    • Server Side Rendering
    • Progressive Loading
    • Data Caching
    • CDN Deploys
    • Hot Module Swapping
    • NPM Packages
    • Custom Elements
    • Generators
    • Real Time
    • iOS, Android
    • Desktop

    View full-size slide

  39. Comprehensive Guide

    View full-size slide

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

    View full-size slide