architectures for scaling ajax
DESCRIPTION
Those are the slides for the talk I gave at the Ajax in Action 2008.TRANSCRIPT
Architectures for Scaling AJAX
tools, strategies, tips and tricks
Wolfram Kriesing, [email protected]
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