Your SlideShare is downloading. ×
  • Like
Architecture in Ajax Applications
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Architecture in Ajax Applications

  • 2,311 views
Published

Ajax applications are different to classical web applications. This presentation covers performance relevant aspects architectures should consider when building ajax applications

Ajax applications are different to classical web applications. This presentation covers performance relevant aspects architectures should consider when building ajax applications

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,311
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
37
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Architectureof Ajax Applications
    Alois Reitbauer, dynaTrace Software
  • 2. Intro
  • 3. Architecture?
  • 4. The Last
    7 months
  • 5. Ajax Paradigm
  • 6. Whereisourcoderunning?
    past
    now
    Server
    Browser
  • 7. New applicationruntimes …
  • 8. Architecturesarechanging …
    vs.
  • 9. MVC revisited
    View
    View
    Controller
    Controller
    Model
    Model
    Web 1.0
    Web 2.0
  • 10. MVC anddeployment
    View
    Controller
    Model
    Runtime
    (Dynamic)
    Load Time
    (Static)
  • 11. Performance
  • 12. Google includesspeed in ranking …
    Source: http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
  • 13. Theimpactof performance …
    Source: Jake Brutlag and Eric Schuman at Velocity 2009
    …on business
  • 14. Web Performance isdefinedby …
  • Whattypicallygoeswrong
    Datavolume
    Content
    construction
    HTML Rendering
    Latency
    Network
    AJAX/HTTP
    calls
    Server
    Server
    Browser
    JavaScriptPerformance
    Caching
  • 22. The Browser
  • 23. .html
    .
    .png
    .js
    .css
    .css
    Browser underthehood
    Daten
    JavaScriptEngine
    DOM
    Connection Pool
    Connection Mgr
    XHR
    Renderer
  • 24. Network
  • 25. HTTP isthelanguageofthe web …
    GET /index.html HTTP/1.1
    Host: www.example.net
    HTTP/1.1 200 OK
    Content-Type: text/html
    ….
    Server
    Browser
  • 26. … and a cool protocol
  • Understanding a browserdownload …
  • 34. Beawareoftheconnectionlimit
  • 35. Manydownloadsincreasewait time
  • 36. Core principlesofnetworkusage …
    • # RequestsincreasesWait/Connect Time
    • 37. Merge Resources
    • 38. UseSpriting
    • 39. Content Size increases Transfer/Wait Time
    • 40. Minify Content
    • 41. Compress Content
    • 42. Payload vs. Markup
  • Redirects andhowtoavoidthem …
    Application
    Page
    Security
    Login
    Application
    Page
    Security
    Service
    First time theuser
    seessomething
    Security
    Service
    Application
    Page
    AJAX Calls
    First time theuser
    seessomething
  • 43. Caching in Web Applications
    Serverside
    Data Cache
    Server providingCaching Information
    Cache per Client
    Server
    Proxy Cache
    for Many Clients
    Clients
  • 44. Understanding HTTP headers
    • Date
    • 45. Definesthetimestampoftheresourcedownload
    • 46. Expires
    • 47. Defineshowlongthisresourceis valid
    • 48. E-Tag
    • 49. Uniquelyidentifies a resource
    • 50. Cache-Control
    • 51. Definescachingstrategy
    • 52. Last-Modified
    • 53. Defineswhentheresource was lost modifed
  • E-Tag and Last-Modified
    ResourceChanged
    Resource Not Changed
    Browser
    Server
    Browser
    Server
    If-Modified-Since
    If-Modified-Since
    If-None-Match
    If-None-Match
    304 Not Modified
    200 OK
    Content Download
    … we still havewait/DNS/connect/request/server time
  • 54. max-ageandExpires
    Browser
    Server
    GET …
    * Combine with E-Tag for
    evenmoreperformance
    max-age:10
    Content Download
    Nodownload
    for 10 seconds
  • 55. Typesofstate
    • Request State
    • 56. State fromonerequesttothenext
    • 57. Conversational State
    • 58. State acrossseveralrequests
    • 59. Neededfor a unitofwork
    • 60. Session State
    • 61. State valid and REQUIRED forthewholeusersession
  • Wheretoputthestate?
    HTTP Session
    • Consumesservermemory
    • 62. Bewareofreplication (ifpossible)
    Cookie
    • Putsmallcontenthere
    • 63. Can beencrypted
    The Browser
    • Specifically in AJAX applications
    • 64. Think Rich Client
  • Rendering
  • 65. Layouting in thebrowser
  • 66. Layoutingisdoneasynchronously
  • 67. … but not always
  • 68. DOM
  • 69. The DOM isslow…
    … itisalwaystwocomponents
    youareworkingwith
  • 70. Writing tothe DOM
    • Work with a live DOM element
    • 71. Bad – verybad - idea
    • 72. Fragments, disconnected/hiddennodes
    • 73. Fast, but not necesssarily fastest
    • 74. Directlyinsert HTML
    • 75. Adequately fast
    • 76. Reliably fast in all browsers
    • 77. Beawareof IE memoryleaks
    • 78. String performance
  • Building Strings …
    varhtml = ‘‘;
    for (var i = 0; i < persons.length; i++){
    var p = persons[i];
    html += ‘<tr><td>‘ + p.first + ‘</td><td>‘ + p.last + ‘</td></tr>‘;
    }
    $(‘#myTable‘).append(html);
    varhtml = [];
    varlength = persons.length
    for (var i = 0; i < length; i++){
    var p = persons[i];
    html.push(‘<tr><td>‘ + p.first + ‘</td><td>‘ + p.last + ‘</td></tr>‘);
    }
    $(‘#myTable‘).append(html.join(‘‘));
  • 79. Reading fromthe DOM
    • $(.funkyClass > *)
    • 80. Beawareofcomplexselectors
    • 81. Avoidunnecessarylookups
    • 82. Cache values in variables
    • 83. Emulated vs. Native lookups
    • 84. E.g. getElementByClassName in IE <8
    • 85. DOM accesscausingrendering
    • 86. calculatedstyles, …
  • Markup
  • 87. Your HTML decideshow fast youare
    <html>
    <head>
    <link rel=‘stylesheet‘ src=‘style.css‘>
    <scriptsrc=‘script1.js‘ defer></script>
    <script>
    // do somethingthat just blocksdownloads
    </script>
    </head>
    <body>
    Hello World!
    <scriptsrc=‘script2.js‘ defer></script>
    </body>
    </html>
  • 88. Inline CSS - A real world sample
    * 9000
    <td style="padding-left:10px; overflow: hidden; white-space: nowrap;">
    = 2 MB
  • 89. AJAX
  • 90. Typesof AJAX Interactions
    • XMLHttpRequest
    • 91. Retrieve an type ofcontent
    • 92. <scriptsrc=‘app.mydomain …
    • 93. Enabledomainsharding
    • 94. returns JSONP
    • 95. <imgsrc=‘beacon.mydomain ….
    • 96. Write-onlycommunication
  • Content Formats
  • WrapUp
  • 106. Performance Checklist
  • Books youshouldread
  • 116. alois.reitbauer@dynatrace.com Mail
    blog.dynatrace.com Blog
    AloisReitbauer Twitter
    http://ajax.dynatrace.com