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
150

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
APIファーストなプロダクトマネジメントの実践 〜SaaSus Platformでの例〜 / "Practicing API-First Product Management - An Example with SaaSus Platform
oztick139
0
110
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
4
440
Além do else! Categorizando Pokemóns com Pattern Matching no JavaScript
wmsbill
0
630
リテール金融（キャッシュレス・ネット銀行・ネット証券）の競争環境と経済圏
8maki
0
1.2k
アクセス制御にまつわる改善 / Improving access control
itkq
0
550
Python と Snowflake はズッ友だょ！~ Snowflake の Python 関連機能をふりかえる ~
__allllllllez__
1
120
地理空間データ可視化・解析・活用ソリューション Pacific Spatial Solutions （PSS）
pacificspatialsolutions
0
290
Azureの基本的な権限管理の勉強会
yhana
0
580
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
360
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
1k
開発生産性大幅アップ！Postman VS Code拡張機能
nagix
2
380
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
760

Featured

See All Featured
Git: the NoSQL Database
bkeepers
PRO
422
63k
Debugging Ruby Performance
tmm1
70
11k
[RailsConf 2023] Rails as a piece of cake
palkan
23
4k
4 Signs Your Business is Dying
shpigford
175
21k
Six Lessons from altMBA
skipperchong
21
3k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k

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