develop a vanilla.js spa you and your customers will love
TRANSCRIPT
![Page 1: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/1.jpg)
Develop a Vanilla.js SPA you and your
customers will love
Chris Love@ChrisLove
Love2Dev.com
![Page 2: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/2.jpg)
Who Am I• Microsoft MVP• ASP Insider• Edge User Agent• Author• Speaker• Tweaker, Lover of Web, JavaScript, CSS & HTML5• @ChrisLove• Love2Dev.com
![Page 3: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/3.jpg)
High Performance Single Page Web Applications• Responsive Design• Touch• Mobile First• SPA• Extensible, Scalable Architecture• Web Build and Workflow• Goes Really Fast!
• ~395 Pages• 20 Chapters• $9.99 http://amzn.to/1a55L89
BUY NOW!
![Page 4: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/4.jpg)
Slide Deck & Source Code• Slide Deck – http://slideshare.net/docluv• Source Code – http://github.com/docluv
![Page 5: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/5.jpg)
Let Me Take You On A Journey
![Page 6: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/6.jpg)
The jQueryUI Dialog
![Page 7: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/7.jpg)
The jQueryUI Dialog Markup
![Page 8: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/8.jpg)
The jQueryUI Dialog Markup
![Page 9: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/9.jpg)
My First Big SPA Experience
0 to 400 Views
Modular & Extensible
4 MonthsNothing To Reference
![Page 10: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/10.jpg)
Lessons Learned
Can’t Load Everything At Once
Mobile MattersTest Over Sprint 3G
![Page 11: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/11.jpg)
Let’s Call it A Single Page Application
![Page 12: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/12.jpg)
A SPA Is All InclusiveViews/
Pages
CSS/StylesJavaScriptJS
![Page 13: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/13.jpg)
A SPA Leverages
AJAX/Sockets
Storage
Hash Fragment
#
![Page 14: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/14.jpg)
Mobile Browsers
Aggressively Purge Cache
Weaker ProcessorsLess Memory
![Page 15: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/15.jpg)
Cellular Connections
Slower
More ExpensiveUnreliable
![Page 16: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/16.jpg)
The Web Is Obese100 Files Requests – 2.2MB22 JavaScript Files - 354KB7.4 CSS Files – 71KB54 Images – 1.4MB2.9 Fonts – 111kb39 TCP Connections18 Domains48% Cacheable http://httpArchive.org
![Page 17: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/17.jpg)
Cant Use Fast Food Frameworks
![Page 18: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/18.jpg)
Cant Use Fast Food Frameworks
![Page 19: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/19.jpg)
Dumping jQuery & What it means
• Faster Load Times• Master DOM APIs• Alternatives• Create DollarBill • Learn to be Modular
• And Yes This Was Painful• For about 2 weeks
• But Was A Great Experience
![Page 20: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/20.jpg)
Fast Food Frameworks Are Bad
Full of Processed Carbs
Loaded With Preservatives
Syntactic Sugar
![Page 21: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/21.jpg)
MicroJS LibrariesSmall
Promote Modular Architecture
Single Focus
![Page 22: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/22.jpg)
•Performance•Modularity•Small Footprint•Scalability•Maintainability•Long Lifespan
Architecture Goals
![Page 23: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/23.jpg)
The Modern Web Hour GlassHTML5
JavaScriptCSS3 Web Server
DB – SQL Server/ NoSQL
![Page 24: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/24.jpg)
Application Loading Process
The 1st Time a User Visits They ‘Install’ the Application
![Page 25: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/25.jpg)
•The Initial Request•Contains Critical Path Assets•Master Layout HTML + CSS Inline• Initial Possible Views• Initial View’s CSS• Core Application JavaScript + Initial View’s Controllers
Application Loading Process
![Page 26: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/26.jpg)
•Deferred Request(s)•Contains Additional View HTML, CSS and JavaScript
Application Loading Process
![Page 27: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/27.jpg)
SPA PARTSRoutingCachingDataRendering
![Page 28: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/28.jpg)
APIWe b A p p l i c a t i o n
A J A X
S PA
C A C H E
D ATA A P P
V I E WV I E WV I E WV I E WV I E WC o n t r o l l e r
V i e w E n g i n e
Te m p l a t e E n g i n e
![Page 29: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/29.jpg)
Markup Management
•Keep the DOM Lean•Leverage Browser Storage to Persist Markup• http://bit.ly/H2qhZ2
![Page 30: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/30.jpg)
View Engine – Cache Markup
•Parses Markup For Views & Templates
•Stores All Markup Related Concerns in Storage
•Retrieves View Markup On Demand
•Abstracts Templating or Binding Library
![Page 31: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/31.jpg)
View Engine – Lazy Loading
•Reduces Initial Load•Enables 14kb Goal•View Engine Still Parses Markup & Caches•Also caches and injects CSS & Script References
![Page 32: Develop a vanilla.js spa you and your customers will love](https://reader035.vdocuments.site/reader035/viewer/2022070516/586fd3d91a28ab18428b4633/html5/thumbnails/32.jpg)
Questions