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

Building fast single page apps with DoneJS

Matthew Phillips
January 20, 2016
Technology
0
170

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

See All in Technology
プロダクト開発者目線での Entra ID 活用
sansantech
PRO
0
270
エンジニア主導の企画立案を可能にする組織とは？
recruitengineers
PRO
1
360
StotybookからはじめるVRT -個人開発編-
arrow2nd
1
210
人生を左右する「即答」のススメ: 一瞬の判断を間違えないためにするべきこと
takasyou
9
1.3k
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
8
2k
AI自体のOps 〜LLMアプリの運用、AWSサービスとOSSの使い分け〜
minorun365
PRO
10
1.4k
Qiita Organizationを導入したら、アウトプッターが爆増して会社がちょっと有名になった件
minorun365
PRO
1
390
スクラムというコンフォートゾーンから抜け出そう！プロジェクト全体に目を向けるインセプションデッキ / Inception Deck for seeing the whole project
takaking22
4
360
AI-Driven-Development-20250310
yuhattor
3
330
やっぱり余白が大切だった話
kakehashi
PRO
2
250
x86-64 Assembly Essentials
latte72
4
890
Linuxのブートプロセス
sat
PRO
6
100

Featured

See All Featured
Side Projects
sachag
452
42k
Producing Creativity
orderedlist
PRO
344
40k
Designing Experiences People Love
moore
140
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Building Your Own Lightsaber
phodgson
104
6.3k
The Cult of Friendly URLs
andyhume
78
6.2k
Writing Fast Ruby
sferik
628
61k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
RailsConf 2023
tenderlove
29
1k
Art, The Web, and Tiny UX
lynnandtonic
298
20k

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