This is the slide deck used in the Penton Media workshop

1. Developing and Deploying a
Website with HTML5
Chris Love
@ChrisLove
Love2Dev.com

2. Who Am I?
ASP.NET MVP
ASP Insider
Internet Explorer User Agent
Author
Speaker
Tweaker, Lover of Mobile Web, JavaScript, CSS & HTML5

3. JavaScript Libraries
DeepTissueJS – A Touch Gesture Abstraction Library
http://deeptissuejs.com
PanoramaJS – JavaScript Library to Implement The Windows Phone Panorama Control in HTML5
https://github.com/docluv/panoramajs
ToolbarJS – JavaScript Library to Implement a Mobile AppBar, like Windows Phone
http://toolbarjs.com
Coming Soon!
SPA – Single Page Application Router, View Manager
Backpack – Markup Manager leveraging LocalStorage
FannyPack – Markup Manager leveraging on page markup
DollarBill – Lightweight Utility Library that’s compatible with jQuery

4. Resources
Slide Deck – http://www.slideshare.net/docluv
Only URL U Need!

5. What Does a Modern Web App Look Like?
AJAX Layer
Browser
Request
Response
Minimal HTML Payload
Images
CSS
JavaScript
AJAX Calls for JSON
HTML
Web
Server

6. What does the AJAX Layer Look Like?
HTML
CSS
JavaScript

7. 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

8. The World is Mobile
• Screens are All Sizes
• Usage Contexts Vary
• Expensive to Make Customized Versions for
Every Platform

9. 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

10. Fluid Layouts
• Adjust To Fill the Entire View Port
• View Port is the Browser’s Window Size
• Use Absolute Positioning To Place Major
Elements

11. Fluid Layout

12. Fluid Layout

13. 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

14. Media Queries
@media (min-width:800px) {
/*
}
CSS Rules Here
*/

15. 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

16. Let’s Code

17. 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

18. Principle #1 – Performance Matters
• Honor the 23 Rules of Web Performance
• Use HTML5 Advantages
• WebStorage Is Your Friend

19. 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

20. 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

21. Let’s Code

22. So How Do You Manage A JavaScript App?
Project Structure
‘Compiling’
Testing
Bundling & Minification
Build System
I Like GruntJs

23. Using Grunt JS
• Setup Using NPM
• npm install -g grunt-cli
• Add Grunt files
• package.json
• Gruntfile.js

24. Common Contrib Extensions
• Uglify
• JSHint
• Handlebars
• HTMLMIN
• Jasmine
• Qunit
• Watch
• YuiDoc

25. Source Management
• TFS
• Git
• GitHub
• BitBucket

26. Deployment
• Environments
•
•
•
•
Development
Test/QA
Staging
Production
• Via Source Control
• Cloud Drive

27. Demo Time!

28. Review
• Fluid Responsive Layouts
• Enable a Modern UI
• Single Page Apps
• Enable Fast & Fluid User Experience
• Build & Deployment
• Optimizes Web Application
• Manages Source Code