Fat client 2009:

JavaScriptMaciej 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

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 storageClient 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 - also AR implementation• JStORM  • jBati - inspired by 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# v1http://www.LunarLogicPolska.com/index.htmlhttp://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

DB

SQLSQL

Browser DB

{key: {key: val}val}

sessionStorageServer

offline Cache

browsermanifest file

JS ORM

JS REST (JSON)

Templates, static files

SQLJS

Example workflow

DB

SQLSQL

Browser DB

{key: {key: val}val}

sessionStorageServer

offline Cache

browsermanifest file

JS ORM

JS REST (JSON)

Templates, static files

SQLJS

Preserve JavaScriptDB

Example - practiceHomepage:- 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 usersecond 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.plruby.org.pl

June 2009