HTML5 is Here!
Now Learn the EcoSystem
About the speaker
- Rohit Ghatol
- Primarily a Technology Evangelist @ Heart
- Director of Engineering @ Synerzip
- Author of Book - Beginning PhoneGap
- Technical Speaker at Dozen+ Events in India
- Ex Googler (Developer Programs)
- Founder of TechNext & Pune Google Developer Group
- Others
- Certified MongoDB Programmer/DBA
- Certified Scrum Master
- Motivational Trainer
Topics
- Why HTML5?
- Proof of Arrival of HTML5
- HTML5 & SPA
- HTML5 Features
- SPA EcoSystem
Why HTML?
Main Reasons for high adoption rate
-
Smart Phones driving Internet Usage
- Better Standards & Support
- Feature Rich Specs
SmartPhones
Better Standards and Support
- WHATWG and W3C Working together
-
Major Web/Browser Companies behind WHATWG
- Fast Face HTML5 Feature Development & Reporting
- http://www.html5please.com
- http://www.html5test.com
- http://www.caniuse.com
- PolyFills/Shims - Workarounds
- Bringing HTML5 features to old browsers
WhatWG
HTML5Please.com
HTML5Test.com
CanIUse.com
HTML5 Polyfills/Shim
Bringing HTML5 features to old browsers
Topics
- Why HTML5?
- Proof of Arrival of HTML5
- HTML5 & SPA
- HTML5 EcoSystem
- SPA EcoSystem
Proof of Arrival
- Overview of Current HTML5 Adoption
- Popular Products on Internet
- Products Developed @ Synerzip
Overview of html5 adoption
When a Product claims to be HTML5, it really means
- They use Single Page Application concept
- Use JavaScript heavily for RIA
- Use Few HTML5 Features
- Most popular being
- History (#)
- Charts using SVG or Canvas
- Videos/Audio Tags (more so on iPad)
- Media Queries for Responsive UI
- Have fall back mechanisms for older browser
- Polyfills/Shims
- Graceful degradation
Popular HTML5 Products
TBD
Developed @ Synerzip
- Google/QuickOffice Office Viewer for Chrome
- EveryLog Social Networking Site
- Fuel Quest Products
TBD - Take formal approval before publishing this information
Chrome Office Viewer
Developed for Google/QuickOffice
CHROME OFFICE VIEWER
- Built as a Google Chrome Extension
- Built as a Hybrid Product. Part HTML5 Part C++
- Built as Single Page Application
- Uses History and Canvas (heavily)
EveryLog
EveryLog
- Built as a Single Page Application
- Uses RequireJs, jQuery, BackboneJS, UnderScore
- Uses Facebook APIs
- Uses HTML5 Features like
- History for navigation
- & Canvas for charts
Fuel quest
FUEL QUEST
- Built on GWT using EXT GWT
- Uses MVP Pattern internally
- Is a Single Page Application
- Internally uses HTML5 features like
- History for navigation
- SVG for Charts
Other
- 3-5 more HTML5 Product being developed
- HTML5 is a new common denominator
-
for new product requests from prospects
Topics
- Why HTML5?
- Proof of Arrival of HTML5
- HTML5 & SPA
- HTML5 EcoSystem
- SPA EcoSystem
HTML5 & SPA
-
SPA stands for Single Page Applications
- SPA EcoSystem is vast
- HTML5 is one of the many aspects of SPA
SPA EcoSystem
Topics
- Why HTML5?
- Proof of Arrival of HTML5
- HTML5 & SPA
- HTML5 EcoSystem
- SPA EcoSystem
HTML5 Key Features
*
Semantic Tags
<div>
<div>
...
</div>
<div>
<div>
...
</div>
</div>
</div>
To new Semantics Tag
<section>
<article>
<header>
....
<header>
...
</article>
<aside>
<nav>
...
</nav>
</aside>
</section>
Before Semantic Tags - DIV Hell
After Semantic Tags - organized
Status - Semantic Tags
Status: Use with PolyFill
Recommended polyfills:
html5shiv, html5shiv (github), accessifyhtml5.js
New Form Elements
| Required Text |
<input type="text" required=""/> |
| Email Text |
<input type="email" value="some@email.com"/> |
| Date Text |
<input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"/> |
| Range Element |
<input type="range" min="0" max="50" value="10"/> |
| Telephone Text |
<input type="tel" placeholder="(555) 555-5555" pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$"/>
|
| Color Element |
<input type="color" placeholder="e.g. #bbbbbb"/> |
| Step Element |
<input type="number" step="1" min="-5" max="10" value="0"/> |
| Search Text |
<input results="10" type="search" placeholder="Search..."/> |
STATUS : New INPUT Types
Audio & Video Tags
Video Demo
Video Tag
<video width="640" height="368" id="myVideo" controls>
<source
src="...../videos/madagascar3.webm"
type='video/webm; codecs="vp8.0, vorbis"'>
<source
src="...../videos/madagascar3.ogv"
type='video/ogg; codecs="theora, vorbis"'>
<source
src="...../videos/madagascar3.mp4"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
STATUS : Audio/Video Tag
Canvas, SVG & WebGL
Canvas Demo
Canvas Simple
Canvas Simple
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#00A308";
ctx.beginPath();
ctx.arc(220, 220, 50, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
ctx.fillStyle = "#FF1C0A";
ctx.beginPath();
ctx.arc(100, 100, 100, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
//the rectangle is half transparent
ctx.fillStyle = "rgba(255, 255, 0, .5)"
ctx.beginPath();
ctx.rect(15, 150, 120, 120);
ctx.closePath();
ctx.fill();
STATUS : CANVAS
WebGL Demo
STATUS : WEbGL
Status:
Caution
with PolyFill
Visit - http://html5please.com/#webgl
Status:
Caution
with PolyFill
Visit - http://html5please.com/#webgl
SVG Demo
SVG Source
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10" y="10" height="100" width="100"
style="stroke:#ff0000; fill: #0000ff"/>
</rect>
<rect x="50" y="50" height="110" width="110"
style="stroke:#ff0000; fill: #ccccff"
transform="translate(30) rotate(45 50 50)" >
</rect>
<text x="70" y="100"
transform="translate(30) rotate(45 50 50)">
Hello World
</text>
<circle class="myGreen" cx="140" cy="40" r="24"/>
<circle class="myRed" cx="140" cy="100" r="24"/>
</svg>
STATUS : SVG
Popular JS libraries
- D3 JS (SVG)
- Raphael JS (SVG)
- Two JS (Canvas)
- Kinect JS (Canvas)
- Three JS (WebGL)
- X3DOM (WebGL)
- etc
HTML5 Key Features
*
Local Storage
Local-Storage
Session-Storage
Similar to Local Storage except following
- Values are persisted per tab for user session
- Closing & Opening Browser will clear session storage
- Meant for storing user session information
STATUS : LocalStorage
INDEXED DB
INDEXED DB
- This is an Object Store Database
- Capable of storing JavaScript objects
- The Objects can be indexed, hence the name
- Provides Asynchronous methods to
- Create Database
- Create Object Store
- Write to the ObjectStore using Transactions
- Query the Object Store
- Put in place of deprecated WebSQL
STATUS : INDEXED DB
Offline Applications
Offline APP Demo
Offline Storage
- Provides Mechanism to take Web Site Offline
- Manifest.cache lists resources to be cached
- Provision to replace online resource with offline ones
STATUS : Offline
* Status:
Caution with Fallback
Visit - http://html5please.com/#offline
* Status:
Caution with Fallback
Visit - http://html5please.com/#offline
File & File Reader APIS
File & File Reader Demo
File & FiLE Reader Details
- File API provides ways to see file properties
- Files are uploaded by
- input type element or
- Drag and Drop mechanism
- File Reader API is to actually read the data
- Both APIs are Asynchronous
STATUS : File & FileREader
HTML5 Key Features
*
Web Sockets
Web Socket
-
Full Duplex Communication protocol (like TCP/IP)
-
Both Client & Server have methods to send msg
-
Both Client & Server have callbacks to receive msg
Web Socket Demo
WeB Socket Code Snippet
//Open Web Socket Connection
var socket = new WebSocket('ws://localhost:5000/echo');
//Callback for successful Connection
socket.onopen = function(event) {
console.log("WebSocket connected Successfully");
};
//Send Message to Server
socket.send('Hello, WebSocket');
//Callback for receiving message sent by the Server
socket.onmessage = function(event) {
console.log("Got message from server "+event.data);
}
//Callback when WebSocket Connection is terminated
socket.onclose = function(event) {
console.log("WebSocket connection is terminated");
}
STATUS : web socket
* Status:
Caution with PolyFill
Recommended polyfills:
* Status:
Caution with PolyFill
Recommended polyfills:
Server Sent Events
Server Sent Events (SSE)
Allows Server to push data to Browser
-
Client Send HTTP Request with MimeType - event-stream
- Server Caches the Connection
- One time - Server write the header -'content-type': 'text/event-stream'
- OnGoing - Server now keeps putting information on the Connection
-
If Connection breaks, Client reconnects
Replaces Hanging GET or Comet mechanism for Server Push functionality
SERVER SENT EVENTS PROTOCOL
//Simple Message
data: this is a simple message
//Multi line JSON Message
data: {
data: "name":"Rohit Ghatol",
data: "city":"Pune"
data: }
//Messages with ID
id: 33
data: this is line one
data: this is line two
//Messages with <>
id: 36
event: price
data: 103.34
Server Sent Events Snippet
var source = new EventSource('http://xyz.com/events');
//Callback called when connection is established
source.onopen = function () {
connectionOpen(true);
};
//Callback called when connection issues occurs
source.onerror = function () {
connectionOpen(false);
};
//Callback called when server sends a data
source.onmessage = function (event) {
console.log("Server sent "+event.data);
};
source.addEventListener('<custom event>', function(event){
console.log("Got Data "+event.data+" for <custom event>");
}, false);
STATUS - SErver Sent Events
(aka Event Source)
CORS
CORS
(Cross Origin Resource Sharing)
Important to share history behind CORS
- Single Origin Policy of Browser
- Ajax Call - http://abc.com -- X --> http://xyz.com
- JSONP was invented as work around
- However difficult to maintain
- Proxy were used
- Increased Traffic and Cost
- Finally CORS came to the rescue
CORS DeMO
CORS DeMO
STATUS - CORS
Status:
Use with PolyFill
Visit - http://html5please.com/#CORS
Recommended polyfills:
flXHR (requires crossdomain.xml)
Status:
Use with PolyFill
Visit - http://html5please.com/#CORS
Recommended polyfills:
flXHR (requires crossdomain.xml)
Web RTC
WEBRTC
WebRTC implements three APIs:
-
MediaStream - Access Camera & Mic
-
RTCPeerConnection - Establish P2P connection
-
RTCDataChannel - For data communication
WEBRTC is not really an HTML5 Feature. The fact is many core features once said to be HTML5 features by WHATWG now have their own specs. WEBRTC has its down Specs.
Currently consider the support to be Beta.
WEBRTC Demo
(Only for Chrome & FireFox)
HTML5 Key Features
*
Media Queries
media queries Demo
- Demo 1 - Simple Media Query
- Demo 2 - Twitter BootStrap Basic Demo
- Demo 3 - Twitter BootStrap Advance Demo
MEDIA Query Explained
<div id="sidebar">
<h3>Super team:</h3>
<ul id="nav">
<li>
<a
data-email="chriscoyier@gmail.com"
href="mailto:chriscoyier@gmail.com">
Chris Coyier
</a>
</li>
<li>
<a
data-email="isuredo@likeher.com"
href="mailto:isuredo@likeher.com">
Elisabeth Moss
</a>
</li>
<li>
<a
data-email="marry@me.com"
href="mailto:marry@me.com">
Amanda Righetti
</a>
</li>
</ul>
</div>
MEDIA QUERY EXPLAINED
//Default CSS for the Email Link
#sidebar ul li a {
color: #900;
text-decoration: none;
padding: 3px 0;
display: block;
}
//CSS when the Width beyond 1001px
@media all and (min-width: 1001px) {
#sidebar ul li a:after {
content: " (" attr(data-email) ")";
font-size: 11px;
font-style: italic;
color: #666;
}
}
//CSS when the Width between 700px and 1000px
@media all and (max-width: 1000px) and (min-width: 700px) {
#sidebar ul li a:before {
content: "Email: ";
font-style: italic;
color: #666;
}
}
//CSS when the Width between 520px and 699px or Beyond 1151px
@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
#sidebar ul li a {
padding-left: 21px;
background: url(../images/email.png) left center no-repeat;
}
}
STATUS - MEDIA Queries
CSS3 Transforms
CSS3 2D Transform
STATUS - CSS3 Transform
Status: Use with Fallback
Recommended polyfills:
Status: Use with Fallback
Recommended polyfills:
CSS3 Transition
CSS 3 Transitions
STATUS - CSS3 Transitions
Status: Use with Fallback
Recommended polyfills:
Status: Use with Fallback
Recommended polyfills:
CSS3 Animation
CSS 3 Animations
STATUS - CSS3 Animation
Status: Use with Fallback
HTML5 Key Features
*
Web Worker
Web Worker Demo
Web Worker Explained
Main.jsvar worker = new Worker('Worker.js');
button.addEventListener("click",
function(){
outputElem.innerHTML = "Calculating....";
var index = indexElem.value;
worker.postMessage(index);
});
worker.addEventListener('message',
function(e){
outputElem.innerHTML=e.data;
});
Worker.js
//Web Worker
importScripts('fibonacci.js');
addEventListener('message', function(e){
var index = parseInt(e.data);
var result = fibonacci(index);
postMessage(result);
})
STATUS - Web Workers
Status: Use with Fallback
Title
HTML5 Development Tips
- Figure out Browser Analytics before you begin
- Plan for Responsive UI from Day One
- Use Polyfills to provide functionality to older browser
-
Polyfills can degrade performance & usability
-
Too many Fallbacks increase the cost of development
- e.g WebGL based model Vs Static Images
- Sacrificing Features
- Sacrificing a User base (old Browser users)
MODERNIZR overview
- Modernizr is a feature detection library for HTML5
- Allow mechanism for Fallback when feature not present
The following code checks for GeoLocation feature
Modernizr.load({
test: Modernizr.geolocation,
yep : 'geo.js',
nope: 'geo-polyfill.js'
});
Topics
- Why HTML5?
- Proof of Arrival of HTML5
- HTML5 & SPA
- HTML5 EcoSystem
- SPA EcoSystem
SPA EcoSystem
Class System
Class System
- How to define Classes?
- How to use inheritance?
- Major JS Library define classes differently
-
e.g ExtJS, BackBoneJs etc
- Abstracts Class System
- Faster & Easier Development
Backbone Class System
Person = Backbone.Model.extend({
initialize: function(){
alert("Welcome to this world");
}
});
var person = new Person({ name: "Thomas", age: 67});
Sencha's Class Definition
Ext.define('FirstApp.model.Place',{
extend:'Ext.data.Model',
config:{
fields:['id','recordId','name','icon','vicinity']
}
})
DOM Manipulation
DOM Manipulation
- Example - jQuery
- Meant for Manipulating DOM Objects & attributes
- Other Examples
- ZeptoUI
- XUI
AMD
AMD
(Asynchronous Module Definitions)
- Allows creation of Modules
- Typically each Module has its own JS file
- One Module can load another, asynchronously
- Modules can be replaced by Mocks for Unit Testing
- Modules can be concatenated and Obfuscated
-
Examples
- RequireJS
- CommonJS
AMD
When Writing JS Libraries following care should be taken
- Your Library can be consumed by Any one
- That person may be using
- RequireJS
- CommonJS
- Directly including JS Library in HTML Page
- Your Library needs to be UMD
- It should load in all possible environments
AMD by ExaMple
Without AMD
<head>
<script src=“model.js”></script>
<script src=“store.js”></script>
<script src=“view.js”></script>
<script src=“controller.js”></script>
<script src=“app.js”></script>
</head>
With AMD
<head>
<script src=“require.js” data-main=“app.js”></script>
</head>
Define Model JS
DEFINE MODEL JS
//Model.js
define(
[],
function(){
return {
"name":"Todo Model"
};
}
);
DEFINE STORE JS
DEFINE STORE JS
//Store.js - with CRUD Operation
define(
[‘Model’],
function(model){
return {
“create”:function(){..},
“retrieve”:function(){..},
“update”:function(){..},
“delete”:function(){..},
};
}
);
DEFINE View JS
DEFINE VIEW JS
//View.js
define(
[’jQuery’,’Model’,’Store'],
function($,model, store){
store.update(model);
//render
$(“.view”).html(…);
return ..;
}
) ;
Define controller js
define controller js
//Controller.js
define(
[’jQuery’,’View’,’Store'],
function($,view, store){
view.setStore(store);
$(“#placeholder”).html(view.el());
return ..;
}
) ;
define app js
define app js
//app.js
require(
[‘jQuery’,’Controller’],
function($,controller){
$(“#loading”).html(“”);
controller.initialize();
}
);
MVC MVP MVVM
MVC
Popular MVP Libraries
- Backbone JS
- Angular JS
- EXTJS, Touch (Sencha)
- Ember JS
- Kendo UI
- Spine JS
- Google Closure
- JavaScript MVC
- Batman
MVP
Popular MVP Libraries
- EXTJS GWT (Sencha)
MVVM
POpular MVVM libraries
- Knockout JS
- Kendo UI MVVM
Popular MV* Framework
Micro Templates
Template Example
<div id="placeholder"></div>
<script type="text/javascript">
// Compile the template using underscore
var tmplTxt = $("#search_template").html()
//_ stands for underscroe
var template = _.template(tmplTxt, {label:"Hello World"} );
$("placeholder").html( template );
</script>
//Template put in the script tag
<script type="text/template" id="search_template">
<label><%=label%></label>
<input type="text" id="search_input" />
<input type="button" id="search_button" value="Search" />
</script>
Popular JavaSCript Templates
Logic Less Templates
History & Routers
How Routers work?
How Routers Work?
JavaSCript Routing Libs
Data Bound Views
DAta Bound Views
DECLARATIVE UI Binding
Knockout example
<table>
<tbody data-bind="foreach: seats">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: meal().mealName"></td>
<td data-bind="text: meal().price"></td>
</tr>
</tbody>
</table>
Angular js
<!doctype html>
<html ng-app>
<head>
<script src="/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input
type="text"
ng-model="yourName"
placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
CSS Optimization
SASS Variables
SASS Nesting
SASS Mixins
SASS Selector inheritance
Mobile Apps
Mobile Apps
- Sencha Touch
- PhoneGap
- Trigger IO
- MoSync
SPA POST PRODUCTION
JAvascript obfuscation
- Require JS Optimization
- Uglify JS
- YUI Compressor
- Google Closure Compiler
- JSMin
html5 SEO optimization
Allow google to crawl HTML5 Site
- ESCAPED FRAGMENTS
- Read more - AJAX Crawling
References
- http://www.freedigitalphotos.net/ for Images
- http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more
Q & A
Contact US
Twitter Contacts
- Rohit Ghatol : @rohitghatol
- Synerzip: @SynerzipWebinar