Architectures for
Scaling AJAX
tools, strategies, tips and tricks
Wolfram Kriesing, uxebu
wolfram@uxebu.com

Why client scaling?
• ~10% HTML
• ~90% JavaScript, CSS, media, ...
• UX

Scaling what?
DB traffic ajax

Strategies
Tools
Real world

Strategies
features
user
data legacy GUI
widgets

I already got an app!

But I want it Web2.0-ish!

AJAXify it!

Enhance it

Site Loading

Progressive Enhancement
• mostly pre Web 2.0 site
• fresh it up - widgets
• dynamic content
• minimize site height+number - tabs
• better UX

Progressive Enhancement
The Problem
• upgrade server code
• stable
• legacy
• unmaintained
• easier: update JS

Progressive Enhancement
The solution!
• interfaces - url mapper
• url to action/view method
• easy editing
• clean interface
• new namespace - /api/...

Progressive Enhancement

Chunks, tabs, ...

GUI driven
• sugar
• clean start
• organic growth

Back-end driven
• fix data
• adapt server structure
• map UI to data
• UI is data centric
• widgets

Strategies
Tools
Real world

CDN ORM memcached
build compressor templates
inline data
pub sub
Tools
URLs
REST
triggers
cometd javascript
structure

ads
ORM
perms cart
item
user
items info
stats

ORM
✓maps perfectly to chunks
✓simpler queries
✓more focused
✓object centric
- rather GUI driven

Triggers
• for simple stats!
• for simple stats!!!
• for simple stats!!!!!!
• support laziness
• easy to refactor later

Triggers
class Tag(models.Model):
id = models.AutoField(primary_key=True)
name = models.CharField(max_length=50, unique=True)
num_uses = models.PositiveIntegerField(default=1)
CREATE TRIGGER au_tag AFTER UPDATE ON tag
FOR EACH ROW CALL update_tag_num_uses(NEW.tag_id);
CREATE TRIGGER ai_tag AFTER INSERT ON tag
FOR EACH ROW CALL update_tag_num_uses(NEW.tag_id);
CREATE TRIGGER ad_tag AFTER DELETE ON tag
FOR EACH ROW CALL update_tag_num_uses(OLD.tag_id);

Too much DB load!

memcached
more requests
tiny queries
common data x x
status
statistics

Nice and what about
the GUI?

Publish/Subscribe
✓loose coupling
✓forces an API
✓as detailed as you like
✓workers enabled
- data passing

Publish/Subscribe
cart/updated
friend/online
window/resize
ajax/data

Client-side Templates
✓pure client rendering
✓seperation of concerns
✓data only requests
- URLs
- render on client

Client-side Templates
templates
JSON

cometd
• responsive
• no pull
• different programming model
• pubblish/subscribe

Defer
• spread the load
• run when needed

pub/sub •loose couple
•flexibility
•templates
•JSON
•URL Mapping
http:// •API
•ORM
•memcached
•triggers

CDN ✓ORM ✓ memcached
build compressor ✓templates
inline data
✓pub sub
Tools
✓URLs
✓REST
✓triggers
cometd javascript
structure

Request
Webserver

PHP, Python, Java, ... DB

Request
Response
Webserver
optimize

optimize
PHP, Python, Java, ... DB

Request
Response
Webserver
optimize

• loading order
• inline data
• add on load
• lazy loading
• optimize caching effect
• use the network effect
optimize

Recap

templates
pub/sub
ORM
DB URLs
Server loading headers
order
render time
CDN Scaling
cache
#requests
HTML JS media
CSS
code packaging
XHR JS
loading
JSON chunks structure

Thank you!
http://uxebu.com
Wolfram Kriesing, uxebu
wolfram@uxebu.com
http://twitter.com/uxebu