SlideShare une entreprise Scribd logo
1  sur  43
Télécharger pour lire hors ligne
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

Contenu connexe

Tendances

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
 

Tendances (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
 
Евгений Самоненко - Практическая оптимизация сервер сайд современные реалии
Евгений Самоненко - Практическая оптимизация сервер сайд современные реалииЕвгений Самоненко - Практическая оптимизация сервер сайд современные реалии
Евгений Самоненко - Практическая оптимизация сервер сайд современные реалии
 
Практическая оптимизация сервер сайд: современные реалии
Практическая оптимизация сервер сайд: современные реалииПрактическая оптимизация сервер сайд: современные реалии
Практическая оптимизация сервер сайд: современные реалии
 

En vedette

En vedette (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
 

Similaire à 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
 

Similaire à 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
 

Plus de 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
 

Plus de 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)
 

Dernier

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
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
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
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
 

Dernier (20)

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
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...
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
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
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
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
 
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
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
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
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
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
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 

Architectures For Scaling Ajax