2. Last decade of webapplications Thin client Fat server

5. What’s wrong with “standard” web application web application

15. What happened lately, so it is all possible ? ?

21. Database storage Client side database accessed from JavaScript. db = openDatabase("dbUsers", "1.0", "UsersDatabase", 300000);db.transaction(function(tx) { tx.executeSql("CREATE TABLE users (id REAL, name STRING, email STRING)"); });db.transaction(function(tx) { tx.executeSql("SELECT * FROM users”, [], function(tx, result) { alert(result.rows.item(0)['email']); }); }); Already implemented in Safari 4 and for all browser but opera through Gears project W3C specification: http://www.w3.org/TR/offline-webapps/#sql

22. Database storage No ORM by default. • ActiveRecordJS - AR implementation by Aptana • JazzRecord - a lso AR imp lementation • JStORM • jBati - insp ired b y iBatis Ready solutions: http://www.w3.org/TR/webstorage/#sql

23. local & session storage sessionStorage['friendIds'] = [1,2,3];// reload page alert(sessionStorage['friendIds']); sessionStorage - really easy API // examples : localStorage.loginKey = "randomStringKey123";alert(localStorage.loginKey); // => "randomStringKey123" if (!localStorage.getItem('firstVisit')) localStorage.setItem('firstVisit', Date()); localStorage.key(1); // => ‘firstVisit’localStorage.clear(); More info: http://www.w3.org/TR/webstorage/ localStorage

25. Offline Caching - manifest file Manifest file Allows to specify what request responses browser should cache and use while offline (or online too). CACHE MANIFEST# v1 http://www.LunarLogicPolska.com/index.html http://www.LunarLogicPolska.com/logo.png / logohttp://www.LunarLogicPolska.com/user _profile_template.html /user_template.html

26. Offline Caching - check status document.body.addEventListener("offline", function () { alert("We are offline");}, false);// Similar event for online event “offline” window.navigator property window.navigator.onLine // returns false if definitely offline or true when possibly online

27. Offline caching online Offline caching can be used also online ! The prize is performance

28. Geolocation function showMap(position) { // Show a map centered at // (position.coords.latitude, position.coords.longitude).}// One-shot position request.navigator.geolocation.getCurrentPosition(showMap); Browsers : FF3.5, Safari for iPhone, Opera (now separate build), IE8 (experimental support), or in most by Gears source and more examples: http://www.w3.org/TR/2008/WD-geolocation-API-20081222/#introduction Returns users position (few ways to detect it)

29. Canvas http://www.whatwg.org/specs/web-apps/current-work/#the-canvas https://developer.mozilla.org/en/drawing_graphics_with_canvas Allows to “draw” with JavaScript More info:

31. Example workflow Browser DB sessionStorage offline Cache browser manifest file JS ORM JS REST (JSON) Templates, static files SQL JS DB SQL {key: val} Server

32. Example workflow Browser DB sessionStorage offline Cache browser manifest file JS ORM JS REST (JSON) Templates, static files SQL JS Preserve JavaScriptDB DB SQL {key: val} Server

33. Example - practice Homepage:- template and static files cached by manifest file - signed in user's data get with JSON format and saved in local storage Start page - static files already taken from cache (manifest) - get template of start page - page data loaded in JSON format and saved in local storage Friend's profile - static files taken from cache - get template for profile page - get JSON formated data about the user second friend's profile - static files - from cache - template from cache - just get data about the user