develop a vanilla.js spa you and your customers will love

Develop a Vanilla.js SPA you and your

customers will love

Chris Love@ChrisLove

Love2Dev.com

Who Am I• Microsoft MVP• ASP Insider• Edge User Agent• Author• Speaker• Tweaker, Lover of Web, JavaScript, CSS & HTML5• @ChrisLove• Love2Dev.com

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!

Slide Deck & Source Code• Slide Deck – http://slideshare.net/docluv• Source Code – http://github.com/docluv

Let Me Take You On A Journey

The jQueryUI Dialog

The jQueryUI Dialog Markup

The jQueryUI Dialog Markup

My First Big SPA Experience

0 to 400 Views

Modular & Extensible

4 MonthsNothing To Reference

Lessons Learned

Can’t Load Everything At Once

Mobile MattersTest Over Sprint 3G

Let’s Call it A Single Page Application

A SPA Is All InclusiveViews/

Pages

CSS/StylesJavaScriptJS

A SPA Leverages

AJAX/Sockets

Storage

Hash Fragment

#

Mobile Browsers

Aggressively Purge Cache

Weaker ProcessorsLess Memory

Cellular Connections

Slower

More ExpensiveUnreliable

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

Cant Use Fast Food Frameworks

Cant Use Fast Food Frameworks

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

Fast Food Frameworks Are Bad

Full of Processed Carbs

Loaded With Preservatives

Syntactic Sugar

MicroJS LibrariesSmall

Promote Modular Architecture

Single Focus

•Performance•Modularity•Small Footprint•Scalability•Maintainability•Long Lifespan

Architecture Goals

The Modern Web Hour GlassHTML5

JavaScriptCSS3 Web Server

DB – SQL Server/ NoSQL

Application Loading Process

The 1st Time a User Visits They ‘Install’ the Application

•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

•Deferred Request(s)•Contains Additional View HTML, CSS and JavaScript

Application Loading Process

SPA PARTSRoutingCachingDataRendering

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

Markup Management

•Keep the DOM Lean•Leverage Browser Storage to Persist Markup• http://bit.ly/H2qhZ2

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

View Engine – Lazy Loading

•Reduces Initial Load•Enables 14kb Goal•View Engine Still Parses Markup & Caches•Also caches and injects CSS & Script References

Questions