developing and deploying a website with html5
DESCRIPTION
This is the slide deck used in the Penton Media workshopTRANSCRIPT
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