Krug Fat Client

1,831 views

Published on

Published in: Technology, Self Improvement
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,831
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Krug Fat Client

  1. 1. Fat client 2009: JavaScript <ul><li>Maciej Książek (www.drclick.pl) </li></ul><ul><li>for Krakow Ruby Users Group </li></ul><ul><li>ruby.org.pl </li></ul>June 2009
  2. 2. Last decade of webapplications Thin client Fat server
  3. 3. Last decade - summary <ul><li>Websites were more documents then applications </li></ul><ul><li>JavaScript used only for simple interface checks </li></ul><ul><li>The only storage is the server or cookie (max 4 kb) </li></ul><ul><li>JavaScript is extremely slow, incompatible for different browsers </li></ul><ul><li>Network bandwidth very low </li></ul><ul><li>User machines not so powerful </li></ul>
  4. 4. Is it natural ? <ul><li>Previously the client was doing more then showing single document </li></ul><ul><li>Server was used mostly as a storage and business logic </li></ul><ul><li>Over the years good architectures established with optimally shared load of work between C/S </li></ul>NO! What was before? (before www era)
  5. 5. What’s wrong with “standard” web application web application
  6. 6. 1. Response times <ul><li>Relatively high </li></ul><ul><li>Network operation will always be slower then local operation </li></ul>
  7. 7. 2. Distribution of work <ul><li>Servers are doing all the job </li></ul><ul><li>Clients are very often almost idle </li></ul><ul><li>Processor power of all users compared to even farm of few servers is extremely higher </li></ul>
  8. 8. 3. Sessions <ul><li>Client’s state is handled by Server ! WTF ? </li></ul><ul><li>Example of webstore transaction </li></ul>Would this term exist at all ?
  9. 9. 4. Interface on server <ul><li>HTML, Javascript -should be Client’s job! </li></ul><ul><li>It is NOT natural ! </li></ul><ul><li>More complicated then it should be ! </li></ul>Interface is produced on server side !
  10. 10. 5. JavaScript itself <ul><li>Slow, OK very slow </li></ul><ul><li>Single threaded </li></ul><ul><li>No access to any storage directly </li></ul>
  11. 11. 6. No offline support <ul><li>No way to work offline </li></ul><ul><li>Even browser has cached content </li></ul>
  12. 12. What’s next ? <ul><li>Still server does interface job (server responses with HTML or even JavaScript ) </li></ul><ul><li>Every state change involves server </li></ul>AJAX (typical approach) just step forward
  13. 13. Web application 2010 <ul><li>Business logic </li></ul><ul><li>Storage and data exchange </li></ul><ul><li>Mostly returning data (as JSON, yml, xml etc) </li></ul><ul><li>Security </li></ul><ul><li>Serving client application (templates + Javascript Sources) </li></ul>Server jobs:
  14. 14. Web application 2010 <ul><li>Interface logic (also keeps templates, static files cached ) </li></ul><ul><li>Operate on data locally (local storage, session storage, SQLite) </li></ul><ul><li>Exchange data with server (only when expected by business logic and when online) </li></ul><ul><li>&quot;Session&quot; </li></ul>Client jobs:
  15. 15. What happened lately, so it is all possible ? ?
  16. 16. New browsers came out this year: <ul><li>Firefox 3.5(RC for now) </li></ul><ul><li>Safari 4.0 </li></ul><ul><li>Internet Explorer 8 </li></ul><ul><li>Chrome </li></ul><ul><li>Opera 10 (beta now) </li></ul>
  17. 17. New faster JavaScript engines : <ul><li>V8 - Google Chrome </li></ul><ul><li>TraceMonkey - Firefox 3.5 </li></ul><ul><li>SquirrelFish - Safari 4.0 </li></ul>JIT - just in time compilation, compiling JS code into native machine code (byte code interpreter eliminated) Much faster then their predecessors !
  18. 18. HTML5 closer and closer <ul><li>LocalStorage and sessionStorage </li></ul><ul><li>Databse Storage </li></ul><ul><li>Canvas </li></ul><ul><li>Worker threads </li></ul><ul><li>Geolocation </li></ul>Important features:
  19. 19. HTML5 closer and closer <ul><li>Better audio video support </li></ul><ul><li>Post message (communication between frames) </li></ul><ul><li>Requests across domains </li></ul><ul><li>Offline support (FF3 and IE8 or via Gears in all but Opera) </li></ul><ul><li>Cross document messaging http://www.whatwg.org/specs/web-apps/current-work/# crossDocumentMessages </li></ul><ul><li>and more....(client side validation, drag&drop, nativeJSON support) </li></ul>
  20. 20. HTML5 closer and closer <ul><li>specification is not final </li></ul><ul><li>new browsers support most of the features </li></ul>
  21. 21. Database storage Client side database accessed from JavaScript. db = openDatabase(&quot;dbUsers&quot;, &quot;1.0&quot;, &quot;UsersDatabase&quot;, 300000);db.transaction(function(tx) { tx.executeSql(&quot;CREATE TABLE users (id REAL, name STRING, email STRING)&quot;); });db.transaction(function(tx) { tx.executeSql(&quot;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. 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. 23. local & session storage sessionStorage['friendIds'] = [1,2,3];// reload page alert(sessionStorage['friendIds']); sessionStorage - really easy API // examples : localStorage.loginKey = &quot;randomStringKey123&quot;;alert(localStorage.loginKey); // => &quot;randomStringKey123&quot; if (!localStorage.getItem('firstVisit')) localStorage.setItem('firstVisit', Date()); localStorage.key(1); // => ‘firstVisit’localStorage.clear(); More info: http://www.w3.org/TR/webstorage/ localStorage
  24. 24. local & session storage <ul><li>only flat structure and only strings </li></ul><ul><ul><li>with native JSON support can be easy extended </li></ul></ul><ul><li>currently supported by Safari 4, FireFox 3.5, IE8 </li></ul>
  25. 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. 26. Offline Caching - check status document.body.addEventListener(&quot;offline&quot;, function () { alert(&quot;We are offline&quot;);}, false);// Similar event for online event “offline” window.navigator property window.navigator.onLine // returns false if definitely offline or true when possibly online
  27. 27. Offline caching online Offline caching can be used also online ! The prize is performance
  28. 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. 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:
  30. 30. Other tools <ul><li>JAXER - Ajax server (APTANA) </li></ul><ul><li>REST clients in JS : Jester and ActiveJAX </li></ul><ul><li>JavaScript accessible databases: Preserve’s JavascriptDB, DBSlayer </li></ul>
  31. 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. 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. 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
  34. 34. Impact on Ruby community <ul><li>Most of us code mostly in Rails = web applications </li></ul><ul><li>Good sign for Ruby ? </li></ul><ul><ul><li>when server used rarely = language performance matters less </li></ul></ul><ul><ul><li>better scalability </li></ul></ul>
  35. 35. Impact on Ruby community <ul><li>Flexible, quickly reacting community: </li></ul><ul><ul><li>big chances to take lead in new areas </li></ul></ul><ul><li>New frameworks </li></ul><ul><ul><li>server-side support still needed </li></ul></ul><ul><ul><li>generate “standard” HTML for SEO </li></ul></ul><ul><ul><li>Rails.... Merb... Sinatra.. - simple, flexible background for them </li></ul></ul>
  36. 36. Questions <ul><li>Maciej Książek ( www.drclick.pl ) </li></ul><ul><li>for Krakow Ruby Users Group </li></ul><ul><li>www.ruby.org.pl </li></ul><ul><li>ruby.org.pl </li></ul>June 2009

×