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
Top Related