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
Webpack slides by
Webpack slidesWebpack slides
Webpack slidesАндрей Вандакуров
4.7K views33 slides
Javascript Design Patterns by
Javascript Design PatternsJavascript Design Patterns
Javascript Design PatternsIván Fernández Perea
4.8K views27 slides
AngularJS Architecture by
AngularJS ArchitectureAngularJS Architecture
AngularJS ArchitectureEyal Vardi
64.9K views38 slides
Gaganjot Kaur- The Nx Workspace.docx by
Gaganjot Kaur- The Nx Workspace.docxGaganjot Kaur- The Nx Workspace.docx
Gaganjot Kaur- The Nx Workspace.docxGaganjot kaur
250 views20 slides
Angular js PPT by
Angular js PPTAngular js PPT
Angular js PPTImtiyaz Ahmad Khan
4.4K views15 slides

More Related Content

What's hot

The Point of Vue - Intro to Vue.js by
The Point of Vue - Intro to Vue.jsThe Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.jsHolly Schinsky
1.6K views30 slides
Testing of React JS app by
Testing of React JS appTesting of React JS app
Testing of React JS appAleks Zinevych
2.4K views46 slides
Angular 9 by
Angular 9 Angular 9
Angular 9 Raja Vishnu
899 views36 slides
WEB DEVELOPMENT USING REACT JS by
 WEB DEVELOPMENT USING REACT JS WEB DEVELOPMENT USING REACT JS
WEB DEVELOPMENT USING REACT JSMuthuKumaran Singaravelu
908 views39 slides
Yale Jenkins Show and Tell by
Yale Jenkins Show and TellYale Jenkins Show and Tell
Yale Jenkins Show and TellE. Camden Fisher
19.4K views24 slides
HTML, CSS & Javascript Architecture (extended version) - Jan Kraus by
HTML, CSS & Javascript Architecture (extended version) - Jan KrausHTML, CSS & Javascript Architecture (extended version) - Jan Kraus
HTML, CSS & Javascript Architecture (extended version) - Jan KrausWomen in Technology Poland
2K views69 slides

What's hot(20)

The Point of Vue - Intro to Vue.js by Holly Schinsky
The Point of Vue - Intro to Vue.jsThe Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.js
Holly Schinsky1.6K views
AtoM and Vagrant: Installing and Configuring the AtoM Vagrant Box for Local T... by Artefactual Systems - AtoM
AtoM and Vagrant: Installing and Configuring the AtoM Vagrant Box for Local T...AtoM and Vagrant: Installing and Configuring the AtoM Vagrant Box for Local T...
AtoM and Vagrant: Installing and Configuring the AtoM Vagrant Box for Local T...
Angular - Chapter 1 - Introduction by WebStackAcademy
 Angular - Chapter 1 - Introduction Angular - Chapter 1 - Introduction
Angular - Chapter 1 - Introduction
WebStackAcademy963 views
Quarkus Denmark 2019 by Max Andersen
Quarkus Denmark 2019Quarkus Denmark 2019
Quarkus Denmark 2019
Max Andersen606 views
Angular vs React: Building modern SharePoint interfaces with SPFx by Dimcho Tsanov
Angular vs React: Building modern SharePoint interfaces with SPFxAngular vs React: Building modern SharePoint interfaces with SPFx
Angular vs React: Building modern SharePoint interfaces with SPFx
Dimcho Tsanov1.4K views
An Introduction to WebAssembly by Daniel Budden
An Introduction to WebAssemblyAn Introduction to WebAssembly
An Introduction to WebAssembly
Daniel Budden3.2K views
WebAssembly Demystified by Jay Phelps
WebAssembly DemystifiedWebAssembly Demystified
WebAssembly Demystified
Jay Phelps2K views
Intro to Node.js (v1) by Chris Cowan
Intro to Node.js (v1)Intro to Node.js (v1)
Intro to Node.js (v1)
Chris Cowan1.5K views
Node.js Express by Eyal Vardi
Node.js  ExpressNode.js  Express
Node.js Express
Eyal Vardi4.8K 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

Mitigating Common CloudStack Instance Deployment Failures - Jithin Raju - Sha... by
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...ShapeBlue
138 views18 slides
Cencora Executive Symposium by
Cencora Executive SymposiumCencora Executive Symposium
Cencora Executive Symposiummarketingcommunicati21
139 views14 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
69 views20 slides
CloudStack Object Storage - An Introduction - Vladimir Petrov - ShapeBlue by
CloudStack Object Storage - An Introduction - Vladimir Petrov - ShapeBlueCloudStack Object Storage - An Introduction - Vladimir Petrov - ShapeBlue
CloudStack Object Storage - An Introduction - Vladimir Petrov - ShapeBlueShapeBlue
93 views15 slides
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f... by
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...TrustArc
160 views29 slides
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit... by
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...ShapeBlue
117 views25 slides

Recently uploaded(20)

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...
ShapeBlue138 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 VE69 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
ShapeBlue93 views
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f... by TrustArc
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc160 views
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit... by ShapeBlue
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...
Transitioning from VMware vCloud to Apache CloudStack: A Path to Profitabilit...
ShapeBlue117 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 - ...
ShapeBlue146 views
Igniting Next Level Productivity with AI-Infused Data Integration Workflows by Safe Software
Igniting Next Level Productivity with AI-Infused Data Integration Workflows Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Safe Software385 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
ShapeBlue222 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 Anderson156 views
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or... by ShapeBlue
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...
Zero to Cloud Hero: Crafting a Private Cloud from Scratch with XCP-ng, Xen Or...
ShapeBlue158 views
State of the Union - Rohit Yadav - Apache CloudStack by ShapeBlue
State of the Union - Rohit Yadav - Apache CloudStackState of the Union - Rohit Yadav - Apache CloudStack
State of the Union - Rohit Yadav - Apache CloudStack
ShapeBlue253 views
Migrating VMware Infra to KVM Using CloudStack - Nicolas Vazquez - ShapeBlue by ShapeBlue
Migrating VMware Infra to KVM Using CloudStack - Nicolas Vazquez - ShapeBlueMigrating VMware Infra to KVM Using CloudStack - Nicolas Vazquez - ShapeBlue
Migrating VMware Infra to KVM Using CloudStack - Nicolas Vazquez - ShapeBlue
ShapeBlue176 views
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT by ShapeBlue
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBITUpdates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT
Updates on the LINSTOR Driver for CloudStack - Rene Peinthor - LINBIT
ShapeBlue166 views
"Surviving highload with Node.js", Andrii Shumada by Fwdays
"Surviving highload with Node.js", Andrii Shumada "Surviving highload with Node.js", Andrii Shumada
"Surviving highload with Node.js", Andrii Shumada
Fwdays53 views
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue by ShapeBlue
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlueElevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue
ShapeBlue179 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
ShapeBlue210 views
NTGapps NTG LowCode Platform by Mustafa Kuğu
NTGapps NTG LowCode Platform NTGapps NTG LowCode Platform
NTGapps NTG LowCode Platform
Mustafa Kuğu365 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
ShapeBlue103 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