Learn Modern Web Application Development Techniques That

Take Your Company to the Future

Chris Love

@ChrisLove

Love2Dev.com

Who Am I

• ASP.NET MVP• ASP Insider• Internet Explorer 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(s)

• Normal Slide Decks – http://slidesha.re/15YTrTT • Today’s Slides – In a Shared Cloud Folder (check e-mail)

Source Code

• Source Code• Book Source Code (Movies)

• http://GitHub.com/docluv/movies• Going to use this for some Layout, Responsive Design and Touch

Demos

• New Application (Furniture Store)• https://github.com/docluv/fastfurniture• This is the reference application for SPA Techniques

What Does A Modern Web App Look Like?

What is Changing the Definition of the Web?

What Does the Developer Experience Look Like?

Defining the Modern Web Application

?

Its Not This

Its Not This

326 Http Requests 23 Style Sheets 80kb 84 Images 587kb 101 External Scripts 806kb229 Primed Http Requests76 seconds to fully loadMultiple Unminimized ResourcesSpeed Index 594912+MB of ContentMultiple 404sMostly Uncached Content

The Web Is Obese100 Files Requests – 2.2MB

22 JavaScript Files - 354KB

7.4 CSS Files – 71KB

54 Images – 1.4MB

2.9 Fonts – 111kb

39 TCP Connections

18 Domains

48% Cacheable http://httpArchive.org

Performance

• Multiple Studies Show Correlation Between Conversions &

Speed

• 57% Will Abandon a Slow Site After 3 Seconds

• We Have to Concentrate 50% Harder For Slow Sites

• 78% Have Felt Stress or Anger With Slow Sites

• 44% Say Slow Sites Make Them Anxious

• 4% Have Thrown Their Phone

What Does Your Site Cost?

• http://whatdoesmysitecost.com

• Thank You Tim Kadlec

• http://www.timkadlec.com/2015/03/what-your-site-costs/

Matt Cutts

"Also take a step back for a minute and consider the intent of this change: a faster web is great for everyone, but especially for users. Lots of websites have demonstrated that speeding up the user experience results in more usage. So speeding up your website isn’t just something that can affect your search rankings–it’s a fantastic idea for your users.“

http://bit.ly/SPPB4k

Time is Money

• Faster Sites Have Higher Conversion Rates

• WalMart - http://bit.ly/S1fHSZ• Google – http://bit.ly/WajJbB• Amazon – http://bit.ly/S3UoAj• ShopZilla - http://bit.ly/RIQMDM

WalMart

Folks at Walmart knew their pages were slow. As a for instance, initial measurement showed that an item page took about 24 seconds to load for the slowest 5% of users. Why? The usual culprits: too many page elements, slow third-party scripts, multiple hosts (25% of page content is served by partners, affiliates, and Marketplace), and various best practice no-nos

http://bit.ly/WajJbB

Google’s ½ Second

Half a second delay caused a 20% drop in traffic. Half a second delay killed user satisfaction.The lesson, Marissa said, is that speed matters. People do not like to wait. Do not make them.

http://bit.ly/TPPhUp

http://bit.ly/16zFCXL

Performance

• Performance Matters• It Must Be a 1st Class Feature in Any Application• Not an Afterthought Right Before Deployment• 80% of Performance Is In the Client, Not the Server• Cellular Networks Make Page Load Even Tougher• 500ms Inherent Delay• Bandwidth Constraints

Modern Web Applications MUST Load Fast and Respond Fast

Mobile or Device Fragmentation

Mobile Browsers

Aggressively Purge Cache

Weaker Processors

Less Memory

Cellular Connections

Slower

More Expensive

Unreliable

Touch

Web APIs

HTML5 CSS3 JavaScript

The Modern Web Hour Glass

HTML5JavaScriptCSS3

ASP.NET.IIS

DB – SQL Server/NoSQL

 (API + HTML5 + CSS3 + JavaScript +

Standards Compliant Browser) *

(Touch + Mobility + Performance)

=== Great Single Page Application

Let’s Code

Introduction to Fluid Layouts

•Morph to Fill The ViewPort Space•Rely on CSS•Absolute Positioning

DOCTYPE

Replace This:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

With This:

<!DOCTYPE html>

<html>

DOCTYPE

"DOCTYPEs are required for legacy reasons. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications. Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications." http://www.w3.org/TR/html5/syntax.html#the-doctype

Absolute Positioning

