HTML5 is Here!

Now Learn the EcoSystem 


About the speaker

  • Rohit Ghatol 
  • Primarily a Technology Evangelist @ Heart
  • Director of Engineering @ Synerzip

Topics

  1. Why HTML5?
  2. Proof of Arrival of HTML5
  3. HTML5 & SPA
  4. HTML5 Features
  5. SPA EcoSystem





                                                  

Why HTML?



                   Main Reasons for high adoption rate
  1. Smart Phones driving Internet Usage
  2. Better Standards & Support
  3. Feature Rich Specs

SmartPhones


Better Standards and Support

  1. WHATWG and W3C Working together
  2. Major Web/Browser Companies behind WHATWG
  3. Fast Face HTML5 Feature Development & Reporting
    1. http://www.html5please.com
    2. http://www.html5test.com
    3. http://www.caniuse.com
  4. PolyFills/Shims - Workarounds
    1. Bringing HTML5 features to old browsers

WhatWG

HTML5Please.com

HTML5Test.com

CanIUse.com

HTML5 Polyfills/Shim


Bringing HTML5 features to old browsers

Topics

  1. Why HTML5?
  2. Proof of Arrival of HTML5
  3. HTML5 & SPA
  4. HTML5 EcoSystem
  5. SPA EcoSystem





                                                  

Proof of Arrival

  1. Overview of Current HTML5 Adoption
  2. Popular Products on Internet
  3. Products Developed @ Synerzip

Overview of html5 adoption

When a Product claims to be HTML5, it really means
  1. They use Single Page Application concept
  2. Use JavaScript heavily for RIA
  3. Use Few HTML5 Features
  4. Most popular being
    1. History (#)
    2. Charts using SVG or Canvas
    3. Videos/Audio Tags (more so on iPad)
    4. Media Queries for Responsive UI 
  5. Have fall back mechanisms for older browser
    1. Polyfills/Shims
    2. 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

  1. Built as a Google Chrome Extension
  2. Built as a Hybrid Product. Part HTML5 Part C++
  3. Built as Single Page Application
  4. Uses History and Canvas (heavily)

EveryLog




EveryLog

  1. Built as a Single Page Application
  2. Uses RequireJs, jQuery, BackboneJS, UnderScore
  3. Uses Facebook APIs
  4. Uses HTML5 Features like 
    1. History for navigation
    2. & Canvas for charts

Fuel quest

FUEL QUEST

  1. Built on GWT using EXT GWT
  2. Uses MVP Pattern internally
  3. Is a Single Page Application
  4. Internally uses HTML5 features like
    1. History for navigation
    2. SVG for Charts

Other


  1. 3-5 more HTML5 Product being developed
  2. HTML5 is a new common denominator
  •  for new product requests from prospects

Topics

  1. Why HTML5?
  2. Proof of Arrival of HTML5
  3. HTML5 & SPA
  4. HTML5 EcoSystem
  5. SPA EcoSystem





                                                  

HTML5 & SPA

  1. SPA stands for Single Page Applications
  2. SPA EcoSystem is vast
  3. HTML5 is one of the many aspects of SPA


SPA EcoSystem


Topics

  1. Why HTML5?
  2. Proof of Arrival of HTML5
  3. HTML5 & SPA
  4. HTML5 EcoSystem
  5. SPA EcoSystem





                                                  

HTML5 Key Features

*




Semantic Tags

From DIV Hell 
    
<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

Status:  Caution  with PolyFill

Recommended polyfills: 

webshims, html5widgets,

Number polyfill




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

Status:  Use with PolyFill


Recommended polyfills: 

mediaelementjs






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

Status:  Use with PolyFill

Recommended polyfills: 

FlashCanvas, ExplorerCanvas


WebGL Demo

STATUS : WEbGL

Status:  Caution  with PolyFill

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

Status:  Use with PolyFill

Recommended polyfills: 

SVGWeb


Popular JS libraries

  1. D3 JS (SVG)
  2. Raphael JS (SVG)
  3. Two JS (Canvas)
  4. Kinect JS (Canvas)
  5. Three JS (WebGL)
  6. X3DOM (WebGL)
  7. etc

HTML5 Key Features

*




Local Storage

Local-Storage

Session-Storage
Similar to Local Storage except following

  1. Values are persisted per tab for user session
  2. Closing & Opening Browser will clear session storage
  3. Meant for storing user session information

STATUS : LocalStorage

* Status:  Caution with PolyFill

Recommended polyfills: 

Remy’s storage polyfill, sessionstorage





INDEXED DB

INDEXED DB

  1. This is an Object Store Database
  2. Capable of storing JavaScript objects
  3. The Objects can be indexed, hence the name
  4. Provides Asynchronous methods to
    1. Create Database
    2. Create Object Store
    3. Write to the ObjectStore using Transactions
    4. Query the Object Store
  5. Put in place of deprecated WebSQL

STATUS : INDEXED DB

* Status:  Caution with PolyFill

Recommended polyfills: 

IDBWrapper, IndexedDB Polyfill





Offline Applications

Offline APP Demo

Offline Storage

  1. Provides Mechanism to take Web Site Offline
  2. Manifest.cache lists resources to be cached
  3. Provision to replace online resource with offline ones

STATUS : Offline

* Status:  Caution with Fallback




File & File Reader APIS

File & File Reader Demo

File & FiLE Reader Details

  1. File API provides ways to see file properties
  2. Files are uploaded by 
    1. input type element or
    2. Drag and Drop mechanism
  3. File Reader API is to actually read the data
  4. Both APIs are Asynchronous

STATUS : File & FileREader

Status:  Use with PolyFill

Recommended polyfills: 

FileReader


HTML5 Key Features

*




Web Sockets

Web Socket 


  1. Full Duplex Communication protocol (like TCP/IP)
  2. Both Client & Server have methods to send msg
  3. 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: 

web-socket-js





Server Sent Events

Server Sent Events (SSE)

Allows Server to push data to Browser

  1. Client Send HTTP Request with MimeType - event-stream
  2. Server Caches the Connection 
    1. One time - Server write the header -'content-type': 'text/event-stream'
    2. OnGoing - Server now keeps putting information on the Connection
  3. 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)

