Mobile webapplication development
Upcoming SlideShare
Loading in...5
×
 

Mobile webapplication development

on

  • 1,402 views

Prese

Prese

Statistics

Views

Total Views
1,402
Views on SlideShare
1,402
Embed Views
0

Actions

Likes
0
Downloads
22
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Native scripting language for Java

Mobile webapplication development Mobile webapplication development Presentation Transcript

  • Mobile : Webapp development Ganesh Gembali Consultant Xebia 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
  •  
  • HTML5 APIs
    • Geolocation
    • WebStorage
    • WebWorker
    • WebSockets
    • Canvas
  • Geolocation API
  • Geolocation API function 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"); } }
  • Geolocation API
    • navigator.geolocation.getCurrentPosition()
    • method takes three patameters :
    • Success callback - mandatory
    • Error callback - optinal
    • PositionOptions - optional
  • 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 ; };
  • 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 ; };
  • 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);
  • Web Storage
    • This specification introduces two related mechanisms, similar to HTTP session cookies, for storing structured data on the client side :
    • Session Storage
    • Local Storage
  • 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.js Manages DOM onMessage Manages DOM, Renders UI jworker.js Main.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(&quot;Completed:&quot; + j + &quot;iterations&quot;);
    • }
  • Web Workers : Usecases
    • Games
    • Graphics
    • Crypto
    • Syntax highlighting while code editing
    • perform processor-intensive calculations without blocking the user interface thread.
  • Web Sockets
    • Long polling
    • Comet based solutions
    All these work arounds attempt to enable full duplex communication using hacks in HTTP. Workarounds – Pre ws://
    • Web Socket is a new protocol.
    • WebSocket is layered over TCP.
    • It enables full duplex communication between the client and server using a dedicated tcp socket.
    • 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=&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'); }
    • Thank you
  •