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:

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)

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