HTML5 Overview

Topics 

• What is HTML5? 
• Why HTML5? 
• HTML5 showcases 
• HTML5 features quick overview 
• HTML5 support in Browsers 
• Building Mobile apps with HTML5 
• HTML5-enabled Web Application Architecture 
• So how can I get started?

What is HTML5?

• Collection of features, technologies, and APIs 
• Brings the power of the desktop and the vibrancy of multimedia experience to the web—while amplifying the web’s core strengths of interactivity and connectivity 
• HTML + CSS3 + JavaScript

How did HTML5 effort started?

• HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). 
• WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. 
• In 2006, they decided to cooperate and create a new version of HTML.

Timeline of Web Technologies

Major Design Goals of HTML5

• New features should be based on existing and established standards 
  • HTML, CSS, DOM, and JavaScript 
• Eliminate/reduce the need for external plugins (like flash) 
• Provide built-in markup replacing custom scripting 
• Support wide spectrum of computing devices 
• Mobile friendly

HTML5 is a set of many technologies

Why HTML5?

A few facts on Browser 

• Browser is becoming the application platform of choice 
  • “browser apps” over “desktop apps”: Google apps, Gmail, Games 
  • “browser apps” over “native mobile apps” (Mobile) 
• Innovations on browser has been huge 
  • The performance of JavaScript engine increased hundred-fold 
• Browser only platforms 
  • Chrome OS, Firefox OS 
  • Fast, secure, reliable, cloud-enabled 
  • No overhead of general-purpose OS platform 
• Browser-only devices 
  • ChromeBook

Why HTML5? 

• Offline and Storage 
  • Aside from letting apps retain their states and hold data without a server, offline features have the bonus of improving an app’s performance by storing data in the cache or making data persistent between user sessions and page reloading 
• Better user experience 
  • HTML5 enables web apps to be more responsive, creating a user experience that rivals that of their desktop counterparts 
• Easier development 
  • HTML5 simplifies your development cycle by letting you use the same technology stack across multiple platforms and devices 
  • HTML5 technologies—JavaScript, CSS, and HTML—are easier to learn
• Broad reach 
  • HTML5 is broadly supported on all modern desktop browsers and major mobile devices. No other technology can offer the same ubiquity 
• Security 
  • Native support in browsers for multimedia and other capabilities reduces the need for plugins, some of which have introduced vulnerabilities to the browser
•  Lower cost and easier maintenance 
  • HTML5-enabled web applications are cheaper to run across multiple platforms, they’re easier to maintain, and they make specific devices irrelevant. All these features not only lower costs, but also improve productivity.

HTML5 Adoption: Everyone is on it! 

• “The world is moving to HTML5” 
  • Steve Jobs (Apple) 
• "The world is pushing down HTML 5 path and so are we."
  • Steve Ballmer (Microsoft) 
• “The web has not seen this level of transformation, this level of acceleration, in the past 10 years... we're betting big on HTML5” 
  • Vic Gundotra (Google)

No more plugins are required 

• http://readwrite.com/2011/11/08/steve_jobs_wins_adobe_to_give_up_mobile_flash_for

HTML5 is No#1 in Job Trends 

• http://www.indeed.com/jobtrends

HTML5 Showcases

Apple HTML5 Showcases 

• http://www.apple.com/html5/ (no longer available)

Everything Google is HTML5 based 

• http://chrome.angrybirds.com/

WebGL 

• http://webglsamples.googlecode.com/hg/aquarium/aquarium.html

Google Body 

• http://www.zygotebody.com/

Three.js (WebGL Library) 

• http://threejs.org/examples/webgl_morphtargets_md2.html

 HTML5 Features Quick Overview

Semantics 

• New media elements. 
• New structural elements.
• New semantics for internationalization. 
• New link relation types. 
• New attributes. 
• New form types.
• New microdata syntax for additional semantics.

Presentation

• Styling with CSS 3 
• 2D Transformations & Transitions 
• 3D Transforms 
• WebFonts

Graphics

• Canvas element
• Web GL 
• SVG

 Connectivity 

• Web Socket 
  • Full-duplex bidirectional communication channel 
• Cross-domain messaging 
• Server-side events 
• XMLHttpRequest2

Audio/Video 

• You can access, control and manipulate timeline data and network states of the audio/video files

Performance 

• Web apps are now able to rival performance of native and desktop applications 
• Web Workers 
  • Background processing

Storage 

• Application cache 
• Local storage 
• Web SQL (Deprecated) 
• IndexedDB

File Access 

• Provides very powerful APIs to interact with binary data and a user's local file system

HTML5 Support in Browsers

Check Browser Support from http://caniuse.com

Check Browser Support from http://html5readiness.com/

Your Browser's HTML5 Support Score from http://HTML5test.com

Browser Compatibility Score from http://html5test.com/compare/browser/chrome24/ff18/ie10.html

