Your SlideShare is downloading. ×
Mobile webapplication development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Mobile webapplication development

1,127
views

Published on

Prese

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,127
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Native scripting language for Java
  • Transcript

    • 1. Mobile : Webapp development Ganesh Gembali Consultant Xebia IT Architects Pvt Ltd
    • 2.
      • 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
    • 3.  
    • 4. HTML5 APIs
      • Geolocation
      • WebStorage
      • WebWorker
      • WebSockets
      • Canvas
    • 5. Geolocation API
    • 6. 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"); } }
    • 7. Geolocation API
      • navigator.geolocation.getCurrentPosition()
      • method takes three patameters :
      • Success callback - mandatory
      • Error callback - optinal
      • PositionOptions - optional
    • 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 ; };
    • 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 :
      • Session Storage
      • 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() ; };
    • 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); }); }
    • 14.
      • “ 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
    • 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
    • 16. Worker-Syntax <script> var worker = new Worker('worker.js'); worker.postMessage('Hello Guest'); worker.onmessage = function (event) { alert(event.data); }; </script>
    • 17. 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
    • 18. 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;);
      • }
    • 19. Web Workers : Usecases
      • Games
      • Graphics
      • Crypto
      • Syntax highlighting while code editing
      • perform processor-intensive calculations without blocking the user interface thread.
    • 20. Web Sockets
    • 21.
      • Long polling
      • Comet based solutions
      All these work arounds attempt to enable full duplex communication using hacks in HTTP. Workarounds – Pre ws://
    • 22.
      • 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
    • 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”); }
    • 24. HTML-5 Canvas
    • 25. History
    • 26. What it is not
    • 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'); }
    • 28.
      • Thank you
    • 29.