Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Jax Ajax Architecture


Published on

Published in: Technology
  • Be the first to comment

Jax Ajax Architecture

  1. 1. AJAX Architectural Considerations Alois Reitbauer | dyna Trace Software
  2. 2. Things are changing …
  3. 3. AJAX – What it is about
  4. 4. The „New“ Web The „Classical“ Web
  5. 5. Paradigm Shift in Web Apps past now Browser Server
  6. 6. The new runtimes …
  7. 7. <ul><li>usage higher in corporate environments </li></ul>Internet Explorer May 2009, 60%
  8. 8. … some things don‘t
  9. 9. HTTP – The Protocol of the Web <ul><li>Request/Response Protocol </li></ul><ul><li>Synchronous Protocol </li></ul><ul><li>Optimized for Ressource Distribution </li></ul>Browser Server GET /index.html HTTP/1.1 Host: HTTP/1.1 200 OK Content-Type: text/html … .
  10. 10. The Browser
  11. 11. The Anatomy of the Browser JavaScript Engine DOM Renderer Daten XHR Connection Pool .html . .png .js .css .css
  12. 12. What to care about Browser Server JavaScript Performance HTML Rendering AJAX/HTTP calls Latency Datavolume Content construction Network Caching Server
  13. 13. Connection Handling
  14. 14. Understanding Browser Connections <ul><li>Connections are limited by domain </li></ul><ul><ul><li>Guaranteed 2 connections </li></ul></ul><ul><ul><li>Most browsers use 4 </li></ul></ul><ul><li>Domain sharding can help here </li></ul><ul><ul><li>More Domains for more connections </li></ul></ul><ul><ul><li>Seperate domains by content type </li></ul></ul><ul><ul><li>But not more that 4 </li></ul></ul>
  15. 16. <script src=‘‘ />
  16. 17. Caching No man pays double or twice for the same thing, forasmuch as nothing can be spent but once.   William Petty 
  17. 18. Caching on the Web Clients Server Cache per Client Server providing Caching Information Proxy Cache for Many Clients Serverside Data Cache
  18. 19. State Handling in Web Applications <ul><li>Request State </li></ul><ul><ul><li>State from one request to the next </li></ul></ul><ul><li>Conversational State </li></ul><ul><ul><li>State across several requests </li></ul></ul><ul><ul><li>Needed for a unit of work </li></ul></ul><ul><li>Session State </li></ul><ul><ul><li>State valid and REQUIRED for the whole user session </li></ul></ul>
  19. 20. State and Where to Put It <ul><li>HTTP Session </li></ul><ul><ul><li>Consumes server memory </li></ul></ul><ul><ul><li>Beware of replication (if possible) </li></ul></ul><ul><li>Cookie </li></ul><ul><ul><li>Put small content here </li></ul></ul><ul><ul><li>Can be encrypted </li></ul></ul><ul><li>The Browser </li></ul><ul><ul><li>Specifically in AJAX applications </li></ul></ul><ul><ul><li>Think Rich Client </li></ul></ul>
  20. 21. Understanding HTTP Headers <ul><li>Date </li></ul><ul><ul><li>Defines last modification of a resource </li></ul></ul><ul><li>Expires </li></ul><ul><ul><li>Defines how long this resource is valid </li></ul></ul><ul><li>E-Tag </li></ul><ul><ul><li>Uniquely identifies a resource </li></ul></ul><ul><li>Cache-Control </li></ul><ul><ul><li>Defines caching strategy </li></ul></ul>
  21. 22. Rendering
  22. 23. Rendering <ul><li>Rendering has a major performance impact on performance </li></ul><ul><li>Browser work differently </li></ul><ul><li>Layouting in browser is based on frames </li></ul><ul><li>Understand rendering </li></ul><ul><ul><li>Browsers think in frames </li></ul></ul><ul><ul><li>Layouting (Reflow) performed asynchronously </li></ul></ul>
  23. 24. Asynchronous Rendering
  24. 25. … be ware of property access
  25. 26. <ul><li>Minimize HTTP Requests </li></ul><ul><li>GZIP Content </li></ul><ul><li>Minifiy CSS and JavaScript </li></ul><ul><ul><ul><ul><ul><li>CSS up </li></ul></ul></ul></ul></ul><ul><li>JavaScript down </li></ul><ul><li>Avoid Redirects </li></ul><ul><li>Etags, Content Expiration </li></ul><ul><li>Make AJAX Cacheable </li></ul><ul><li>Split across domains </li></ul><ul><li>Avoid DNS lookups </li></ul><ul><li>… </li></ul>
  26. 27. Questions ?
  27. 28. Mail Blog AloisReitbauer Twitter