Those are the slides for the talk I gave at the Ajax in Action 2008.

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

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

3. Scaling what?
DB traffic ajax

4. Strategies
Tools
Real world

5. Strategies
features
user
data legacy GUI
widgets

6. I already got an app!

7. But I want it Web2.0-ish!

8. AJAXify it!

9. Enhance it

10. Site Loading

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

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

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

14. Progressive Enhancement

15. Chunks, tabs, ...

16. GUI driven
• sugar
• clean start
• organic growth

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

18. Strategies
Tools
Real world

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

20. ads
ORM
perms cart
item
user
items info
stats

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

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

23. 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);

24. Too much DB load!

25. memcached
more requests
tiny queries
common data x x
status
statistics

26. Nice and what about
the GUI?

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

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

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

30. Client-side Templates
templates
JSON

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

32. Defer
• spread the load
• run when needed

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

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

35. Request
Webserver

36. PHP, Python, Java, ... DB

37. Request
Response
Webserver
optimize

38. optimize
PHP, Python, Java, ... DB

39. Request
Response
Webserver
optimize

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

41. Recap

42. 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

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