Mobile : Webapp development

Ganesh GembaliConsultantXebia IT Architects Pvt Ltd

From Btech 2003-07

Interested in Agile and technology trends

Working with Xebia since 4 years

Love playing multi-player games (I am really

missing them )

Traveling and cooking

About me

Geolocation

WebStorage

WebWorker

WebSockets

Canvas

HTML5 APIs

Geolocation API

5

6

Geolocation APIfunction getGEO() {

// First check if your browser supports the geolocation API

if (navigator.geolocation) {

alert("HTML 5 is getting your location");

// Get the current position

navigator.geolocation.getCurrentPosition(

function(position) {

alert(position.coords.latitude);

alert(position.coords.longitude);

});

} else {

alert("Sorry... your browser does not support the HTML5 GeoLocation API");

}

}

7

Geolocation API

navigator.geolocation.getCurrentPosition()

method takes three patameters :

1. Success callback - mandatory

2. Error callback - optinal

3. PositionOptions - optional

8

Success callback argumentsinterface Position {

readonly attribute Coordinates coords;

readonly attribute DOMTimeStamp timestamp;

};

interface Coordinates {

readonly attribute double latitude;

readonly attribute double longitude;

readonly attribute double? altitude;

readonly attribute double accuracy;

readonly attribute double? altitudeAccuracy;

readonly attribute double? heading;

readonly attribute double? speed;

};

9

Error callback arguments

interface PositionError {

const unsigned short PERMISSION_DENIED = 1;

const unsigned short POSITION_UNAVAILABLE = 2;

const unsigned short TIMEOUT = 3;

readonly attribute unsigned short code;

readonly attribute DOMString message;

};

10

Repeated position updates

function scrollMap(position) {

// Scrolls the map so that it is centered at (position.coords.latitude,position.coords.longitude).

}

// Request repeated updates.

navigator.geolocation.watchPosition(scrollMap);

11

Web Storage

This specification introduces two related mechanisms,

similar to HTTP session cookies, for storing structured

data on the client side :

1.Session Storage

2.Local Storage

12

Storage Interface

interface Storage {

readonly attribute unsigned long length;

DOMString key(in unsigned long index);

getter any getItem(in DOMString key);

setter creator void setItem(in DOMString key, in any value);

deleter void removeItem(in DOMString key);

void clear();

};

Web SQL

interface WindowDatabase {

Database openDatabase(in DOMString name, in DOMString version,

in DOMString displayName, in unsigned long estimatedSize,

in optional DatabaseCallback creationCallback);

};

function prepareDatabase(ready, error) {

return openDatabase('documents', '1.0', 'Offline document storage', 5*1024*1024, function (db) {

db.changeVersion('', '1.0', function (t) {

t.executeSql('CREATE TABLE docids (id, name)');

}, error);

});

}

“A simple script that runs in a separate thread”

Multithreaded processing of javascript

Performing processor-intensive tasks

Performance: Javascript's poor performance and its

single threaded nature.

Engines like Chrome's V8 and Safari's Nitro, have

made single-threaded performance pretty good

Web workers

var worker = new Worker(“jworker.js”);

main.jsManages

DOM

onMessage

Manages DOM,

Renders UI

jworker.jsMain.js jWorker.js

postMessage

Process task

Message

WebWorker Object Lifecycle

Worker-Syntax

<script>var worker = new Worker('worker.js');

worker.postMessage('Hello Guest');

worker.onmessage = function (event) { alert(event.data);

};

</script>

What you can do inside worker

postMessage and listen messages

close, to end the current worker

Set event listeners

XMLHttpRequest, for Ajax requests

Timers

Core JavaScript functions: eval, isNaN, escape, etc.

Location object,href of the worker script

Web Sockets

Web SQL Databases

Web Workers

importScripts

Example-1 Big Loop Demo

function bigLoop(){ for(var i = 0;i <= 10000000000; i += 1) {

var j = i; } alert("Completed:" + j + "iterations"); }

Web Workers : Usecases Games

Graphics

Crypto

Syntax highlighting while code editing

perform processor-intensive calculations without

blocking the user interface thread.

Web Sockets

1. Long polling2. Comet based solutions

All these work arounds attempt to enable full duplex communication using hacks in HTTP.

Workarounds – Pre ws://

1. Web Socket is a new protocol.

2. WebSocket is layered over TCP.

3. It enables full duplex communication between the

client and server using a dedicated tcp socket.

4. It increases the efficiency by reducing the size of

overhead sent with the actual data.

WebSocket - Native Support

Simple Implementation

var socket = new WebSocket(“ws://localhost:8787/socket/server”);

socket.onopen = function(event){log(“WebSocket connection established”);

}

socket.onmessage = function(event){log(“Received message with date

=”+event.data); }

socket.onerror = function(event){log(“Error occurred”);

}

Socket.onclose = function(event){log(“connection closed”);

}

HTML-5 Canvas

History

What it is not

Canvas element

<canvas id="stockGraph" width="150" height="150">

You browser doesn't support canvas.</canvas>

var canvas = document.getElementById('tutorial');if (canvas.getContext){

var ctx = canvas.getContext('2d');}

Thank you