.site-header {    position: absolute;    top: 0;    right: 0;    left: 0;    height: 80px;}

Let’s Code

Responsive Web Design

• Introduced by Ethan Marcotte 2010 - bit.ly/178an9e• Web Design Approach To Create An Optimal Viewing

Experience Across All Browser ViewPorts• Fluid Layouts• Media Queries• Minimal if any JavaScript Required

“this unspoken agreement to pretend that we had a certain size. And that size changed over the years. For a while, we all sort of tacitly agreed that 640 by 480 was the right size, and then later than changed to 800:600, and 1024; we seem to have settled on this 960 pixel as being this like, default. It’s still unknown. We still don’t know the size of the browser; it’s just like this consensual hallucination that we’ve all agreed to participate in: “Let’s assume the browser has a browser width of at least 960 pixels.”

Jeremy Keith

bit.ly/1bhH6rw

Responsive Design

“The emergence of ideas like “responsive design” and “future-friendly thinking” are in part a response to the collective realization that designing products that solve one problem in one context at a time is no longer sustainable. By refocusing our process on systems that are explicitly designed to adapt to a changing environment, we have an opportunity to develop durable, long-lasting designs that renew their usefulness and value over time.”

Wilson Miner

bit.ly/1fbq5lB

Responsive Design

“Any attempt to draw a line around a particular device class has as much permanence as a literal line in the sand. Pause for a moment and the line blurs. Look away and it will be gone. Let’s take the absolute best case scenario. You’re building a web app for internal users for whom you get to specify what computer is purchased and used. You can specify the browser, the monitor size, keyboard, etc.”

Jason Grigsby

bit.ly/KzJH9G

Responsive Design

“How long do you think that hardware will be able to be found? Three years from now when a computer dies and has to be replaced, what are the chances that the new monitor will be a touchscreen?By making a decision to design solely for a “desktop UI”, you are creating technical debt and limiting the longevity of the app you’re building. You’re designing to a collective hallucination. You don’t have to have a crystal ball to see where things are headed.And once you start accepting the reality that the lines inside form factors are as blurry as the lines between them, then responsiveness becomes a necessity.”

Jason Grigsby

bit.ly/KzJH9G

Responsive Design

Mobile First

• Determine The Most Important Information• Expand From There• Start Responsive Design Mobile First

Responsive Layout

Responsive Layout

Responsive Layout

Media Queries

@media (min-width:600px) {/* Rules Here */}

@media (min-width:800px) {/* Rules Here */}

Responsive Design Best Practices•Start Small Screen First•Forces Most Important Data First•Easier to Adjust CSS Rules

•Let Data Drive Media Queries First•Its Ok to Use Some JavaScript•But Not Required

Responsive Images

Responsive Images

• Img srcset

• PICTURE ELEMENT• Good for Art Direction• Media Type

• Jason Grigsby Series• http://blog.cloudfour.com/responsive-images-part-10-conclusio

n/

Responsive Images

• Img srcset• http://blogs.windows.com/msedgedev/2015/10/07/using-exten

ded-srcset-and-the-picture-element-to-tailor-your-image-to-every-device-and-layout/

• PICTURE ELEMENT• Good for Art Direction• Media Type

IMG srcset

<img class="product-grid-photo" alt="sun" src="https://az763773.vo.msecnd.net/display/sun.jpg" srcset="https://az763773.vo.msecnd.net/thumb/sun.jpg 116w, https://az763773.vo.msecnd.net/mobile/sun.jpg 300w, https://az763773.vo.msecnd.net/display/sun.jpg 400w, https://az763773.vo.msecnd.net/originals/sun.jpg 1000w">

PICTURE Element

Let’s Code

Touch Your Application

Touch Your Application

• Content Must Be Touchable• Account for Fat Fingers• Support APIs• Mouse• Touch (Apple)• Pointer (MSFT & W3C)

Touch Your Application

Touch Your Application

• The Average Human Finger is 11mm in Diameter• Fingers Range from

8mm -19mm• Baby to Large Man

Touch Your Application

• Touch Points Need Margin• Or Separation From

Neighbors

Touch Gestures

• Pan• Pinch/Zoom• Swipe• Tap• Tap + Hold• Rotate

Touch-action

• CSS Property to Help Determine How Touch is Handled• Auto• None• Pan-x• Pan-y

• Can disable Auto-zoom• Enable Scrolling

Scrolling Content

