SlideShare a Scribd company logo
1 of 43
Download to read offline
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

More Related Content

What's hot

Bodócz Tamás- Web Perfomance & Caching Issues
Bodócz Tamás- Web Perfomance & Caching IssuesBodócz Tamás- Web Perfomance & Caching Issues
Bodócz Tamás- Web Perfomance & Caching Issues
veszpremimeetup
 
Zingme practice for building scalable website with PHP
Zingme practice for building scalable website with PHPZingme practice for building scalable website with PHP
Zingme practice for building scalable website with PHP
Chau Thanh
 

What's hot (20)

Measuring Web Performance
Measuring Web Performance Measuring Web Performance
Measuring Web Performance
 
Speed!
Speed!Speed!
Speed!
 
Wordcamp2009
Wordcamp2009Wordcamp2009
Wordcamp2009
 
Speed Up Wordpress, Wordpress Horsepower
Speed Up Wordpress, Wordpress HorsepowerSpeed Up Wordpress, Wordpress Horsepower
Speed Up Wordpress, Wordpress Horsepower
 
How webpage loading takes place?
How webpage loading takes place?How webpage loading takes place?
How webpage loading takes place?
 
Cache Rules Everything Around Me
Cache Rules Everything Around MeCache Rules Everything Around Me
Cache Rules Everything Around Me
 
Challenges of angular in production (Tasos Bekos) - GreeceJS #17
Challenges of angular in production (Tasos Bekos) - GreeceJS #17Challenges of angular in production (Tasos Bekos) - GreeceJS #17
Challenges of angular in production (Tasos Bekos) - GreeceJS #17
 
Bodócz Tamás- Web Perfomance & Caching Issues
Bodócz Tamás- Web Perfomance & Caching IssuesBodócz Tamás- Web Perfomance & Caching Issues
Bodócz Tamás- Web Perfomance & Caching Issues
 
Zingme practice for building scalable website with PHP
Zingme practice for building scalable website with PHPZingme practice for building scalable website with PHP
Zingme practice for building scalable website with PHP
 
Administer WordPress with WP-CLI
Administer WordPress with WP-CLIAdminister WordPress with WP-CLI
Administer WordPress with WP-CLI
 
Web Performance: 3 Stages to Success
Web Performance: 3 Stages to SuccessWeb Performance: 3 Stages to Success
Web Performance: 3 Stages to Success
 
Squeeze Maximum Performance From Your Joomla Website
Squeeze Maximum Performance From Your Joomla WebsiteSqueeze Maximum Performance From Your Joomla Website
Squeeze Maximum Performance From Your Joomla Website
 
The War on ActionView with Russian Doll Caching
The War on ActionView with Russian Doll CachingThe War on ActionView with Russian Doll Caching
The War on ActionView with Russian Doll Caching
 
WordPress Performance 101
WordPress Performance 101WordPress Performance 101
WordPress Performance 101
 
SearchLove San Diego 2018 | Tom Anthony | An Introduction to HTTP/2 & Service...
SearchLove San Diego 2018 | Tom Anthony | An Introduction to HTTP/2 & Service...SearchLove San Diego 2018 | Tom Anthony | An Introduction to HTTP/2 & Service...
SearchLove San Diego 2018 | Tom Anthony | An Introduction to HTTP/2 & Service...
 
Upstate CSCI 450 WebDev Chapter 1
Upstate CSCI 450 WebDev Chapter 1Upstate CSCI 450 WebDev Chapter 1
Upstate CSCI 450 WebDev Chapter 1
 
WordPress Need For Speed
WordPress Need For SpeedWordPress Need For Speed
WordPress Need For Speed
 
WordPress Speed Optimization
WordPress Speed OptimizationWordPress Speed Optimization
WordPress Speed Optimization
 
Евгений Самоненко - Практическая оптимизация сервер сайд современные реалии
Евгений Самоненко - Практическая оптимизация сервер сайд современные реалииЕвгений Самоненко - Практическая оптимизация сервер сайд современные реалии
Евгений Самоненко - Практическая оптимизация сервер сайд современные реалии
 
Практическая оптимизация сервер сайд: современные реалии
Практическая оптимизация сервер сайд: современные реалииПрактическая оптимизация сервер сайд: современные реалии
Практическая оптимизация сервер сайд: современные реалии
 

