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.

Transcript

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

   View 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 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 Slide

4. View Slide

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

   View Slide

6. Traditionally Built SPA
   
   
   
   
   
   
   
   
   
   

   View Slide

7. Traditional Timeline
   

   View Slide

8. Finally
   Ready
   Traditional Timeline
   

   View Slide

9. Traditional Timeline
   html CSS & JS data
   

   View Slide

10. Traditional Timeline
    html CSS & JS data
    

    View Slide

11. Traditional Timeline
    
    
    
    
    
    
    
    
    
    html CSS & JS data
    

    View Slide

12. Traditional Timeline
    html CSS & JS data
    

    View Slide

13. Traditional Timeline
    html CSS & JS data
    

    View Slide

14. html & data JS & CSS
    DoneJS Timeline
    

    View Slide

15. html & data JS & CSS
    DoneJS Timeline
    

    View Slide

16. html & data JS & CSS
    DoneJS Timeline
    

    View Slide

17. html & data JS & CSS
    DoneJS Timeline
    

    View Slide

18. html & data JS & CSS
    DoneJS Timeline
    

    View Slide

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

    View Slide

20. View Slide

21. View Slide

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

    View Slide

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
    

    View Slide

24. Setup (1/7)
    

    View Slide

25. View Slide

26. View Slide

27. View Slide

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

    View Slide

29. View Slide

30. View Slide

31. View Slide

32. Add Routing (3/7)
    

    View Slide

33. 
    
    

    View Slide

34. View Slide

35. View Slide

36. Finish Messages Page
    (4/7)
    

    View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. Set logic!
    

    View Slide

42. Connect Real Time Service
    (5/7)
    

    View Slide

43. View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

54. Finish Homepage
    (6/7)
    

    View Slide

55. View Slide

56. Build and Deploy
    (7/7)
    

    View Slide

57. View Slide

58. View Slide

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

    View Slide

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

    View Slide

61. View Slide

62. View Slide

63. Comprehensive Guide
    

    View Slide

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

    View Slide