Status:  Use with Fallback

Recommended polyfills: 

EventSource.js, jQuery.eventsource





CORS

CORS

(Cross Origin Resource Sharing)

        Important to share history behind CORS

  1. Single Origin Policy of Browser
    1. Ajax Call - http://abc.com -- X --> http://xyz.com 
  2. JSONP was invented as work around 
    1. However difficult to maintain
  3. Proxy were used
    1. Increased Traffic and Cost
  4. Finally CORS came to the rescue

CORS DeMO

CORS DeMO

STATUS - CORS

Status:  Use with PolyFill

Recommended polyfills: 

flXHR (requires crossdomain.xml)





Web RTC

WEBRTC


WebRTC implements three APIs:

  1. MediaStream - Access Camera & Mic
  2. RTCPeerConnection - Establish P2P connection
  3. 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


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

Status:  Use 

Recommended polyfills: 

Respond

 




CSS3 Transforms

CSS3 2D Transform

STATUS - CSS3 Transform

Status:  Use with Fallback 

Recommended polyfills:  

Transformie CSSSandPaper




CSS3 Transition

CSS 3 Transitions

STATUS - CSS3 Transitions

Status:  Use with Fallback 

Recommended polyfills:  

Transformie CSSSandPaper




CSS3 Animation

CSS 3 Animations

STATUS - CSS3 Animation

Status:  Use with Fallback 

HTML5 Key Features

*




Web Worker

Web Worker Demo

Web Worker Explained

Main.js 
var 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

  1. Figure out Browser Analytics before you begin
  2. Plan for Responsive UI from Day One
  3. Use Polyfills to provide functionality to older browser
  • Polyfills can degrade performance & usability
  • Use Modernizr.js for Fallback gracefully
    • Too many Fallbacks increase the cost of development
    • e.g WebGL based model Vs Static Images
  • HTML5 Development is an Balancing Act between
    1. Sacrificing Features
    2. Sacrificing a User base (old Browser users)

    MODERNIZR overview

    1. Modernizr is a feature detection library for HTML5
    2. 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

    1. Why HTML5?
    2. Proof of Arrival of HTML5
    3. HTML5 & SPA
    4. HTML5 EcoSystem
    5. SPA EcoSystem





                                                      

    SPA EcoSystem





    Class System

    Class System

    1. How to define Classes?
    2. How to use inheritance?
    3. 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

    1. Example - jQuery
    2. Meant for Manipulating DOM Objects & attributes
    3. Other Examples
    • ZeptoUI
    • XUI




    AMD

    AMD

    (Asynchronous Module Definitions)
    1. Allows creation of Modules
    2. Typically each Module has its own JS file
    3. One Module can load another, asynchronously 
    4. Modules can be replaced by Mocks for Unit Testing
    5. Modules can be concatenated and Obfuscated
    6. Examples
      • RequireJS
      • CommonJS

    AMD

    When Writing JS Libraries following care should be taken
    1. Your Library can be consumed by Any one
    2. That person may be using
      1. RequireJS
      2. CommonJS
      3. Directly including JS Library in HTML Page
    3. 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

    1. Backbone JS
    2. Angular JS
    3. EXTJS, Touch (Sencha)
    4. Ember JS
    5. Kendo UI
    6. Spine JS
    7. Google Closure
    8. JavaScript MVC
    9. Batman

    MVP


    Popular MVP Libraries

    1. EXTJS GWT (Sencha)

    MVVM


    POpular MVVM libraries

    1. Knockout JS
    2. Kendo UI MVVM

    Popular MV* Framework


    Source of the Chart




    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

    1. underscore.js
    2. Jade
    3. haml-js
    4. jQote2
    5. doT
    6. Stencil
    7. Parrot
    8. Eco
    9. EJS
    10. jQuery templates
    11. node-asyncEJS

    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

    1. Sencha Touch
    2. PhoneGap
    3. Trigger IO
    4. MoSync




    SPA POST PRODUCTION

    JAvascript obfuscation

    1. Require JS Optimization
    2. Uglify JS
    3. YUI Compressor
    4. Google Closure Compiler
    5. JSMin

    html5 SEO optimization


    Allow google to crawl HTML5 Site
    1. ESCAPED FRAGMENTS
    2. Read more - AJAX Crawling

    References

    1. http://www.freedigitalphotos.net/ for Images
    2. http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more




    Q & A

    Contact US

    Twitter Contacts
    1. Rohit Ghatol : @rohitghatol
    2. Synerzip: @SynerzipWebinar

    HTML5 is Here

    By rohitghatol

    Made with Slides.com

    HTML5 is Here

    • 2,624