Viewers also liked

Viewers also liked (7)

02 03-2012-atmosphere layers1
02 03-2012-atmosphere layers102 03-2012-atmosphere layers1
02 03-2012-atmosphere layers1
 
Dance of the planets
Dance of the planetsDance of the planets
Dance of the planets
 
Geologic Principle Similes
Geologic Principle SimilesGeologic Principle Similes
Geologic Principle Similes
 
Why do we measure time the way that we do
Why do we measure time the way that we doWhy do we measure time the way that we do
Why do we measure time the way that we do
 
What time is it?
What time is it?What time is it?
What time is it?
 
Atmosphere
 Atmosphere Atmosphere
Atmosphere
 
Comets asteroids meteors wilson 2013 with foldable
Comets asteroids meteors wilson 2013 with foldableComets asteroids meteors wilson 2013 with foldable
Comets asteroids meteors wilson 2013 with foldable
 

Similar to Architectures For Scaling Ajax

Web前端性能分析工具导引
Web前端性能分析工具导引Web前端性能分析工具导引
Web前端性能分析工具导引
冰 郭
 
Pagespeed what, why, and how it works
Pagespeed   what, why, and how it worksPagespeed   what, why, and how it works
Pagespeed what, why, and how it works
Ilya Grigorik
 
Scaling a Web Service
Scaling a Web ServiceScaling a Web Service
Scaling a Web Service
Leon Ho
 
How to build CDN for your website
How to build CDN for your websiteHow to build CDN for your website
How to build CDN for your website
Martin Kulov
 

Similar to Architectures For Scaling Ajax (20)

Rails, ExtJs, and Netzke
Rails, ExtJs, and NetzkeRails, ExtJs, and Netzke
Rails, ExtJs, and Netzke
 
Web前端性能分析工具导引
Web前端性能分析工具导引Web前端性能分析工具导引
Web前端性能分析工具导引
 
Qcon
QconQcon
Qcon
 
How to migrate from any CMS (thru the front-door)
How to migrate from any CMS (thru the front-door)How to migrate from any CMS (thru the front-door)
How to migrate from any CMS (thru the front-door)
 
Performance automation 101 @LDNWebPerf MickMcGuinness
Performance automation 101 @LDNWebPerf MickMcGuinnessPerformance automation 101 @LDNWebPerf MickMcGuinness
Performance automation 101 @LDNWebPerf MickMcGuinness
 
Pagespeed what, why, and how it works
Pagespeed   what, why, and how it worksPagespeed   what, why, and how it works
Pagespeed what, why, and how it works
 
20080611accel
20080611accel20080611accel
20080611accel
 
Making the web faster
Making the web fasterMaking the web faster
Making the web faster
 
Rest Vs Soap Yawn2289
Rest Vs Soap Yawn2289Rest Vs Soap Yawn2289
Rest Vs Soap Yawn2289
 
Streamlining Your Applications with Web Frameworks
Streamlining Your Applications with Web FrameworksStreamlining Your Applications with Web Frameworks
Streamlining Your Applications with Web Frameworks
 
Scaling a Web Service
Scaling a Web ServiceScaling a Web Service
Scaling a Web Service
 
Markup As An Api
Markup As An ApiMarkup As An Api
Markup As An Api
 
The MEAN Stack
The MEAN StackThe MEAN Stack
The MEAN Stack
 
performance.ppt
performance.pptperformance.ppt
performance.ppt
 
Single page applications - TernopilJS #2
Single page applications - TernopilJS #2Single page applications - TernopilJS #2
Single page applications - TernopilJS #2
 
How to build CDN for your website
How to build CDN for your websiteHow to build CDN for your website
How to build CDN for your website
 
Threads Needles Stacks Heaps - Java edition
Threads Needles Stacks Heaps - Java editionThreads Needles Stacks Heaps - Java edition
Threads Needles Stacks Heaps - Java edition
 
HTML5 표준 소개
HTML5 표준 소개HTML5 표준 소개
HTML5 표준 소개
 
ReST Vs SOA(P) ... Yawn
ReST Vs SOA(P) ... YawnReST Vs SOA(P) ... Yawn
ReST Vs SOA(P) ... Yawn
 
