mobile webapplication development
DESCRIPTION
PreseTRANSCRIPT
![Page 1: Mobile webapplication development](https://reader035.vdocuments.net/reader035/viewer/2022062703/554ea13db4c905977e8b4632/html5/thumbnails/1.jpg)
Mobile : Webapp development
Ganesh GembaliConsultantXebia IT Architects Pvt Ltd
![Page 2: Mobile webapplication development](https://reader035.vdocuments.net/reader035/viewer/2022062703/554ea13db4c905977e8b4632/html5/thumbnails/2.jpg)
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
![Page 3: Mobile webapplication development](https://reader035.vdocuments.net/reader035/viewer/2022062703/554ea13db4c905977e8b4632/html5/thumbnails/3.jpg)
![Page 4: Mobile webapplication development](https://reader035.vdocuments.net/reader035/viewer/2022062703/554ea13db4c905977e8b4632/html5/thumbnails/4.jpg)
Geolocation
WebStorage
WebWorker
WebSockets
Canvas
HTML5 APIs
![Page 5: Mobile webapplication development](https://reader035.vdocuments.net/reader035/viewer/2022062703/554ea13db4c905977e8b4632/html5/thumbnails/5.jpg)
Geolocation API
5
![Page 6: Mobile webapplication development](https://reader035.vdocuments.net/reader035/viewer/2022062703/554ea13db4c905977e8b4632/html5/thumbnails/6.jpg)
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");
}
}
![Page 7: Mobile webapplication development](https://reader035.vdocuments.net/reader035/viewer/2022062703/554ea13db4c905977e8b4632/html5/thumbnails/7.jpg)
7
Geolocation API
navigator.geolocation.getCurrentPosition()
method takes three patameters :
1. Success callback - mandatory
2. Error callback - optinal
3. PositionOptions - optional
![Page 8: Mobile webapplication development](https://reader035.vdocuments.net/reader035/viewer/2022062703/554ea13db4c905977e8b4632/html5/thumbnails/8.jpg)
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;
};
![Page 9: Mobile webapplication development](https://reader035.vdocuments.net/reader035/viewer/2022062703/554ea13db4c905977e8b4632/html5/thumbnails/9.jpg)
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;
};
![Page 10: Mobile webapplication development](https://reader035.vdocuments.net/reader035/viewer/2022062703/554ea13db4c905977e8b4632/html5/thumbnails/10.jpg)
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);
![Page 11: Mobile webapplication development](https://reader035.vdocuments.net/reader035/viewer/2022062703/554ea13db4c905977e8b4632/html5/thumbnails/11.jpg)
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
![Page 12: Mobile webapplication development](https://reader035.vdocuments.net/reader035/viewer/2022062703/554ea13db4c905977e8b4632/html5/thumbnails/12.jpg)
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();
};
![Page 13: Mobile webapplication development](https://reader035.vdocuments.net/reader035/viewer/2022062703/554ea13db4c905977e8b4632/html5/thumbnails/13.jpg)
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);
});
}
![Page 14: Mobile webapplication development](https://reader035.vdocuments.net/reader035/viewer/2022062703/554ea13db4c905977e8b4632/html5/thumbnails/14.jpg)
“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
![Page 15: Mobile webapplication development](https://reader035.vdocuments.net/reader035/viewer/2022062703/554ea13db4c905977e8b4632/html5/thumbnails/15.jpg)
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
![Page 16: Mobile webapplication development](https://reader035.vdocuments.net/reader035/viewer/2022062703/554ea13db4c905977e8b4632/html5/thumbnails/16.jpg)
Worker-Syntax
<script>var worker = new Worker('worker.js');
worker.postMessage('Hello Guest');
worker.onmessage = function (event) { alert(event.data);
};
</script>
![Page 17: Mobile webapplication development](https://reader035.vdocuments.net/reader035/viewer/2022062703/554ea13db4c905977e8b4632/html5/thumbnails/17.jpg)
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
![Page 18: Mobile webapplication development](https://reader035.vdocuments.net/reader035/viewer/2022062703/554ea13db4c905977e8b4632/html5/thumbnails/18.jpg)
Example-1 Big Loop Demo
function bigLoop(){ for(var i = 0;i <= 10000000000; i += 1) {
var j = i; } alert("Completed:" + j + "iterations"); }
![Page 19: Mobile webapplication development](https://reader035.vdocuments.net/reader035/viewer/2022062703/554ea13db4c905977e8b4632/html5/thumbnails/19.jpg)
Web Workers : Usecases Games
Graphics
Crypto
Syntax highlighting while code editing
perform processor-intensive calculations without
blocking the user interface thread.
![Page 20: Mobile webapplication development](https://reader035.vdocuments.net/reader035/viewer/2022062703/554ea13db4c905977e8b4632/html5/thumbnails/20.jpg)
Web Sockets
![Page 21: Mobile webapplication development](https://reader035.vdocuments.net/reader035/viewer/2022062703/554ea13db4c905977e8b4632/html5/thumbnails/21.jpg)
1. Long polling2. Comet based solutions
All these work arounds attempt to enable full duplex communication using hacks in HTTP.
Workarounds – Pre ws://
![Page 22: Mobile webapplication development](https://reader035.vdocuments.net/reader035/viewer/2022062703/554ea13db4c905977e8b4632/html5/thumbnails/22.jpg)
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
![Page 23: Mobile webapplication development](https://reader035.vdocuments.net/reader035/viewer/2022062703/554ea13db4c905977e8b4632/html5/thumbnails/23.jpg)
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”);
}
![Page 24: Mobile webapplication development](https://reader035.vdocuments.net/reader035/viewer/2022062703/554ea13db4c905977e8b4632/html5/thumbnails/24.jpg)
HTML-5 Canvas
![Page 25: Mobile webapplication development](https://reader035.vdocuments.net/reader035/viewer/2022062703/554ea13db4c905977e8b4632/html5/thumbnails/25.jpg)
History
![Page 26: Mobile webapplication development](https://reader035.vdocuments.net/reader035/viewer/2022062703/554ea13db4c905977e8b4632/html5/thumbnails/26.jpg)
What it is not
![Page 27: Mobile webapplication development](https://reader035.vdocuments.net/reader035/viewer/2022062703/554ea13db4c905977e8b4632/html5/thumbnails/27.jpg)
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');}
![Page 28: Mobile webapplication development](https://reader035.vdocuments.net/reader035/viewer/2022062703/554ea13db4c905977e8b4632/html5/thumbnails/28.jpg)
Thank you
![Page 29: Mobile webapplication development](https://reader035.vdocuments.net/reader035/viewer/2022062703/554ea13db4c905977e8b4632/html5/thumbnails/29.jpg)