Architecture of Ajax ApplicationsAlois Reitbauer, dynaTrace Software

Intro

Architecture?

The Last7 months

Ajax Paradigm

past now

Browser

Server

Where is our code running?

New application runtimes …

Architectures are changing …

vs.

MVC revisited

Model

View

Controller

Web 1.0 Web 2.0

Model

View

Controller

MVC and deployment

Load Time(Static)

Runtime(Dynamic)

Model

View

Controller

Performance

Google includes speed in ranking …

Source: http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html

The impact of performance …

Source: Jake Brutlag and Eric Schuman at Velocity 2009

… on business

Web Performance is defined by …

• Proper Markup• Understanding Browser Specifics

• Markup Processing• DOM• Network• Connectivity

• WAN Remote Communication• Writing proper code

What typically goes wrong

Browser ServerJavaScriptPerformance

HTML Rendering

AJAX/HTTPcalls

Latency

Datavolume Contentconstruction

Network

Caching

Server

The Browser

Co

nn

ecti

on

Po

ol

Browser under the hood

JavaScriptEngine

DOM

Renderer

.html..png

.js

.css.css

Daten

XHR

Co

nn

ecti

on

Mg

r

Network

HTTP is the language of the web …

Browser Server

GET /index.html HTTP/1.1

Host: www.example.net

HTTP/1.1 200 OKContent-Type: text/html

….

… and a cool protocol

• Simple Request/Response• Caching Support• Compression• Secure Communication• State Tracking• Multipart Response• Connection Management• …

Understanding a browser download …

Be aware of the connection limit

Many downloads increase wait time

Core principles of network usage …

• # Requests increases Wait/Connect Time• Merge Resources• Use Spriting

• Content Size increases Transfer/Wait Time• Minify Content• Compress Content• Payload vs. Markup

Redirects and how to avoid them …

ApplicationPage

SecurityService

SecurityLogin

ApplicationPage

First time the usersees something

ApplicationPage

SecurityService

First time the usersees something

AJAX Calls

Clients

Server

Cache per Client

Server providingCaching Information

Proxy Cachefor Many Clients

Serverside Data Cache

Caching in Web Applications

• Date• Defines the timestamp of the resource download

• Expires• Defines how long this resource is valid

• E-Tag• Uniquely identifies a resource

• Cache-Control• Defines caching strategy

• Last-Modified• Defines when the resource was lost modifed

Understanding HTTP headers

E-Tag and Last-Modified

Browser Server

If-Modified-SinceIf-None-Match

200 OK

Content Download

Browser Server

If-Modified-SinceIf-None-Match

304 Not Modified

Resource Changed Resource Not Changed

… we still have wait/DNS/connect/request/server time

max-age and Expires

Browser Server

GET …

max-age:10

Content Download

No download for 10 seconds

* Combine with E-Tag for even more performance

• Request State– State from one request to the next

• Conversational State– State across several requests– Needed for a unit of work

• Session State– State valid and REQUIRED for the whole user session

Types of state

Where to put the state?• HTTP Session

• Consumes server memory• Beware of replication (if possible)

• Cookie• Put small content here• Can be encrypted

• The Browser• Specifically in AJAX applications• Think Rich Client

Rendering

Layouting in the browser

Layouting is done asynchronously

… but not always

DOM

The DOM is slow…

… it is always two components you are working with

Writing to the DOM

• Work with a live DOM element• Bad – very bad - idea

• Fragments, disconnected/hidden nodes• Fast, but not necesssarily fastest

• Directly insert HTML• Adequately fast• Reliably fast in all browsers• Be aware of IE memory leaks• String performance

Building Strings …var html = ‘‘;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);

var html = [];var length = persons.lengthfor (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(‘‘));

Reading from the DOM

• $(.funkyClass > *)• Be aware of complex selectors

• Avoid unnecessary lookups• Cache values in variables

• Emulated vs. Native lookups• E.g. getElementByClassName in IE <8

• DOM access causing rendering• calculated styles, …

Markup

Your HTML decides how fast you are<html><head><link rel=‘stylesheet‘ src=‘style.css‘><script src=‘script1.js‘ defer></script><script> // do something that just blocks downloads</script></head><body>Hello World!<script src=‘script2.js‘ defer></script></body></html>

<td style="padding-left:10px; overflow: hidden; white-space: nowrap;">

Inline CSS - A real world sample

* 9000= 2 MB

AJAX

Types of AJAX Interactions

• XMLHttpRequest• Retrieve an type of content

• <script src=‘app.mydomain …• Enable domain sharding• returns JSONP

• <img src=‘beacon.mydomain ….• Write-only communication

Content Formats

• XML• Universal but slow

• JSON• Native to JavaScript

• JSONP• When using script tags

• HTML• Directly insertable

• Custom Format• Array structures – easy to process

Wrap Up

Performance Checklist

• Caching• All headers properly set?

• Network Usage• Number/size of Downloads• Compression• Persistent Connections

• HTML Structure• Selector Performance• Unwanted Layouting• Server Times

Books you should read

alois.reitbauer@dynatrace.com Mailblog.dynatrace.com Blog

AloisReitbauer Twitter

http://ajax.dynatrace.com