Architectures for Scaling AJAX

tools, strategies, tips and tricks

Wolfram Kriesing, uxebuwolfram@uxebu.com

Why client scaling?

• ~10% HTML

• ~90% JavaScript, CSS, media, ...

• UX

DB traffic ajax

Scaling what?

Strategies

Tools

Real world

Strategies

data legacy GUI

features

user

widgets

I already got an app!

But I want it Web2.0-ish!

AJAXify it!

Enhance it

Site Loading

• mostly pre Web 2.0 site

• fresh it up - widgets

• dynamic content

• minimize site height+number - tabs

• better UX

Progressive Enhancement

• upgrade server code

• stable

• legacy

• unmaintained

• easier: update JS

Progressive EnhancementThe Problem

• interfaces - url mapper

• url to action/view method

• easy editing

• clean interface

• new namespace - /api/...

Progressive EnhancementThe solution!

Progressive Enhancement

Chunks, tabs, ...

• sugar

• clean start

• organic growth

GUI driven

• fix data

• adapt server structure

• map UI to data

• UI is data centric

• widgets

Back-end driven

Strategies

Tools

Real world

Toolspub sub

cometd

templates

ORM

build

CDN

compressor

memcached

inline data

URLsREST

structure

javascript

triggers

ORMcartperms

user

items info

stats

item

ads

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

Triggersclass 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 requeststiny queries

common datastatus

statistics

x x

Nice and what about the GUI?

✓loose coupling

✓forces an API

✓as detailed as you like

✓workers enabled

- data passing

Publish/Subscribe

Publish/Subscribecart/updated

friend/online

window/resizeajax/data

✓pure client rendering

✓seperation of concerns

✓data only requests

- URLs

- render on client

Client-side Templates

Client-side Templates

templates

JSON

cometd

• responsive

• no pull

• different programming model

• pubblish/subscribe

Defer

• spread the load

• run when needed

pub/sub

http:// •URL Mapping•API

•memcached•triggers

•templates•JSON

•loose couple•flexibility

•ORM

✓pub sub

cometd

✓templates

✓ORM

build

CDN

compressor

✓memcached

inline data

✓URLs✓REST

Tools

structure

javascript

✓triggers

Request

Webserver

PHP, Python, Java, ... DB

Request

Webserver

Response

optimize

PHP, Python, Java, ... DB

optimize

Request

Webserver

Response

optimize

• loading order

• inline data

• add on load

• lazy loading

• optimize caching effect

• use the network effect

optimize

Recap

Scaling

ServerDB

ORMURLs

cache

loading

loading

code packaging

structureJS

media

chunksJSONXHR

HTML#requests

JSCSS

pub/subtemplates

render time

orderheaders

CDN

http://uxebu.com

Wolfram Kriesing, uxebuwolfram@uxebu.com

http://twitter.com/uxebu

Thank you!