Jax Ajax Architecture


Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • More complex with ECMAScript5: canvas – pixel drawing and animation fast – more speed, more applications web workers – background threads
  • OpenJPA and eclipseLink update, what‘s required Hibernate updates everything In case of constraints, triggers and indices this can get quite heavy.
  • 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, www.hitslink.com 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: www.example.net 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=‘content.mydomain.com/query.js?q=ajax‘ />
    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>http://developer.yahoo.com/performance/rules.html
    26. 27. Questions ?
    27. 28. alois.reitbauer@dynatrace.com Mail blog.dynatrace.com Blog AloisReitbauer Twitter http://ajax.dynatrace.com