Developing and Deploying a Website with HTML5

Chris Love

@ChrisLove

Love2Dev.com

Who Am I?

ASP.NET MVP

ASP Insider

Internet Explorer User Agent

Author

Speaker

Tweaker, Lover of Mobile Web, JavaScript, CSS &

HTML5

JavaScript Libraries

DeepTissueJS – A Touch Gesture Abstraction Libraryhttp://deeptissuejs.com

PanoramaJS – JavaScript Library to Implement The Windows Phone Panorama Control in HTML5https://github.com/docluv/panoramajs

ToolbarJS – JavaScript Library to Implement a Mobile AppBar, like Windows Phonehttp://toolbarjs.com

Coming Soon!SPA – Single Page Application Router, View ManagerBackpack – Markup Manager leveraging LocalStorageFannyPack – Markup Manager leveraging on page markupDollarBill – Lightweight Utility Library that’s compatible with jQuery

Resources

Slide Deck – http://

www.slideshare.net/docluv Only URL U

Need!

What Does a Modern Web App Look Like?

Web Server

Browser

Request

ResponseMinimal HTML PayloadImagesCSSJavaScriptAJAX Calls for JSON

HTML

AJAX Layer

What does the AJAX Layer Look Like?

HTML

CSS

JavaScript

What is a Single Page App

1 Page – Many Views Retrieves Data from an API Manages Merging Data With Client-Side

Templates Manages Sexy View Transitions! Introduces a Whole New World of Issues For

Developers

The World is Mobile

• Screens are All Sizes• Usage Contexts Vary• Expensive to Make Customized Versions

for Every Platform

One Site To Rule Them All

• HTML5 Targets All Platforms• Responsive Web

Design Targets All Screen Sizes• SPA Competes with

Native Apps

• APIs Secure All Data Interactions• Decoupled from

Client

Fluid Layouts

• Adjust To Fill the Entire View Port• View Port is the Browser’s Window Size

• Use Absolute Positioning To Place Major Elements

Fluid Layout

Fluid Layout

Responsive Web Design

• Craft Web Applications to Provide Optimal Viewing Experience Across All Screen Sizes• Uses Media Queries To Define Layout

Rules• Coined by Ethan Marcotte in 2010• http://bit.ly/17QvHOd

Media Queries

@media (min-width:800px) {

/* CSS Rules Here */

}

Responsive Process

• Can Either Start Big & Go Small or Small and Go Big• Starting Mobile Forces You To Determine What is Most

Important• Resize Desktop Browser with Dev Tools Open• Use Dev Tools to Resize Browser• Tweak CSS to Refine Layout

• Don’t Be Afraid to Use JavaScript to Help

Let’s Code

Single Page Applications

• Single Page Web Application

• Means a More ‘Native Like’ Experience

• Heavy Client-Side Application Model

• Loads all Markup ‘on initial load’

• Tectonic Shift In the Way Web Sites Are

Built

Principle #1 – Performance Matters

• Honor the 23 Rules of Web Performance

• Use HTML5 Advantages

• WebStorage Is Your Friend

Principle #2

• Things You Did On The Server Now Live In The Browser

• Only one Request for HTML (sort of…)

• In the Browser

• Routing

• Markup Management

• Data Caching

Please Press #

• SPAs Reply on the URL hash

• Prevents the Browser from Requesting URL from Server

• Google SEO ‘Recommends’ #!

• _escaped_fragement_ - http://bit.ly/1bFmIQT

• Need a Route Management System

Let’s Code

So How Do You Manage A JavaScript App?

Project Structure‘Compiling’TestingBundling & Minification

Build System

I Like GruntJs

Using Grunt JS

• Setup Using NPM• npm install -g grunt-cli

• Add Grunt files• package.json• Gruntfile.js

Common Contrib Extensions

• Uglify• JSHint• Handlebars• HTMLMIN• Jasmine• Qunit• Watch• YuiDoc

Source Management

• TFS• Git• GitHub• BitBucket

Deployment

• Environments• Development• Test/QA• Staging• Production

• Via Source Control• Cloud Drive

Demo Time!

Review

• Fluid Responsive Layouts• Enable a Modern UI

• Single Page Apps• Enable Fast & Fluid User Experience

• Build & Deployment• Optimizes Web Application• Manages Source Code