• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Architectures For Scaling Ajax
 

Architectures For Scaling Ajax

on

  • 2,587 views

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

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

Statistics

Views

Total Views
2,587
Views on SlideShare
2,345
Embed Views
242

Actions

Likes
2
Downloads
36
Comments
0

5 Embeds 242

http://research-and-destroy.de 206
http://uxebu.com 17
http://blog.uxebu.com 16
http://hub.uxebu.com 2
http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Architectures For Scaling Ajax Architectures For Scaling Ajax Presentation Transcript

    • 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