Mobile : Webapp development Ganesh Gembali Consultant Xebia IT Architects Pvt Ltd
<ul><li>From Btech 2003-07 </li></ul><ul><li>Interested in Agile and technology trends </li></ul><ul><li>Working with Xebi...
 
HTML5 APIs <ul><li>Geolocation </li></ul><ul><li>WebStorage </li></ul><ul><li>WebWorker </li></ul><ul><li>WebSockets </li>...
Geolocation API
Geolocation API function getGEO() { // First check if your browser supports the geolocation API  if (navigator.geolocation...
Geolocation API <ul><li>navigator.geolocation.getCurrentPosition()  </li></ul><ul><li>method takes three patameters : </li...
Success callback arguments interface  Position   {  readonly attribute  Coordinates  coords ;  readonly attribute  DOMTime...
Error callback arguments interface  PositionError  {  const unsigned short PERMISSION_DENIED = 1;  const unsigned short PO...
Repeated position updates function scrollMap(position) {  // Scrolls the map so that it is centered at (position.coords.la...
Web Storage <ul><li>This specification introduces two related mechanisms, similar to HTTP session cookies, for storing str...
Storage Interface interface  Storage   {  readonly attribute unsigned  long length ;  DOMString  key(in unsigned long inde...
Web SQL interface WindowDatabase {  Database openDatabase(in DOMString name, in DOMString version,  in DOMString displayNa...
<ul><li>“ A simple script that runs in a separate thread” </li></ul><ul><li>Multithreaded processing of javascript </li></...
var worker = new Worker(“jworker.js”); main.js Manages DOM  onMessage Manages DOM, Renders UI jworker.js Main.js jWorker.j...
Worker-Syntax <script> var worker = new Worker('worker.js'); worker.postMessage('Hello Guest'); worker.onmessage = functio...
What you can do inside worker <ul><li>postMessage and listen messages  </li></ul><ul><li>close, to end the current worker ...
Example-1 Big Loop  Demo <ul><li>function bigLoop(){ </li></ul><ul><ul><li>for( var  i = 0;i <= 10000000000; i += 1) { </l...
Web Workers  : Usecases <ul><li>Games </li></ul><ul><li>Graphics </li></ul><ul><li>Crypto </li></ul><ul><li>Syntax highlig...
Web Sockets
<ul><li>Long polling </li></ul><ul><li>Comet based solutions </li></ul>All  these work arounds attempt to enable full dupl...
<ul><li>Web Socket is a new protocol. </li></ul><ul><li>WebSocket is layered over TCP. </li></ul><ul><li>It enables full d...
Simple Implementation var socket = new WebSocket(“ws://localhost:8787/socket/server”); socket.onopen = function(event){ lo...
HTML-5    Canvas
History
What it is not
Canvas element <canvas id=&quot;stockGraph&quot; width=&quot;150&quot; height=&quot;150&quot;> You browser doesn't support...
<ul><li>Thank you </li></ul>
 
Upcoming SlideShare
Loading in...5
×

Mobile webapplication development

1,163

Published on

Prese

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,163
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Native scripting language for Java
  • Mobile webapplication development

    1. 1. Mobile : Webapp development Ganesh Gembali Consultant Xebia IT Architects Pvt Ltd
    2. 2. <ul><li>From Btech 2003-07 </li></ul><ul><li>Interested in Agile and technology trends </li></ul><ul><li>Working with Xebia since 4 years </li></ul><ul><li>Love playing multi-player games (I am really missing them ) </li></ul><ul><li>Traveling and cooking </li></ul>About me
    3. 4. HTML5 APIs <ul><li>Geolocation </li></ul><ul><li>WebStorage </li></ul><ul><li>WebWorker </li></ul><ul><li>WebSockets </li></ul><ul><li>Canvas </li></ul>
    4. 5. Geolocation API
    5. 6. Geolocation API function getGEO() { // First check if your browser supports the geolocation API if (navigator.geolocation) { alert(&quot;HTML 5 is getting your location&quot;); // Get the current position navigator.geolocation.getCurrentPosition( function(position) { alert(position.coords.latitude); alert(position.coords.longitude); }); } else { alert(&quot;Sorry... your browser does not support the HTML5 GeoLocation API&quot;); } }
    6. 7. Geolocation API <ul><li>navigator.geolocation.getCurrentPosition() </li></ul><ul><li>method takes three patameters : </li></ul><ul><li>Success callback - mandatory </li></ul><ul><li>Error callback - optinal </li></ul><ul><li>PositionOptions - optional </li></ul>
    7. 8. Success callback arguments interface 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 ; };
    8. 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 ; };
    9. 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);
    10. 11. Web Storage <ul><li>This specification introduces two related mechanisms, similar to HTTP session cookies, for storing structured data on the client side : </li></ul><ul><li>Session Storage </li></ul><ul><li>Local Storage </li></ul>
    11. 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() ; };
    12. 13. 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); }); }
    13. 14. <ul><li>“ A simple script that runs in a separate thread” </li></ul><ul><li>Multithreaded processing of javascript </li></ul><ul><li>Performing processor-intensive tasks </li></ul><ul><li>Performance: Javascript's poor performance and its single threaded nature. </li></ul><ul><ul><ul><li>Engines like Chrome's V8 and Safari's Nitro, have made single-threaded performance pretty good </li></ul></ul></ul>Web workers
    14. 15. var worker = new Worker(“jworker.js”); main.js Manages DOM onMessage Manages DOM, Renders UI jworker.js Main.js jWorker.js postMessage Process task Message WebWorker Object Lifecycle
    15. 16. Worker-Syntax <script> var worker = new Worker('worker.js'); worker.postMessage('Hello Guest'); worker.onmessage = function (event) { alert(event.data); }; </script>
    16. 17. What you can do inside worker <ul><li>postMessage and listen messages </li></ul><ul><li>close, to end the current worker </li></ul><ul><li>Set event listeners </li></ul><ul><li>XMLHttpRequest, for Ajax requests </li></ul><ul><li>Timers </li></ul><ul><li>Core JavaScript functions: eval, isNaN, escape, etc. </li></ul><ul><li>Location object,href of the worker script </li></ul><ul><li>Web Sockets </li></ul><ul><li>Web SQL Databases </li></ul><ul><li>Web Workers </li></ul><ul><li>importScripts </li></ul>
    17. 18. Example-1 Big Loop Demo <ul><li>function bigLoop(){ </li></ul><ul><ul><li>for( var i = 0;i <= 10000000000; i += 1) { </li></ul></ul><ul><li>var j = i; </li></ul><ul><li>} </li></ul><ul><li>alert(&quot;Completed:&quot; + j + &quot;iterations&quot;); </li></ul><ul><li>} </li></ul>
    18. 19. Web Workers : Usecases <ul><li>Games </li></ul><ul><li>Graphics </li></ul><ul><li>Crypto </li></ul><ul><li>Syntax highlighting while code editing </li></ul><ul><li>perform processor-intensive calculations without blocking the user interface thread. </li></ul>
    19. 20. Web Sockets
    20. 21. <ul><li>Long polling </li></ul><ul><li>Comet based solutions </li></ul>All these work arounds attempt to enable full duplex communication using hacks in HTTP. Workarounds – Pre ws://
    21. 22. <ul><li>Web Socket is a new protocol. </li></ul><ul><li>WebSocket is layered over TCP. </li></ul><ul><li>It enables full duplex communication between the client and server using a dedicated tcp socket. </li></ul><ul><li>It increases the efficiency by reducing the size of overhead sent with the actual data. </li></ul>WebSocket - Native Support
    22. 23. 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”); }
    23. 24. HTML-5 Canvas
    24. 25. History
    25. 26. What it is not
    26. 27. Canvas element <canvas id=&quot;stockGraph&quot; width=&quot;150&quot; height=&quot;150&quot;> You browser doesn't support canvas. </canvas> var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); }
    27. 28. <ul><li>Thank you </li></ul>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×