Modernizer from http://modernizr.com/

HTML5 Boilerplate from http://html5boilerplate.com/

Chrome Frame from http://google.com/chromeframe

HTML5 and Mobile Apps

Desktop Browser vs Mobile Browser 

• http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-200906-201301

HTML5 Support on Mobile Platforms

Why HTML5 Mobile Apps (vs. Native Mobile Apps)? 

• Easier to access and use for your users 
  • No need to download Apps (unlike native Apps) 
• Cross-platform 
  • A single codebase for all devices (unlike native Apps) 
  • No need to write device-specific code 
  • Easier to maintain 
• Standard-based 
  • Broad adoption 
  • Larger Ecosystem 
  • Safer path for the future 
• Web Search'able and bookmark'able

PhoneGap bridges the gap

•  Allows you to create mobile apps using HTML5 for the platforms you care about

HTML5-enabled Web Application Architecture

Web App Architecture Requirements 

• High Performance 
• High Scalability 
• Low Complexity 
• Easy to develop (from developer standpoint) 
• Rich user experience (from user standpoint) 
• Standards-based 
• Vibrant ecosystem 
• Multi-device support 
• Mobile friendly

Web App Architecture Evolution 

• Model 1 MVC (Template based) 
• Model 2 MVC (Controller based) 
  • View is generated by the server per request 
  • Struts, SpringMVC, Rails 
• Component oriented 
  • View is generated by the server per request 
  • JSF, Tapestry 
• HTML5-enabled Rich Client/Thin Server 
  • View is generated at the client 
  • Client Model sync'ed with backend data via REST 
  • JavaScript MVC framework (Backbone.js, Angular.js) 
  • HTML 5 enabled.

HTML5-enabled Rich Client Architecture 

• Presentation (view generation) is done at the client

HTML5-enabled Rich Client Architecture 

• All presentation handling is done on the client 
  • HTML5 semantics, JavaScript, CSS 
• All conversational state (also known as view or presentation state) is kept on the client 
  • The server is stateless from the perspective of requests 
  • HTML5 offline technologies
• The client is responsible for fetching the data from the server and insert it into the presentation and extracting data from the presentation to send to the server 
  • HTML5 Web sockets, XHR2 
  • REST

Improved Performance 

• Performance aspects includes 
  • server load 
  • bandwidth use 
  • latency 
• The server load & bandwidth use is reduced - No time spent on server-side page generation and then transport it to the client 
• The user response time is improved – the client is more responsive to user interactions

Scalability 

• Moving the presentation to the client also moves all the conversational state to the client. 
  • This leverages the processing power of the clients. 
  • It distributes the per-client session memory and processing requirements inherent in server side architectures to all the clients. 
• Transferring less data and not doing presentation generation should free up the server for handling more clients. 
• It should be easier to additional servers 
  • No (or less) server state needs to be replicated

Reduced Complexity 

• The main reason complexity is reduced is because control of the UI is in one place rather than split between client in server 
  • The server is no longer micro managing the client by remote control. 
  • UI events stay on the client.
• Also the framework code that supports the application presentation layer can be implemented in one language (JavaScript) rather than for example JavaScript on the client and Java on the server.

Improved User Experience 

• More responsive to user actions 
• Offline usage of the application is possible 
• It is possible since the UI handling is performed on the client

Is HTML5-enabled Rich Client Architecture Ready? 

• Absolutely! 
  • HTML5 is now pervasive 
  • Highly popular JavaScript libraries – jQuery 
  • Emergence of client JavaScript MV* frameworks – Angular.js, Backbone.js 
  • JavaScript template – Mustache.js 
  • JavaScript engine is quite powerful now, thus can handle work load on client (and on the server) 
  • REST

So How Can I Get Started?

Things a Developer need to learn 

• Frontend 
  • JavaScript, CoffeeScript 
  • HTML5 APIs (we learned today) 
  • jQuery 
  • Mustache.js 
  • JavaScript MVC framework (AngularJS) 
• Backend 
  • Building RESTful services 
  • Use HTML5 friendly frameworks – NodeJS, Play, Grails, (Rails) 
• Tool 
  • NetBeans 7.3+ now supports HTML5 app development

HTML5 Course from JPassion.com :-) 

• http://jpassion.com 
• We cover pretty much everything HTML5 in hands-on style

HTML Simple Tutorial Site #1 

• http://playground.html5rocks.com/ 
• You can change and test code

HTML Simple Tutorial Site #2 

• http://slides.html5rocks.com/#table-of-contents

HTML Simple Tutorial Site #3 

• http://html5demos.com/

HTML Simple Tutorial Site #4 

• http://www.w3schools.com/html/html5_intro.asp 
• Focused mostly on HTML markup

HTML Advanced Tutorial Site 

• http://www.html5rocks.com/en/tutorials/ 
• Community driven advanced tutorials

Download course content