Transcript Doing Modern Web, aka JavaScript and HTML5 In The Enterprise

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
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 806kb
229 Primed Http Requests
76 seconds to fully load
Multiple Unminimized Resources
Speed Index 5949
12+MB of Content
Multiple 404s
Mostly Uncached Content
The Web Is Obese
100 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/20
15/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
Less Memory
Weaker Processors
Cellular Connections
Slower
Unreliable
More Expensive
Touch
Web APIs
HTML5 CSS3 JavaScript
The Modern Web Hour Glass
HTML5
JavaScript
CSS3
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 besteffort 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
Responsive Design
“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
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-conclusion/
Responsive Images
• Img srcset
• http://blogs.windows.com/msedgedev/2015/10/07/using-extended-srcsetand-the-picture-element-to-tailor-your-image-to-every-device-andlayout/
• 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
HTML5
JavaScript
CSS3
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/smas
hingconf
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
HTML
REQUEST
DOM
JAVASCRIPT
CSS
CSSOM
RENDER TREE
LAYOUT/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
• Learn to be Modular
• Master DOM APIs
• And Yes This Was Painful
• Alternatives
• Create DollarBill 
• For about 2 weeks
• But Was A Great Experience
Fast Food Frameworks Are Bad
Full of Fat
Syntactic Sugar
Loaded With Preservatives
MicroJS Libraries
Small
Single Focus
Promote Modular
Architecture
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
Application Loading Process
st
1
The 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
S PA
D ATA
CACHE
A JAX
APP
View Engine
Te m p l a t e
Engine
Web Application
API
VVI IEEW
VVI IEW
W
E
W
V
I
E
C o n t rW
oller
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?
Make AJAX
Request
No
Yes
Return
Data
Return
Data
Cache 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
Module
Module
Core
Module
Think Like jQuery
• The jQuery Module Pattern is Familiar
• Not Hard to Implement
• Allows for Extensibility
A SPA Application Module
View
View
App
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
Questions