overflow: scroll;-webkit-overflow-scrolling: touch;-ms-overflow-style: -ms-autohiding-scrollbar;-ms-scroll-chaining: none;-ms-scroll-translation: vertical-to-horizontal;

DeepTissue

• Abstracts Touch & Mouse APIs• Abstracts Input Modality Gestures• http://deeptissuejs.com

INPUT TYPE=XXXX

• New Input Types Drive On-Screen Keyboards• Drives Native Validation• Tel, email, url, number, etc

Let’s Code

The Server-Side Story

• Provide Markup, CSS, JavaScript, Images• API End Points• Possible Legacy URL Redirects• Deal with Search Engine Spiders and Legacy Browsers

The Modern Web Hour Glass

HTML5JavaScriptCSS3

ASP.NET.IIS

DB – SQL Server/NoSQL

SPAHelper Library

• Extends ASP.NET MVC• Custom SPAWebViewPage• SPAModel• SPAHelper• http://bit.ly/1dUYLGJ

SPAWebViewPage

• Must Use it as Base for MVC View• Extends MVC’s WebViewPage• SPARenderPage

• Causes only Changed Content to be Sent to Client• Works in Concert with Backpack to Cache Markup in

localStorage

SPAWebViewPage

• Must Configure View web.config file:

• <pages pageBaseType="SPAHelper.SPAWebViewPage">

SPAWebViewPage

@if (!Html.HasEscapeFragment()) {

@SPARenderPage("views/home-view.cshtml") @SPARenderPage("views/movies-view.cshtml") @SPARenderPage("views/movie-view.cshtml")

… @SPARenderPage("views/notfound-view.cshtml") @SPARenderPage("templates/_templates.cshtml")

}

SPAModel

• The SPAModel provides a base for an ASP.NET MVC single page application model• The model has properties for the application's Title and

Description• The SetRoute function parses a SPA route to isolate the

primary root

SPAHelper

• The SPAHelper class is a collection of static and static ASP.NET MVC HTML Helper extension functions• SPALink• LastUpdated• HasEscapeFragment• HasForceReload

_escape_fragment_

• Google’s Specification for AJAX Applications• http://bit.ly/117sTgL• Allows Routes to be Sent to Server Via QueryString• Server Sends Google Fully Rendered Markup• Good Core Site Solution• Legacy Browser Version• Andy Hume of the Guardian - http

://vimeo.com/channels/smashingconf

Cutting The Mustard

• First Defined By Dean Hume of the Guardian

• http://vimeo.com/channels/smashingconf

• A Progressive Enhancement Approach to Supporting Legacy Browsers

Cutting The Mustard

• Feature Detection• Do Not Code to

Legacy Browsers• DO NOT USE Polyfils• Also Helps With SEO• Google’s Specification

for AJAX Applications• http://bit.ly/117sTgL

Cutting The Mustard

• Not Needed• No Legacy Browser

Support• No Concern for

SEO• Ex. Line of

Business App

Cutting The Mustard

• Feature Detect to Determine Browser Capabilities• Never Browser Sniff

if (!('querySelector' in document) //at least IE8 || !('localStorage' in window) //at least IE8 || !('addEventListener' in window) //at least IE8 || !('matchMedia' in window)) {//at least IE10

} else {

}

Static HTML

• Eliminates The Server-Side Component(s)• Rely on the API to serve the data• Assumptions• No Obsolete Browsers (but we can deal with this scenario)• Search Engine Spiders will crawl dynamic content• No Need for SEO• API based authentication

• Works on any web server, even cloud storage

makeHTML

• Node Module to Generate Index.html and Deferred.html• Grunt plugin (a Gulp plugin planned)

• Composes the Application Markup Once• Replaces the ASP.NET/PHP/Express/Ruby functionality

makeHTML

