Architectureof  Ajax Applications<br />Alois Reitbauer, dynaTrace Software<br />
Intro<br />
Architecture?<br />
The Last<br />7 months<br />
Ajax Paradigm<br />
Whereisourcoderunning?<br />past<br />now<br />Server<br />Browser<br />
New applicationruntimes …<br />
Architecturesarechanging …<br />vs.<br />
MVC revisited<br />View<br />View<br />Controller<br />Controller<br />Model<br />Model<br />Web 1.0<br />Web 2.0<br />
MVC anddeployment<br />View<br />Controller<br />Model<br />Runtime<br />(Dynamic)<br />Load Time<br />(Static)<br />
Performance<br />
Google includesspeed in ranking …<br />Source: http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-...
Theimpactof performance …<br />Source: Jake Brutlag and Eric Schuman at Velocity 2009<br />…on business<br />
Web Performance isdefinedby …<br /><ul><li>Proper Markup
Understanding Browser Specifics
Markup Processing
DOM
Network
Connectivity
WAN Remote Communication
Writing proper code</li></li></ul><li>Whattypicallygoeswrong<br />Datavolume<br />Content<br />construction<br />HTML Rend...
The Browser<br />
.html<br />.<br />.png<br />    .js<br />.css<br />.css<br />Browser underthehood<br />Daten<br />JavaScriptEngine<br />DO...
Network<br />
HTTP isthelanguageofthe web …<br />GET /index.html HTTP/1.1<br />Host: www.example.net<br />HTTP/1.1 200 OK<br />Content-T...
… and a cool protocol<br /><ul><li>Simple Request/Response
Caching Support
Compression
Secure Communication
State Tracking
Multipart Response
Connection Management
…</li></li></ul><li>Understanding a browserdownload …<br />
Beawareoftheconnectionlimit<br />
Manydownloadsincreasewait time<br />
Core principlesofnetworkusage …<br /><ul><li># RequestsincreasesWait/Connect Time
Merge Resources
UseSpriting
Content Size increases Transfer/Wait Time
Minify Content
Compress Content
Payload vs. Markup</li></li></ul><li>Redirects andhowtoavoidthem …<br />Application<br />Page<br />Security<br />Login<br ...
Caching in Web Applications<br />Serverside <br />Data Cache<br />Server providingCaching Information<br />Cache per Clien...
Understanding HTTP headers<br /><ul><li>Date
Definesthetimestampoftheresourcedownload
Expires
Defineshowlongthisresourceis valid
E-Tag
Uniquelyidentifies a resource
Cache-Control
Upcoming SlideShare
Loading in...5
×

Architecture in Ajax Applications

2,524

Published on

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

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,524
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
38
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Architecture in Ajax Applications

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

    Clipping is a handy way to collect important slides you want to go back to later.

×