Assessing Your Own Site Configuration
Assessing Your Own Site ConfigurationAssessing Your Own Site Configuration
Assessing Your Own Site Configuration
 

More from wolframkriesing

react.js - DOM as it was meant
react.js - DOM as it was meantreact.js - DOM as it was meant
react.js - DOM as it was meant
wolframkriesing
 
Pixelplant - WebDev Meetup Salzburg
Pixelplant - WebDev Meetup SalzburgPixelplant - WebDev Meetup Salzburg
Pixelplant - WebDev Meetup Salzburg
wolframkriesing
 
Presentation Mobile Monday Munich, March 2012
Presentation Mobile Monday Munich, March 2012Presentation Mobile Monday Munich, March 2012
Presentation Mobile Monday Munich, March 2012
wolframkriesing
 
Webtestsuite black berrydevcon
Webtestsuite black berrydevconWebtestsuite black berrydevcon
Webtestsuite black berrydevcon
wolframkriesing
 

More from wolframkriesing (20)

JavaScript The Language Meetup - Async functions
JavaScript The Language Meetup - Async functionsJavaScript The Language Meetup - Async functions
JavaScript The Language Meetup - Async functions
 
Our react-native experiences at crewmeister
Our react-native experiences at crewmeisterOur react-native experiences at crewmeister
Our react-native experiences at crewmeister
 
ES6 katas - talk given at enterjs
ES6 katas - talk given at enterjsES6 katas - talk given at enterjs
ES6 katas - talk given at enterjs
 
TDD for Kids - VLCjs (Valencia Spain, July 2015)
TDD for Kids - VLCjs (Valencia Spain, July 2015)TDD for Kids - VLCjs (Valencia Spain, July 2015)
TDD for Kids - VLCjs (Valencia Spain, July 2015)
 
ES6Katas.org - an introduction and the story behind
ES6Katas.org - an introduction and the story behindES6Katas.org - an introduction and the story behind
ES6Katas.org - an introduction and the story behind
 
TDD with Google Spreadsheets #enterjs 2015
TDD with Google Spreadsheets #enterjs 2015TDD with Google Spreadsheets #enterjs 2015
TDD with Google Spreadsheets #enterjs 2015
 
Baby steps
Baby stepsBaby steps
Baby steps
 
TDD with Google Spreadsheets
TDD with Google SpreadsheetsTDD with Google Spreadsheets
TDD with Google Spreadsheets
 
ECMAScript 6 for real
ECMAScript 6 for realECMAScript 6 for real
ECMAScript 6 for real
 
Refactoring out of the mess
Refactoring out of the messRefactoring out of the mess
Refactoring out of the mess
 
Day2 - Refactoring (Lecture SS 2015)
Day2 - Refactoring (Lecture SS 2015)Day2 - Refactoring (Lecture SS 2015)
Day2 - Refactoring (Lecture SS 2015)
 
Day1 - TDD (Lecture SS 2015)
Day1 - TDD (Lecture SS 2015)Day1 - TDD (Lecture SS 2015)
Day1 - TDD (Lecture SS 2015)
 
react.js - DOM as it was meant
react.js - DOM as it was meantreact.js - DOM as it was meant
react.js - DOM as it was meant
 
Pixelplant - WebDev Meetup Salzburg
Pixelplant - WebDev Meetup SalzburgPixelplant - WebDev Meetup Salzburg
Pixelplant - WebDev Meetup Salzburg
 
Better Code through TDD
Better Code through TDDBetter Code through TDD
Better Code through TDD
 
April JavaScript Tools
April JavaScript ToolsApril JavaScript Tools
April JavaScript Tools
 
Presentation Mobile Monday Munich, March 2012
Presentation Mobile Monday Munich, March 2012Presentation Mobile Monday Munich, March 2012
Presentation Mobile Monday Munich, March 2012
 
Webtestsuite black berrydevcon
Webtestsuite black berrydevconWebtestsuite black berrydevcon
Webtestsuite black berrydevcon
 
EmbedJS
EmbedJSEmbedJS
EmbedJS
 
JavaScript Tools (PHPConference 2011, Berlin)
JavaScript Tools (PHPConference 2011, Berlin)JavaScript Tools (PHPConference 2011, Berlin)
JavaScript Tools (PHPConference 2011, Berlin)
 

Recently uploaded

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 

Architectures For Scaling Ajax