makeHTML: { debug: {...}, production: { options: { "scripts": ["js/Fast-Furniture.app.min.js"], "styles": ["css/site.min.css"], "criticalCSS": "views/criticalcssmin.html", "indexSrc": "views/static.html", "src": [ "Views/Home/layouts/*.html", "Views/Home/views/*.html", "Views/Home/templates/*.html" ], "dest": "index.html" } }

Let’s Code

The Client-Side Story

• Things You Used to Do On the Server Now Live In the Client• Routing• Rendering• Data Caching

• Need to be Conscience of How Browsers Work• Critical Rendering Path• Memory Management

• Leverage HTML5 Features• Storage• Animations

Critical Rendering Path

REQUEST

HTML

CSS

DOM

CSSOM

JAVASCRIPT RENDER TREELAYOUT/

PAINT

Press # For More

• Routes Are Not Sent to Server

• No Request/Response Intiated

• Must Respond to Route in the Client

• #! Is the Defacto Standard

Press # For More

window.addEventListener("hashchange", function (e) {

//swap the View Here

});

What About These Guys?

•Angular•Ember•Backbone•Durandal•React

Cant Use Fast Food Frameworks

Cant Use Fast Food Frameworks

Common Problems

•Too Large•Try to be everything to everybody

•Memory Leaks•Many Brittle Practices•Routing•Virtualize Native Functionality

Dump 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 Fat

Loaded With Preservatives

Syntactic Sugar

MicroJS Libraries

Small

Promote Modular Architecture

Single Focus

The Love2SPA Way

• SPAjs• Backpack/Mud Bath *• DollarBill**• Caching AJAX Layer• HTML Template Engine• Deeptissue• Toolbar, Panorama, Other Small UI Libraries

* Under Development ** jQuery Compatible

The Love2SPA Way – Typical Stats

• 35-80kb minified, not gzipped JavaScript• 20-35kb minified, not gzipped CSS• 5-35kb minified, not gzipped HTML• 3 Core Http Requests•< 1 second Load Time

The Love2SPA Way

• Extensible• Scalable• Maintainable• Testable• Deployable• Have Tangible

ROI

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

Application Loading Process

•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

API

We 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

SPAjs

• Responsible for Routing

• View Switching

• Executes Animations

• Relies on Animate.css - http://bit.ly/1hayo4s

• Executing View Onload and Unload Functions

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

AjaxPrefilter

• Caches Data in localStorage with a TTL

• 1st Implement by Paul Irish

• http://bit.ly/117p7E9

• Can be Used with Any AJAX Implementation

• Eliminates Unnecessary HTTP Requests

Data Management

• Eliminate Redundant HTTP Requests• The Fastest HTTP Request is the one you don’t make• Intercept AJAX GET Requests• Determine if Data is Cached

Data Management

Data Requested

Is In Cache?

Yes

No

Return Data

Make AJAX Request

Cache DataReturn Data

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

JavaScript Templating

• Merges JavaScript Objects with Markup

• Many Libraries

• Micro-Templating

• MUSTACHE

• Rivets/MVVM

• Generated Markup Appended to DOM

JavaScript Templating

<script id="MoviePosterGridTemplate" type="text/x-mustache-template"> {{#movies}} <div class="movie-target"> <a href="#!movie/{{id}}/{{title}}"> <img alt="{{title}}" src="{{poster}}" class="movie-grid-poster"> <figcaption class="demo-photo-caption">{{title}}</figcaption> </a> </div> {{/movies}}</script>

Let’s Code

Create Modular, Extensible JavaScript Application• Functions 1st Class in JavaScript• Functions are Objects• var foo = {};• All Objects have a Prototype• new Keyword creates a new Object• Many popular Patterns

Extensible

Core

Module

Module

Module

Think Like jQuery

• The jQuery Module Pattern is Familiar• Not Hard to Implement• Allows for Extensibility

A SPA Application Module

App

View

View

View

Let’s Code

Building Web Applications

• Just Like C# Applications• Release• Debug

• The Web Needs a Compiler• 2 Great Options• Grunt• Gulp

Building Web Applications

• Grunt & Gulp Are Node Modules• http://gruntjs.com• http://gulpjs.com• Both have great eco-systems

• Add To package.json• Run npm install• Create gruntfile.js• Grunt.cmd

Let’s Code

Going Offline

• Leverage the AppCache• Create a Manifest File• Don’t Let it be a Handicap• http://bit.ly/117q27A

• Makes Sure Your App Will Work Without Connectivity• Good for Caching Images and Resources• Makes the Browser look Local Before Going to the Server

Developing with AppCache is a PITA

@{if (HttpContext.Current.IsDebuggingEnabled){    @:<html lang="en">    }else{    @:<html lang="en" manifest="app.cache">    }}

Manifest File

• CACHE• lists all resources that should be downloaded for offline use

•NETWORK•  identifies any URLs that require the device be connected to

the network

• FALLBACK• lists replacement URLs for network URLs to be used when the

device is offline

How AppCache Works

•When the browser reads the manifest file it downloads the specified resources locally• Those resources are referred too instead of making a request to the server• Resources are refreshed if the manifest file has been updated

Let’s Code

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!

Questions