Architectures For Scaling Ajax

1,463
-1

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,463
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
38
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Architectures For Scaling Ajax

  1. 1. Architectures for Scaling AJAX tools, strategies, tips and tricks Wolfram Kriesing, uxebu wolfram@uxebu.com
  2. 2. Why client scaling? • ~10% HTML • ~90% JavaScript, CSS, media, ... • UX
  3. 3. Scaling what? DB traffic ajax
  4. 4. Strategies Tools Real world
  5. 5. Strategies features user data legacy GUI widgets
  6. 6. I already got an app!
  7. 7. But I want it Web2.0-ish!
  8. 8. AJAXify it!
  9. 9. Enhance it
  10. 10. Site Loading
  11. 11. Progressive Enhancement • mostly pre Web 2.0 site • fresh it up - widgets • dynamic content • minimize site height+number - tabs • better UX
  12. 12. Progressive Enhancement The Problem • upgrade server code • stable • legacy • unmaintained • easier: update JS
  13. 13. Progressive Enhancement The solution! • interfaces - url mapper • url to action/view method • easy editing • clean interface • new namespace - /api/...
  14. 14. Progressive Enhancement
  15. 15. Chunks, tabs, ...
  16. 16. GUI driven • sugar • clean start • organic growth
  17. 17. Back-end driven • fix data • adapt server structure • map UI to data • UI is data centric • widgets
  18. 18. Strategies Tools Real world
  19. 19. CDN ORM memcached build compressor templates inline data pub sub Tools URLs REST triggers cometd javascript structure
  20. 20. ads ORM perms cart item user items info stats
  21. 21. ORM ✓maps perfectly to chunks ✓simpler queries ✓more focused ✓object centric - rather GUI driven
  22. 22. Triggers • for simple stats! • for simple stats!!! • for simple stats!!!!!! • support laziness • easy to refactor later
  23. 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. 24. Too much DB load!
  25. 25. memcached more requests tiny queries common data x x status statistics
  26. 26. Nice and what about the GUI?
  27. 27. Publish/Subscribe ✓loose coupling ✓forces an API ✓as detailed as you like ✓workers enabled - data passing
  28. 28. Publish/Subscribe cart/updated friend/online window/resize ajax/data
  29. 29. Client-side Templates ✓pure client rendering ✓seperation of concerns ✓data only requests - URLs - render on client
  30. 30. Client-side Templates templates JSON
  31. 31. cometd • responsive • no pull • different programming model • pubblish/subscribe
  32. 32. Defer • spread the load • run when needed
  33. 33. pub/sub •loose couple •flexibility •templates •JSON •URL Mapping http:// •API •ORM •memcached •triggers
  34. 34. CDN ✓ORM ✓ memcached build compressor ✓templates inline data ✓pub sub Tools ✓URLs ✓REST ✓triggers cometd javascript structure
  35. 35. Request Webserver
  36. 36. PHP, Python, Java, ... DB
  37. 37. Request Response Webserver optimize
  38. 38. optimize PHP, Python, Java, ... DB
  39. 39. Request Response Webserver optimize
  40. 40. • loading order • inline data • add on load • lazy loading • optimize caching effect • use the network effect optimize
  41. 41. Recap
  42. 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. 43. Thank you! http://uxebu.com Wolfram Kriesing, uxebu wolfram@uxebu.com http://twitter.com/uxebu
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×