Krug Fat Client

Fat client 2009: JavaScript Maciej Książek (www.drclick.pl) for Krakow Ruby Users Group ruby.org.pl June 2009

Last decade of webapplications Thin client Fat server

Last decade - summary Websites were more documents then applications JavaScript used only for simple interface checks The only storage is the server or cookie (max 4 kb) JavaScript is extremely slow, incompatible for different browsers Network bandwidth very low User machines not so powerful

Is it natural ? Previously the client was doing more then showing single document Server was used mostly as a storage and business logic Over the years good architectures established with optimally shared load of work between C/S NO! What was before? (before www era)

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

1. Response times Relatively high Network operation will always be slower then local operation

2. Distribution of work Servers are doing all the job Clients are very often almost idle Processor power of all users compared to even farm of few servers is extremely higher

3. Sessions Client’s state is handled by Server ! WTF ? Example of webstore transaction Would this term exist at all ?

4. Interface on server HTML, Javascript -should be Client’s job! It is NOT natural ! More complicated then it should be ! Interface is produced on server side !

5. JavaScript itself Slow, OK very slow Single threaded No access to any storage directly

6. No offline support No way to work offline Even browser has cached content

What’s next ? Still server does interface job (server responses with HTML or even JavaScript ) Every state change involves server AJAX (typical approach) just step forward

Web application 2010 Business logic Storage and data exchange Mostly returning data (as JSON, yml, xml etc) Security Serving client application (templates + Javascript Sources) Server jobs:

Web application 2010 Interface logic (also keeps templates, static files cached ) Operate on data locally (local storage, session storage, SQLite) Exchange data with server (only when expected by business logic and when online) "Session" Client jobs:

What happened lately, so it is all possible ? ?

New browsers came out this year: Firefox 3.5(RC for now) Safari 4.0 Internet Explorer 8 Chrome Opera 10 (beta now)

New faster JavaScript engines : V8 - Google Chrome TraceMonkey - Firefox 3.5 SquirrelFish - Safari 4.0 JIT - just in time compilation, compiling JS code into native machine code (byte code interpreter eliminated) Much faster then their predecessors !

HTML5 closer and closer LocalStorage and sessionStorage Databse Storage Canvas Worker threads Geolocation Important features:

HTML5 closer and closer Better audio video support Post message (communication between frames) Requests across domains Offline support (FF3 and IE8 or via Gears in all but Opera) Cross document messaging http://www.whatwg.org/specs/web-apps/current-work/# crossDocumentMessages and more....(client side validation, drag&drop, nativeJSON support)

HTML5 closer and closer specification is not final new browsers support most of the features

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

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

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

local & session storage only flat structure and only strings with native JSON support can be easy extended currently supported by Safari 4, FireFox 3.5, IE8

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

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

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

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)

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:

Other tools JAXER - Ajax server (APTANA) REST clients in JS : Jester and ActiveJAX JavaScript accessible databases: Preserve’s JavascriptDB, DBSlayer

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

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

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

Impact on Ruby community Most of us code mostly in Rails = web applications Good sign for Ruby ? when server used rarely = language performance matters less better scalability

Impact on Ruby community Flexible, quickly reacting community: big chances to take lead in new areas New frameworks server-side support still needed generate “standard” HTML for SEO Rails.... Merb... Sinatra.. - simple, flexible background for them

Questions Maciej Książek ( www.drclick.pl ) for Krakow Ruby Users Group www.ruby.org.pl ruby.org.pl June 2009

Krug Fat Client

Recommended

More Related Content

What's hot (20)

Similar to Krug Fat Client (20)

Recently uploaded (20)

Krug Fat Client