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