Scalable JavaScript Application Architecture

Nicholas Zakas
Nicholas ZakasFront End Guy at Box
Scalable JavaScript Application Architecture            Nicholas C. Zakas | @slicknet
Whos this guy? Ex-tech lead            Co-Creator                Contributor,   Yahoo!                csslint.net            Creator of YUI TestAuthor          Lead Author       Contributor           Lead Author
@slicknet
Single-page apps
ModelView           Controller
Single-page apps        &Multi-page apps
Building an application      framework
An application framework is like a playground for your codeProvides structure around otherwise unrelated activities                                          flickr.com/photos/osterwalder/152697503/
Isnt that what JavaScript        libraries do?
flickr.com/photos/skistz/398429879/A JavaScript library is like a toolbox You can build any number of things using the tools
Application   CoreBase Library
Module Theory Everything is a module
module (n)1 : a standard or unit of measurement2 : the size of some one part taken as a unit of measure by which theproportions of an architectural composition are regulated3 a : any in a series of standardized units for use together: as (1) : aunit of furniture or architecture (2) : an educational unit which coversa single subject or topic b : a usually packaged functional assemblyof electronic components for use with other such assemblies4 : an independently operable unit that is a part of the total structureof a space vehicle5 a : a subset of an additive group that is also a group under additionb : a mathematical set that is a commutative group under additionand that is closed under multiplication which is distributive from theleft or right or both by elements of a ring and for which a(bx) = (ab)xor (xb)a = x(ba) or both where a and b are elements of the ring and xbelongs to the set                                                      Source: Merriam-Webster Dictionary
module (n)1 : a standard or unit of measurement2 : the size of some one part taken as a unit of measure by which theproportions of an architectural composition are regulated3 a : any in a series of standardized units for use together: as (1) : aunit of furniture or architecture (2) : an educational unit which coversa single subject or topic b : a usually packaged functional assemblyof electronic components for use with other such assemblies4 : an independently operable unit that is a part of the total structureof a space vehicle5 a : a subset of an additive group that is also a group under additionb : a mathematical set that is a commutative group under additionand that is closed under multiplication which is distributive from theleft or right or both by elements of a ring and for which a(bx) = (ab)xor (xb)a = x(ba) or both where a and b are elements of the ring and xbelongs to the set                                                      Source: Merriam-Webster Dictionary
Scalable JavaScript Application Architecture
Scalable JavaScript Application Architecture
How does this apply to web      applications?
web application module (n)1 : an independent unit of functionality that is part of the totalstructure of a web application                                                                     Source: Me
Scalable JavaScript Application Architecture
Web application modules consist of   HTML + CSS + JavaScript
Any single module should be ableto live on its own
Loose coupling allows you to make changes to   one module without affecting the others                              flickr.com/photos/quinnanya/3575417671/
flickr.com/photos/renfield/3414246938/                    Each module has its own sandbox     An interface with which the module can interact to ensure loose coupling
Module Module                  ModuleModule     Sandbox        Module          Application             Core          Base Library
Application ArchitectureModulesSandboxApplication CoreBase Library
Module Module                                    ModuleModule               Sandbox                  Module  Modules have limited knowledge  Each module knows about their sandbox and thats it
Core.register("module-name", function(sandbox){      return {          init: function(){              //constructor          },           destroy: function(){               //destructor           }      };});
Which parts know about the web    application being built?
None of them
Each part of the architecture is like a puzzle piece           No single piece needs to know what the picture is      All that matters is that the piece does its own job correctly                                                    flickr.com/photos/generated/501445202/
What is a modules job?
Hello, Im the weather module.Its my job to tell you the weather.
Hello, Im the stocks module.Its my job to tell you about thestock market.
Each modules job is to create a  meaningful user experience
flickr.com/photos/eljay/2392332379/                   The web application is created                as a result of all parts doing their job
This doesnt mean modules can do whatever they want to do           their job
flickr.com/photos/tedsblog/43433812/         Modules are like little kidsThey need a strict set of rules so they dont get into trouble
Module Rules• Hands to yourself   Only call your own methods or those on the sandbox   Dont access DOM elements outside of your box   Dont access non-native global objects• Ask, dont take   Anything else you need, ask the sandbox• Dont leave your toys around   Dont create global objects• Dont talk to strangers   Dont directly reference other modules
Modules must stay within their own sandboxes                  No matter how restrictive or uncomfortable it may seemflickr.com/photos/madaise/3406217980/
Application ArchitectureModulesSandboxApplication CoreBase Library
Module Module                  ModuleModule     Sandbox        Module          Application             Core          Base Library
SandboxThe sandbox ensures a consistent interface     Modules can rely on the methods to always be there
Module Module                  ModuleModule     Sandbox        Module          Application             Core          Base Library
Module Module                                      ModuleModule               Sandbox                   Module  Modules only know the sandbox   The rest of the architecture doesnt exist to them
The sandbox also acts like a security guardKnows what the modules are allowed to access and do on the framework                                                 flickr.com/photos/heraklit/169566548/
Core.register("module-name", function(sandbox){      return {          init: function(){                //not sure if Im allowed...                if (sandbox.iCanHazCheezburger()){                    alert("thx u");                }           },           destroy: function(){               //destructor           }      };});
Sandbox Jobs• Consistency• Security• Communication
Take the time to design the correct sandbox interface       It cant change later
Application ArchitectureModulesSandboxApplication CoreBase Library
Module Module                  ModuleModule     Sandbox        Module          Application             Core          Base Library
Application                CoreThe application core manages modules               Thats it
Application          Coreaka Application Controller
The application core tells a module whenit should initialize and when it should shutdown                                 flickr.com/photos/bootbearwdc/20817093/                                 flickr.com/photos/bootbearwdc/20810695/
Core = function(){  var moduleData = {}; return {     register: function(moduleId, creator){        moduleData[moduleId] = {           creator: creator,           instance: null        };     },       start: function(moduleId){          moduleData[moduleId].instance =              moduleData[moduleId].creator(new Sandbox(this));          moduleData[moduleId].instance.init();       },       stop: function(moduleId){         var data = moduleData[moduleId];         if (data.instance){             data.instance.destroy();             data.instance = null;         }       }  }}();
Core = function(){ return {   //more code here...    startAll: function(){       for (var moduleId in moduleData){         if (moduleData.hasOwnProperty(moduleId)){           this.start(moduleId);         }       }    },    stopAll: function(){      for (var moduleId in moduleData){        if (moduleData.hasOwnProperty(moduleId)){          this.stop(moduleId);        }      }    },    //more code here...  };}();
//register modulesCore.register("module1",   function(sandbox){   /*...*/   });Core.register("module2",   function(sandbox){   /*...*/   });Core.register("module3",   function(sandbox){   /*...*/   });Core.register("module4",   function(sandbox){   /*...*/   });//start the application by starting all modulesCore.startAll();
The application core managescommunication between modules             flickr.com/photos/markhillary/353738538/
Scalable JavaScript Application Architecture
TimelineFilter = {    changeFilter: function(filter){        Timeline.applyFilter(filter);    }};                                        Tight                                         CouplingStatusPoster = {    postStatus: function(status){        Timeline.post(status);    }};                                    Tight                                     CouplingTimeline = {    applyFilter: function(filter){        //implementation    },    post: function(status){        //implementation    }};
Core.register("timeline-filter", function(sandbox){      return {          changeFilter: function(filter){              sandbox.notify({                  type: "timeline-filter-change",                  data: filter              });                      Loose          }      };                              Coupling});Core.register("status-poster", function(sandbox){      return {          postStatus: function(statusText){              sandbox.notify({                  type: "new-status",                  data: statusText              });                           Loose          }      };                                          Coupling});
Core.register("timeline", function(sandbox){      return {          init: function(){              sandbox.listen([                  "timeline-filter-change",                  "post-status"              ], this.handleNotification, this);       Loose          },                                          Coupling           handleNotification: function(note){               switch(note.type){                   case "timeline-filter-change":                       this.applyFilter(note.data);                       return;                   case "post-status":                       this.post(note.data);                       return;               }           }      };});
When modules are loosely coupled,    removing a module doesnt break the othersNo direct access to another module = no breaking should the module disappear
The application core handles errorsUses available information to determine best course of action                                         flickr.com/photos/brandonschauer/3168761995/
Core = function(){  var moduleData = {}, debug = false;  function createInstance(moduleId){    var instance =      moduleData[moduleId].creator(new Sandbox(this)),      name, method;       if (!debug){         for (name in instance){           method = instance[name];           if (typeof method == "function"){             instance[name] = function(name, method){               return function(){                  try { return method.apply(this, arguments);}                  catch(ex) {log(1, name + "(): " + ex.message);}               };             }(name, method);           }         }       }       return instance;  }  //more code here}();
Learn morehttp://www.slideshare.net/nzakas/enterprise-javascript-error-handling-presentation
Application Core Jobs•   Manage module lifecycle•   Enable inter-module communication•   General error handling•   Be extensible
Why not?
Web applications changeOften in ways that you couldnt possibly anticipate
Plan for extension
flickr.com/photos/pointnshoot/1443575327/     Anything built for extension can never be                      obsoleteExtensions augment the capabilities of the core to keep it relevant and useful
Module  Module                   ModuleModule       Sandbox        Module            ApplicationExtension                   Extension               Core            Base Library
What Extensions?•   Error handling•   Ajax communication•   New module capabilities•   General utilities•   Anything!
Ajax communication comes in different forms     Tends to be tied to something available on the server
Request format                 Entrypoint                    Response formatThree parts must be in sync for Ajax to work      Modules shouldnt know anything about any of this
Module  Module                   ModuleModule       Sandbox        Module            ApplicationExtension                   Ajax/XML               Core            Base Library
GET ?name=value&name=value           /ajax      Request format               Entrypoint     Response format<response>   <status>ok|error</status>   <data>      <results>           <result name="..." />           <result name="..." />      </results>    </data></response>
Entrypointvar xhr = new XMLHttpRequest();xhr.open("get", "/ajax?name=value", true);                                                 Requestxhr.onreadystatechange = function(){              format  if (xhr.readyState == 4){    if (xhr.status == 200 || xhr.status == 304){      var statusNode = xhr.responseXML.getElementsByTagName("status")[0],          dataNode = xhr.responseXML.getElementsByTagName("data")[0];           if (statusNode.firstChild.nodeValue == "ok"){             handleSuccess(processData(dataNode));           } else {                                           Response             handleFailure();                                  format           }         } else {           handleFailure();         }     }};xhr.send(null);                         Basic implementation                      Lowest-level Ajax with XMLHttpRequest
Library  reference               Entrypointvar id = Y.io("/ajax?name=value", {  method: "get",                           Request  on: {                                     format    success: function(req){       var statusNode = req.responseXML.getElementsByTagName("status")[0],           dataNode = req.responseXML.getElementsByTagName("data")[0];       if (statusNode.firstChild.nodeValue == "ok"){         handleSuccess(processData(dataNode));       } else {                                       Response         handleFailure();                               format       }    },    failure: function(req){       handleFailure();    }  }});              Implementation using a library Hides some of the ugliness but still tightly coupled to Ajax implementation
var id = sandbox.request({ name: "value" }, {  success: function(response){     handleSuccess(response.data);  },  failure: function(response){     handleFailure();  }});          Implementation using sandbox    Passes through to core - hides all Ajax communication details
Request format                 Entrypoint                  Response formatAjax extension encapsulates all details Any of these three can change without affecting modules
GET ?name=value&name=value    /request        Request format           Entrypoint       Response format{    status: "ok|error",    data: {      results: [        "...",        "..."      ]    }}
Module  Module                   ModuleModule       Sandbox        Module            ApplicationExtension                   Ajax/JSON               Core            Base Library
Ajax Extension Jobs•   Hide Ajax communication details•   Provide common request interface•   Provide common response interface•   Manage server failures
Application ArchitectureModulesSandboxApplication CoreBase Library
Module  Module                   ModuleModule       Sandbox        Module            ApplicationExtension                   Extension               Core            Base Library
The base library provides basic functionality                  Ironic, huh?                Base Library
Scalable JavaScript Application Architecture
flickr.com/photos/kartik_m/2724121901/ Most applications are too tightly coupled            to the base libraryDevelopers get upset when they cant touch the base library directly
High-Performance JavaScript, OSCON 2007             Joseph Smarr, Plaxo, Inc.
Learn morehttp://josephsmarr.com/2007/07/25/high-performance-javascript-oscon-2007/
Ideally, only the application corehas any idea what base library is            being used
Module Module                 ModuleModule     Sandbox       Module          Application             Core             Dojo
Module Module                 ModuleModule     Sandbox       Module          Application             Core             YUI
Base Library Jobs• Browser normalization• General-purpose utilities     Parsers/serializers for XML, JSON, etc.     Object manipulation     DOM manipulation     Ajax communication• Provide low-level extensibility
Module  Module                   ModuleModule       Sandbox        Module            ApplicationExtension                   Extension               CoreExtension   Base Library    Extension
Architecture Knowledge
Module  Module                   ModuleModule       Sandbox        Module            ApplicationExtension                   Extension               CoreExtension   Base Library    Extension
Only the base library knows which browser               is being used    No other part of the architecture should need to know                    Base Library
Only the application core knows which      base library is being used  No other part of the architecture should need to know                   Application                      Core                  Base Library
Sandbox                       Application                          CoreOnly the sandbox knows which application core                is being used      No other part of the architecture should need to know
Module      Module                                      Module   Module                  Sandbox                   Module    The modules know nothing except that            the sandbox existsThey have no knowledge of one another or the rest of the architecture
Module  Module                     ModuleModule         Sandbox        Module              ApplicationExtension                     Extension                 CoreExtension    Base Library     ExtensionNo part knows about the web application
Advantages
flickr.com/photos/kgoldendragon613/278240446/Multiple different applications can be created          with the same framework     Minimize ramp-up time by reusing existing components
Each part can be tested separatelyYou just need to verify that each is doing its unique job                                             flickr.com/photos/misocrazy/151021636/
A scalable JavaScript architectureallows you to replace any blockwithout fear of toppling the tower                flickr.com/photos/aku-ma/2424194422/
The End
Etcetera•My blog:      www.nczonline.net•Twitter:      @slicknet•These Slides: slideshare.net/nzakas
1 of 108

Recommended

Scalable JavaScript Design Patterns by
Scalable JavaScript Design PatternsScalable JavaScript Design Patterns
Scalable JavaScript Design PatternsAddy Osmani
47K views117 slides
Introduction to angular with a simple but complete project by
Introduction to angular with a simple but complete projectIntroduction to angular with a simple but complete project
Introduction to angular with a simple but complete projectJadson Santos
12.9K views106 slides
Javascript Design Patterns by
Javascript Design PatternsJavascript Design Patterns
Javascript Design PatternsIván Fernández Perea
4.8K views27 slides
Introduction to Spring Boot by
Introduction to Spring BootIntroduction to Spring Boot
Introduction to Spring BootPurbarun Chakrabarti
1.1K views18 slides
React-JS Component Life-cycle Methods by
React-JS Component Life-cycle MethodsReact-JS Component Life-cycle Methods
React-JS Component Life-cycle MethodsANKUSH CHAVAN
1.7K views19 slides
Introduction to Angularjs by
Introduction to AngularjsIntroduction to Angularjs
Introduction to AngularjsManish Shekhawat
67.3K views19 slides

More Related Content

What's hot

AngularJS for Beginners by
AngularJS for BeginnersAngularJS for Beginners
AngularJS for BeginnersEdureka!
8.4K views33 slides
Angular Dependency Injection by
Angular Dependency InjectionAngular Dependency Injection
Angular Dependency InjectionNir Kaufman
604 views41 slides
20180518 QNAP Seminar - Introduction to React Native by
20180518 QNAP Seminar - Introduction to React Native20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React NativeEric Deng
218 views53 slides
Unit 1 - TypeScript & Introduction to Angular CLI.pptx by
Unit 1 - TypeScript & Introduction to Angular CLI.pptxUnit 1 - TypeScript & Introduction to Angular CLI.pptx
Unit 1 - TypeScript & Introduction to Angular CLI.pptxMalla Reddy University
450 views55 slides
Asp.net MVC training session by
Asp.net MVC training sessionAsp.net MVC training session
Asp.net MVC training sessionHrichi Mohamed
6.3K views44 slides
Node.js Express by
Node.js  ExpressNode.js  Express
Node.js ExpressEyal Vardi
4.8K views26 slides

What's hot(20)

AngularJS for Beginners by Edureka!
AngularJS for BeginnersAngularJS for Beginners
AngularJS for Beginners
Edureka!8.4K views
Angular Dependency Injection by Nir Kaufman
Angular Dependency InjectionAngular Dependency Injection
Angular Dependency Injection
Nir Kaufman604 views
20180518 QNAP Seminar - Introduction to React Native by Eric Deng
20180518 QNAP Seminar - Introduction to React Native20180518 QNAP Seminar - Introduction to React Native
20180518 QNAP Seminar - Introduction to React Native
Eric Deng218 views
Asp.net MVC training session by Hrichi Mohamed
Asp.net MVC training sessionAsp.net MVC training session
Asp.net MVC training session
Hrichi Mohamed6.3K views
Node.js Express by Eyal Vardi
Node.js  ExpressNode.js  Express
Node.js Express
Eyal Vardi4.8K views
Angular - Chapter 5 - Directives by WebStackAcademy
 Angular - Chapter 5 - Directives Angular - Chapter 5 - Directives
Angular - Chapter 5 - Directives
WebStackAcademy304 views
Writing Efficient JavaScript by Nicholas Zakas
Writing Efficient JavaScriptWriting Efficient JavaScript
Writing Efficient JavaScript
Nicholas Zakas88.3K views
Promises, promises, and then observables by Stefan Charsley
Promises, promises, and then observablesPromises, promises, and then observables
Promises, promises, and then observables
Stefan Charsley175 views
Asynchronous JavaScript Programming by Haim Michael
Asynchronous JavaScript ProgrammingAsynchronous JavaScript Programming
Asynchronous JavaScript Programming
Haim Michael245 views
Introduction to React by Rob Quick
Introduction to ReactIntroduction to React
Introduction to React
Rob Quick951 views
Routing & Navigating Pages in Angular 2 by Knoldus Inc.
Routing & Navigating Pages in Angular 2Routing & Navigating Pages in Angular 2
Routing & Navigating Pages in Angular 2
Knoldus Inc.1.5K views
Angular - Chapter 4 - Data and Event Handling by WebStackAcademy
 Angular - Chapter 4 - Data and Event Handling Angular - Chapter 4 - Data and Event Handling
Angular - Chapter 4 - Data and Event Handling
WebStackAcademy423 views
Angular 8 by Sunil OS
Angular 8 Angular 8
Angular 8
Sunil OS531K views

Similar to Scalable JavaScript Application Architecture

From java to rails by
From java to railsFrom java to rails
From java to railsjokry
932 views71 slides
AMP110 Microsoft Access Macros by
AMP110 Microsoft Access MacrosAMP110 Microsoft Access Macros
AMP110 Microsoft Access MacrosDan D'Urso
1.3K views70 slides
Intro to Table-Grouping™ technology by
Intro to Table-Grouping™ technologyIntro to Table-Grouping™ technology
Intro to Table-Grouping™ technologyDavid McFarlane
1.1K views25 slides
Webinar: Top 5 Mistakes Your Don't Want to Make When Moving to the Cloud by
Webinar: Top 5 Mistakes Your Don't Want to Make When Moving to the CloudWebinar: Top 5 Mistakes Your Don't Want to Make When Moving to the Cloud
Webinar: Top 5 Mistakes Your Don't Want to Make When Moving to the CloudInternap
264 views22 slides
Azri solutions leaner techniques for faster portals get drupalled by
Azri solutions leaner techniques for faster portals   get drupalledAzri solutions leaner techniques for faster portals   get drupalled
Azri solutions leaner techniques for faster portals get drupalledsuniltomar04
359 views17 slides
Azri solutions leaner techniques for faster portals get drupalled by
Azri solutions leaner techniques for faster portals   get drupalledAzri solutions leaner techniques for faster portals   get drupalled
Azri solutions leaner techniques for faster portals get drupalledOpenSourceIndia
333 views17 slides

Similar to Scalable JavaScript Application Architecture(20)

From java to rails by jokry
From java to railsFrom java to rails
From java to rails
jokry932 views
AMP110 Microsoft Access Macros by Dan D'Urso
AMP110 Microsoft Access MacrosAMP110 Microsoft Access Macros
AMP110 Microsoft Access Macros
Dan D'Urso1.3K views
Intro to Table-Grouping™ technology by David McFarlane
Intro to Table-Grouping™ technologyIntro to Table-Grouping™ technology
Intro to Table-Grouping™ technology
David McFarlane1.1K views
Webinar: Top 5 Mistakes Your Don't Want to Make When Moving to the Cloud by Internap
Webinar: Top 5 Mistakes Your Don't Want to Make When Moving to the CloudWebinar: Top 5 Mistakes Your Don't Want to Make When Moving to the Cloud
Webinar: Top 5 Mistakes Your Don't Want to Make When Moving to the Cloud
Internap264 views
Azri solutions leaner techniques for faster portals get drupalled by suniltomar04
Azri solutions leaner techniques for faster portals   get drupalledAzri solutions leaner techniques for faster portals   get drupalled
Azri solutions leaner techniques for faster portals get drupalled
suniltomar04359 views
Azri solutions leaner techniques for faster portals get drupalled by OpenSourceIndia
Azri solutions leaner techniques for faster portals   get drupalledAzri solutions leaner techniques for faster portals   get drupalled
Azri solutions leaner techniques for faster portals get drupalled
OpenSourceIndia333 views
Ashish pandey huawei osi_days2011_cgroups_understanding_better by suniltomar04
Ashish pandey huawei osi_days2011_cgroups_understanding_betterAshish pandey huawei osi_days2011_cgroups_understanding_better
Ashish pandey huawei osi_days2011_cgroups_understanding_better
suniltomar041.5K views
Ashish pandey huawei osi_days2011_cgroups_understanding_better by OpenSourceIndia
Ashish pandey huawei osi_days2011_cgroups_understanding_betterAshish pandey huawei osi_days2011_cgroups_understanding_better
Ashish pandey huawei osi_days2011_cgroups_understanding_better
OpenSourceIndia1.6K views
Mas overview dirks at cni dec11b by Lee Dirks
Mas overview dirks at cni   dec11bMas overview dirks at cni   dec11b
Mas overview dirks at cni dec11b
Lee Dirks342 views
Dhs sequence of_learning by JaneyMay
Dhs sequence of_learningDhs sequence of_learning
Dhs sequence of_learning
JaneyMay148 views
Dhs sequence of_learning by JaneyMay
Dhs sequence of_learningDhs sequence of_learning
Dhs sequence of_learning
JaneyMay164 views
Using Database Constraints Wisely by barunio
Using Database Constraints WiselyUsing Database Constraints Wisely
Using Database Constraints Wisely
barunio660 views
Vineet Choudhry Portfolio by Rakesh Ranjan
Vineet Choudhry PortfolioVineet Choudhry Portfolio
Vineet Choudhry Portfolio
Rakesh Ranjan836 views
Tijdschriften publiceren met onderzoeksdata: Enhanced Journals Made Easy by Driek Heesakkers
Tijdschriften publiceren met onderzoeksdata: Enhanced Journals Made EasyTijdschriften publiceren met onderzoeksdata: Enhanced Journals Made Easy
Tijdschriften publiceren met onderzoeksdata: Enhanced Journals Made Easy
Driek Heesakkers336 views

More from Nicholas Zakas

Browser Wars Episode 1: The Phantom Menace by
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceNicholas Zakas
77.4K views168 slides
Enough with the JavaScript already! by
Enough with the JavaScript already!Enough with the JavaScript already!
Enough with the JavaScript already!Nicholas Zakas
260K views84 slides
The Pointerless Web by
The Pointerless WebThe Pointerless Web
The Pointerless WebNicholas Zakas
7K views64 slides
JavaScript APIs you’ve never heard of (and some you have) by
JavaScript APIs you’ve never heard of (and some you have)JavaScript APIs you’ve never heard of (and some you have)
JavaScript APIs you’ve never heard of (and some you have)Nicholas Zakas
51.4K views67 slides
JavaScript Timers, Power Consumption, and Performance by
JavaScript Timers, Power Consumption, and PerformanceJavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and PerformanceNicholas Zakas
54.4K views128 slides
Scalable JavaScript Application Architecture 2012 by
Scalable JavaScript Application Architecture 2012Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012Nicholas Zakas
94K views114 slides

More from Nicholas Zakas(20)

Browser Wars Episode 1: The Phantom Menace by Nicholas Zakas
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Nicholas Zakas77.4K views
Enough with the JavaScript already! by Nicholas Zakas
Enough with the JavaScript already!Enough with the JavaScript already!
Enough with the JavaScript already!
Nicholas Zakas260K views
JavaScript APIs you’ve never heard of (and some you have) by Nicholas Zakas
JavaScript APIs you’ve never heard of (and some you have)JavaScript APIs you’ve never heard of (and some you have)
JavaScript APIs you’ve never heard of (and some you have)
Nicholas Zakas51.4K views
JavaScript Timers, Power Consumption, and Performance by Nicholas Zakas
JavaScript Timers, Power Consumption, and PerformanceJavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and Performance
Nicholas Zakas54.4K views
Scalable JavaScript Application Architecture 2012 by Nicholas Zakas
Scalable JavaScript Application Architecture 2012Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012
Nicholas Zakas94K views
Maintainable JavaScript 2012 by Nicholas Zakas
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012
Nicholas Zakas90.8K views
High Performance JavaScript (CapitolJS 2011) by Nicholas Zakas
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
Nicholas Zakas57.5K views
Maintainable JavaScript 2011 by Nicholas Zakas
Maintainable JavaScript 2011Maintainable JavaScript 2011
Maintainable JavaScript 2011
Nicholas Zakas12.1K views
High Performance JavaScript 2011 by Nicholas Zakas
High Performance JavaScript 2011High Performance JavaScript 2011
High Performance JavaScript 2011
Nicholas Zakas10.1K views
Mobile Web Speed Bumps by Nicholas Zakas
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
Nicholas Zakas13.4K views
High Performance JavaScript (Amazon DevCon 2011) by Nicholas Zakas
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
Nicholas Zakas4.6K views
Progressive Enhancement 2.0 (Conference Agnostic) by Nicholas Zakas
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Nicholas Zakas42.5K views
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011) by Nicholas Zakas
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Nicholas Zakas10.1K views
YUI Test The Next Generation (YUIConf 2010) by Nicholas Zakas
YUI Test The Next Generation (YUIConf 2010)YUI Test The Next Generation (YUIConf 2010)
YUI Test The Next Generation (YUIConf 2010)
Nicholas Zakas3.7K views
High Performance JavaScript (YUIConf 2010) by Nicholas Zakas
High Performance JavaScript (YUIConf 2010)High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)
Nicholas Zakas61.8K views
High Performance JavaScript - Fronteers 2010 by Nicholas Zakas
High Performance JavaScript - Fronteers 2010High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010
Nicholas Zakas4.2K views
Nicholas' Performance Talk at Google by Nicholas Zakas
Nicholas' Performance Talk at GoogleNicholas' Performance Talk at Google
Nicholas' Performance Talk at Google
Nicholas Zakas4.6K views
High Performance JavaScript - WebDirections USA 2010 by Nicholas Zakas
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010
Nicholas Zakas59.7K views
Performance on the Yahoo! Homepage by Nicholas Zakas
Performance on the Yahoo! HomepagePerformance on the Yahoo! Homepage
Performance on the Yahoo! Homepage
Nicholas Zakas7.9K views

Recently uploaded

CloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&T by
CloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&TCloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&T
CloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&TShapeBlue
81 views34 slides
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue by
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlueWhat’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlueShapeBlue
191 views23 slides
Microsoft Power Platform.pptx by
Microsoft Power Platform.pptxMicrosoft Power Platform.pptx
Microsoft Power Platform.pptxUni Systems S.M.S.A.
74 views38 slides
The Power of Heat Decarbonisation Plans in the Built Environment by
The Power of Heat Decarbonisation Plans in the Built EnvironmentThe Power of Heat Decarbonisation Plans in the Built Environment
The Power of Heat Decarbonisation Plans in the Built EnvironmentIES VE
67 views20 slides
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N... by
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...James Anderson
142 views32 slides
2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlue by
2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlue2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlue
2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlueShapeBlue
75 views23 slides

Recently uploaded(20)

CloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&T by ShapeBlue
CloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&TCloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&T
CloudStack and GitOps at Enterprise Scale - Alex Dometrius, Rene Glover - AT&T
ShapeBlue81 views
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue by ShapeBlue
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlueWhat’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue
What’s New in CloudStack 4.19 - Abhishek Kumar - ShapeBlue
ShapeBlue191 views
The Power of Heat Decarbonisation Plans in the Built Environment by IES VE
The Power of Heat Decarbonisation Plans in the Built EnvironmentThe Power of Heat Decarbonisation Plans in the Built Environment
The Power of Heat Decarbonisation Plans in the Built Environment
IES VE67 views
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N... by James Anderson
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
James Anderson142 views
2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlue by ShapeBlue
2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlue2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlue
2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlue
ShapeBlue75 views
Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ... by ShapeBlue
Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ...Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ...
Backroll, News and Demo - Pierre Charton, Matthias Dhellin, Ousmane Diarra - ...
ShapeBlue121 views
Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha... by ShapeBlue
Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha...Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha...
Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha...
ShapeBlue113 views
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R... by ShapeBlue
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...
Setting Up Your First CloudStack Environment with Beginners Challenges - MD R...
ShapeBlue105 views
Digital Personal Data Protection (DPDP) Practical Approach For CISOs by Priyanka Aash
Digital Personal Data Protection (DPDP) Practical Approach For CISOsDigital Personal Data Protection (DPDP) Practical Approach For CISOs
Digital Personal Data Protection (DPDP) Practical Approach For CISOs
Priyanka Aash103 views
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue by ShapeBlue
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlueCloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue
ShapeBlue68 views
Declarative Kubernetes Cluster Deployment with Cloudstack and Cluster API - O... by ShapeBlue
Declarative Kubernetes Cluster Deployment with Cloudstack and Cluster API - O...Declarative Kubernetes Cluster Deployment with Cloudstack and Cluster API - O...
Declarative Kubernetes Cluster Deployment with Cloudstack and Cluster API - O...
ShapeBlue59 views
NTGapps NTG LowCode Platform by Mustafa Kuğu
NTGapps NTG LowCode Platform NTGapps NTG LowCode Platform
NTGapps NTG LowCode Platform
Mustafa Kuğu287 views
The Role of Patterns in the Era of Large Language Models by Yunyao Li
The Role of Patterns in the Era of Large Language ModelsThe Role of Patterns in the Era of Large Language Models
The Role of Patterns in the Era of Large Language Models
Yunyao Li74 views
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda... by ShapeBlue
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...
ShapeBlue93 views
CloudStack Object Storage - An Introduction - Vladimir Petrov - ShapeBlue by ShapeBlue
CloudStack Object Storage - An Introduction - Vladimir Petrov - ShapeBlueCloudStack Object Storage - An Introduction - Vladimir Petrov - ShapeBlue
CloudStack Object Storage - An Introduction - Vladimir Petrov - ShapeBlue
ShapeBlue63 views
Extending KVM Host HA for Non-NFS Storage - Alex Ivanov - StorPool by ShapeBlue
Extending KVM Host HA for Non-NFS Storage -  Alex Ivanov - StorPoolExtending KVM Host HA for Non-NFS Storage -  Alex Ivanov - StorPool
Extending KVM Host HA for Non-NFS Storage - Alex Ivanov - StorPool
ShapeBlue56 views
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas... by Bernd Ruecker
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
Bernd Ruecker50 views
Keynote Talk: Open Source is Not Dead - Charles Schulz - Vates by ShapeBlue
Keynote Talk: Open Source is Not Dead - Charles Schulz - VatesKeynote Talk: Open Source is Not Dead - Charles Schulz - Vates
Keynote Talk: Open Source is Not Dead - Charles Schulz - Vates
ShapeBlue178 views

Scalable JavaScript Application Architecture

  • 1. Scalable JavaScript Application Architecture Nicholas C. Zakas | @slicknet
  • 2. Whos this guy? Ex-tech lead Co-Creator Contributor, Yahoo! csslint.net Creator of YUI TestAuthor Lead Author Contributor Lead Author
  • 5. ModelView Controller
  • 6. Single-page apps &Multi-page apps
  • 8. An application framework is like a playground for your codeProvides structure around otherwise unrelated activities flickr.com/photos/osterwalder/152697503/
  • 9. Isnt that what JavaScript libraries do?
  • 10. flickr.com/photos/skistz/398429879/A JavaScript library is like a toolbox You can build any number of things using the tools
  • 11. Application CoreBase Library
  • 13. module (n)1 : a standard or unit of measurement2 : the size of some one part taken as a unit of measure by which theproportions of an architectural composition are regulated3 a : any in a series of standardized units for use together: as (1) : aunit of furniture or architecture (2) : an educational unit which coversa single subject or topic b : a usually packaged functional assemblyof electronic components for use with other such assemblies4 : an independently operable unit that is a part of the total structureof a space vehicle5 a : a subset of an additive group that is also a group under additionb : a mathematical set that is a commutative group under additionand that is closed under multiplication which is distributive from theleft or right or both by elements of a ring and for which a(bx) = (ab)xor (xb)a = x(ba) or both where a and b are elements of the ring and xbelongs to the set Source: Merriam-Webster Dictionary
  • 14. module (n)1 : a standard or unit of measurement2 : the size of some one part taken as a unit of measure by which theproportions of an architectural composition are regulated3 a : any in a series of standardized units for use together: as (1) : aunit of furniture or architecture (2) : an educational unit which coversa single subject or topic b : a usually packaged functional assemblyof electronic components for use with other such assemblies4 : an independently operable unit that is a part of the total structureof a space vehicle5 a : a subset of an additive group that is also a group under additionb : a mathematical set that is a commutative group under additionand that is closed under multiplication which is distributive from theleft or right or both by elements of a ring and for which a(bx) = (ab)xor (xb)a = x(ba) or both where a and b are elements of the ring and xbelongs to the set Source: Merriam-Webster Dictionary
  • 17. How does this apply to web applications?
  • 18. web application module (n)1 : an independent unit of functionality that is part of the totalstructure of a web application Source: Me
  • 20. Web application modules consist of HTML + CSS + JavaScript
  • 21. Any single module should be ableto live on its own
  • 22. Loose coupling allows you to make changes to one module without affecting the others flickr.com/photos/quinnanya/3575417671/
  • 23. flickr.com/photos/renfield/3414246938/ Each module has its own sandbox An interface with which the module can interact to ensure loose coupling
  • 24. Module Module ModuleModule Sandbox Module Application Core Base Library
  • 26. Module Module ModuleModule Sandbox Module Modules have limited knowledge Each module knows about their sandbox and thats it
  • 27. Core.register("module-name", function(sandbox){ return { init: function(){ //constructor }, destroy: function(){ //destructor } };});
  • 28. Which parts know about the web application being built?
  • 30. Each part of the architecture is like a puzzle piece No single piece needs to know what the picture is All that matters is that the piece does its own job correctly flickr.com/photos/generated/501445202/
  • 31. What is a modules job?
  • 32. Hello, Im the weather module.Its my job to tell you the weather.
  • 33. Hello, Im the stocks module.Its my job to tell you about thestock market.
  • 34. Each modules job is to create a meaningful user experience
  • 35. flickr.com/photos/eljay/2392332379/ The web application is created as a result of all parts doing their job
  • 36. This doesnt mean modules can do whatever they want to do their job
  • 37. flickr.com/photos/tedsblog/43433812/ Modules are like little kidsThey need a strict set of rules so they dont get into trouble
  • 38. Module Rules• Hands to yourself  Only call your own methods or those on the sandbox  Dont access DOM elements outside of your box  Dont access non-native global objects• Ask, dont take  Anything else you need, ask the sandbox• Dont leave your toys around  Dont create global objects• Dont talk to strangers  Dont directly reference other modules
  • 39. Modules must stay within their own sandboxes No matter how restrictive or uncomfortable it may seemflickr.com/photos/madaise/3406217980/
  • 41. Module Module ModuleModule Sandbox Module Application Core Base Library
  • 42. SandboxThe sandbox ensures a consistent interface Modules can rely on the methods to always be there
  • 43. Module Module ModuleModule Sandbox Module Application Core Base Library
  • 44. Module Module ModuleModule Sandbox Module Modules only know the sandbox The rest of the architecture doesnt exist to them
  • 45. The sandbox also acts like a security guardKnows what the modules are allowed to access and do on the framework flickr.com/photos/heraklit/169566548/
  • 46. Core.register("module-name", function(sandbox){ return { init: function(){ //not sure if Im allowed... if (sandbox.iCanHazCheezburger()){ alert("thx u"); } }, destroy: function(){ //destructor } };});
  • 47. Sandbox Jobs• Consistency• Security• Communication
  • 48. Take the time to design the correct sandbox interface It cant change later
  • 50. Module Module ModuleModule Sandbox Module Application Core Base Library
  • 51. Application CoreThe application core manages modules Thats it
  • 52. Application Coreaka Application Controller
  • 53. The application core tells a module whenit should initialize and when it should shutdown flickr.com/photos/bootbearwdc/20817093/ flickr.com/photos/bootbearwdc/20810695/
  • 54. Core = function(){ var moduleData = {}; return { register: function(moduleId, creator){ moduleData[moduleId] = { creator: creator, instance: null }; }, start: function(moduleId){ moduleData[moduleId].instance = moduleData[moduleId].creator(new Sandbox(this)); moduleData[moduleId].instance.init(); }, stop: function(moduleId){ var data = moduleData[moduleId]; if (data.instance){ data.instance.destroy(); data.instance = null; } } }}();
  • 55. Core = function(){ return { //more code here... startAll: function(){ for (var moduleId in moduleData){ if (moduleData.hasOwnProperty(moduleId)){ this.start(moduleId); } } }, stopAll: function(){ for (var moduleId in moduleData){ if (moduleData.hasOwnProperty(moduleId)){ this.stop(moduleId); } } }, //more code here... };}();
  • 56. //register modulesCore.register("module1", function(sandbox){ /*...*/ });Core.register("module2", function(sandbox){ /*...*/ });Core.register("module3", function(sandbox){ /*...*/ });Core.register("module4", function(sandbox){ /*...*/ });//start the application by starting all modulesCore.startAll();
  • 57. The application core managescommunication between modules flickr.com/photos/markhillary/353738538/
  • 59. TimelineFilter = { changeFilter: function(filter){ Timeline.applyFilter(filter); }}; Tight CouplingStatusPoster = { postStatus: function(status){ Timeline.post(status); }}; Tight CouplingTimeline = { applyFilter: function(filter){ //implementation }, post: function(status){ //implementation }};
  • 60. Core.register("timeline-filter", function(sandbox){ return { changeFilter: function(filter){ sandbox.notify({ type: "timeline-filter-change", data: filter }); Loose } }; Coupling});Core.register("status-poster", function(sandbox){ return { postStatus: function(statusText){ sandbox.notify({ type: "new-status", data: statusText }); Loose } }; Coupling});
  • 61. Core.register("timeline", function(sandbox){ return { init: function(){ sandbox.listen([ "timeline-filter-change", "post-status" ], this.handleNotification, this); Loose }, Coupling handleNotification: function(note){ switch(note.type){ case "timeline-filter-change": this.applyFilter(note.data); return; case "post-status": this.post(note.data); return; } } };});
  • 62. When modules are loosely coupled, removing a module doesnt break the othersNo direct access to another module = no breaking should the module disappear
  • 63. The application core handles errorsUses available information to determine best course of action flickr.com/photos/brandonschauer/3168761995/
  • 64. Core = function(){ var moduleData = {}, debug = false; function createInstance(moduleId){ var instance = moduleData[moduleId].creator(new Sandbox(this)), name, method; if (!debug){ for (name in instance){ method = instance[name]; if (typeof method == "function"){ instance[name] = function(name, method){ return function(){ try { return method.apply(this, arguments);} catch(ex) {log(1, name + "(): " + ex.message);} }; }(name, method); } } } return instance; } //more code here}();
  • 66. Application Core Jobs• Manage module lifecycle• Enable inter-module communication• General error handling• Be extensible
  • 68. Web applications changeOften in ways that you couldnt possibly anticipate
  • 70. flickr.com/photos/pointnshoot/1443575327/ Anything built for extension can never be obsoleteExtensions augment the capabilities of the core to keep it relevant and useful
  • 71. Module Module ModuleModule Sandbox Module ApplicationExtension Extension Core Base Library
  • 72. What Extensions?• Error handling• Ajax communication• New module capabilities• General utilities• Anything!
  • 73. Ajax communication comes in different forms Tends to be tied to something available on the server
  • 74. Request format Entrypoint Response formatThree parts must be in sync for Ajax to work Modules shouldnt know anything about any of this
  • 75. Module Module ModuleModule Sandbox Module ApplicationExtension Ajax/XML Core Base Library
  • 76. GET ?name=value&name=value /ajax Request format Entrypoint Response format<response> <status>ok|error</status> <data> <results> <result name="..." /> <result name="..." /> </results> </data></response>
  • 77. Entrypointvar xhr = new XMLHttpRequest();xhr.open("get", "/ajax?name=value", true); Requestxhr.onreadystatechange = function(){ format if (xhr.readyState == 4){ if (xhr.status == 200 || xhr.status == 304){ var statusNode = xhr.responseXML.getElementsByTagName("status")[0], dataNode = xhr.responseXML.getElementsByTagName("data")[0]; if (statusNode.firstChild.nodeValue == "ok"){ handleSuccess(processData(dataNode)); } else { Response handleFailure(); format } } else { handleFailure(); } }};xhr.send(null); Basic implementation Lowest-level Ajax with XMLHttpRequest
  • 78. Library reference Entrypointvar id = Y.io("/ajax?name=value", { method: "get", Request on: { format success: function(req){ var statusNode = req.responseXML.getElementsByTagName("status")[0], dataNode = req.responseXML.getElementsByTagName("data")[0]; if (statusNode.firstChild.nodeValue == "ok"){ handleSuccess(processData(dataNode)); } else { Response handleFailure(); format } }, failure: function(req){ handleFailure(); } }}); Implementation using a library Hides some of the ugliness but still tightly coupled to Ajax implementation
  • 79. var id = sandbox.request({ name: "value" }, { success: function(response){ handleSuccess(response.data); }, failure: function(response){ handleFailure(); }}); Implementation using sandbox Passes through to core - hides all Ajax communication details
  • 80. Request format Entrypoint Response formatAjax extension encapsulates all details Any of these three can change without affecting modules
  • 81. GET ?name=value&name=value /request Request format Entrypoint Response format{ status: "ok|error", data: { results: [ "...", "..." ] }}
  • 82. Module Module ModuleModule Sandbox Module ApplicationExtension Ajax/JSON Core Base Library
  • 83. Ajax Extension Jobs• Hide Ajax communication details• Provide common request interface• Provide common response interface• Manage server failures
  • 85. Module Module ModuleModule Sandbox Module ApplicationExtension Extension Core Base Library
  • 86. The base library provides basic functionality Ironic, huh? Base Library
  • 88. flickr.com/photos/kartik_m/2724121901/ Most applications are too tightly coupled to the base libraryDevelopers get upset when they cant touch the base library directly
  • 89. High-Performance JavaScript, OSCON 2007 Joseph Smarr, Plaxo, Inc.
  • 91. Ideally, only the application corehas any idea what base library is being used
  • 92. Module Module ModuleModule Sandbox Module Application Core Dojo
  • 93. Module Module ModuleModule Sandbox Module Application Core YUI
  • 94. Base Library Jobs• Browser normalization• General-purpose utilities  Parsers/serializers for XML, JSON, etc.  Object manipulation  DOM manipulation  Ajax communication• Provide low-level extensibility
  • 95. Module Module ModuleModule Sandbox Module ApplicationExtension Extension CoreExtension Base Library Extension
  • 97. Module Module ModuleModule Sandbox Module ApplicationExtension Extension CoreExtension Base Library Extension
  • 98. Only the base library knows which browser is being used No other part of the architecture should need to know Base Library
  • 99. Only the application core knows which base library is being used No other part of the architecture should need to know Application Core Base Library
  • 100. Sandbox Application CoreOnly the sandbox knows which application core is being used No other part of the architecture should need to know
  • 101. Module Module Module Module Sandbox Module The modules know nothing except that the sandbox existsThey have no knowledge of one another or the rest of the architecture
  • 102. Module Module ModuleModule Sandbox Module ApplicationExtension Extension CoreExtension Base Library ExtensionNo part knows about the web application
  • 104. flickr.com/photos/kgoldendragon613/278240446/Multiple different applications can be created with the same framework Minimize ramp-up time by reusing existing components
  • 105. Each part can be tested separatelyYou just need to verify that each is doing its unique job flickr.com/photos/misocrazy/151021636/
  • 106. A scalable JavaScript architectureallows you to replace any blockwithout fear of toppling the tower flickr.com/photos/aku-ma/2424194422/
  • 108. Etcetera•My blog: www.nczonline.net•Twitter: @slicknet•These Slides: slideshare.net/nzakas