SlideShare a Scribd company logo
1 of 114
Download to read offline
Scalable JavaScript Application Architecture




            Nicholas C. Zakas | @slicknet
New
Model




View           Controller
Building an application
      framework
An application framework
 is like a playground for your code
Provides structure around otherwise unrelated activities




                                          flickr.com/photos/osterwalder/152697503/
Isn't that what JavaScript
        libraries do?
flickr.com/photos/skistz/398429879/




                                                  jQuery


                                                       YUI


                                                     Dojo

A JavaScript library is like a toolbox
 You can build any number of things using the tools
Application
   Core


Base Library
Module Theory
 Everything is a module
module (n)
1 : a standard or unit of measurement
2 : the size of some one part taken as a unit of measure by which the
proportions of an architectural composition are regulated
3 a : any in a series of standardized units for use together: as (1) : a
unit of furniture or architecture (2) : an educational unit which covers
a single subject or topic b : a usually packaged functional assembly
of electronic components for use with other such assemblies
4 : an independently operable unit that is a part of the total structure
of a space vehicle
5 a : a subset of an additive group that is also a group under addition
b : a mathematical set that is a commutative group under addition
and that is closed under multiplication which is distributive from the
left or right or both by elements of a ring and for which a(bx) = (ab)x
or (xb)a = x(ba) or both where a and b are elements of the ring and x
belongs to the set

                                                      Source: Merriam-Webster Dictionary
module (n)
1 : a standard or unit of measurement
2 : the size of some one part taken as a unit of measure by which the
proportions of an architectural composition are regulated
3 a : any in a series of standardized units for use together: as (1) : a
unit of furniture or architecture (2) : an educational unit which covers
a single subject or topic b : a usually packaged functional assembly
of electronic components for use with other such assemblies
4 : an independently operable unit that is a part of the total structure
of a space vehicle
5 a : a subset of an additive group that is also a group under addition
b : a mathematical set that is a commutative group under addition
and that is closed under multiplication which is distributive from the
left or right or both by elements of a ring and for which a(bx) = (ab)x
or (xb)a = x(ba) or both where a and b are elements of the ring and x
belongs to the set

                                                      Source: Merriam-Webster Dictionary
How does this apply to web
      applications?
web application module (n)
1 : an independent unit of functionality that is part of the total
structure of a web application




                                                                     Source: Me
Web application modules consist of
   HTML + CSS + JavaScript
Any single module should be able
to 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                  Module


Module     Sandbox        Module

          Application
             Core


          Base Library
Module
 Module                                    Module


Module               Sandbox                  Module




  Modules have limited knowledge
  Each module knows about their sandbox and that's 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 module's job?
Hello, I'm the weather module.
It's my job to tell you the weather.
Hello, I'm the stocks module.
It's my job to tell you about the
stock market.
Each module's 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
Module
 Module             Module


Module    Sandbox    Module
Module
 Module                                      Module


Module                                            Module




   Modules contain business logic
         related to the module’s particular job
Data

Module

                         View



  Modules manage data and views
 Though may not have actual objects representing either
Data
                                                  Widget
Module

                         View                     Widget



                                                  Widget



  Widgets are reusable pieces of UI
         They contain no business logic or data
Data
                                                   Menu
Module

                         View                      Tabs



                                                  Carousel



  Widgets are reusable pieces of UI
         They contain no business logic or data
Data
Module
                        View

                                                      Menu

                        Data
Module                                                Tabs

                        View
                                                     Carousel



  Widgets are part of a view toolkit
    All modules can use widgets within their views
Modules can’t do whatever they
     want to do their job
flickr.com/photos/tedsblog/43433812/




         Modules are like little kids
They need a strict set of rules so they don't get into trouble
Module Rules
Hands to yourself
– Only call your own methods or those on the sandbox
– Don't access DOM elements outside of your box
– Don't access non-native global objects
Ask, don't take
– Anything else you need, ask the sandbox
Don't leave your toys around
– Don't create global objects
Don't talk to strangers
– Don't directly reference other modules
Modules must stay within their own sandboxes
                  No matter how restrictive or uncomfortable it may seem




flickr.com/photos/madaise/3406217980/
Module
 Module                  Module


Module     Sandbox        Module

          Application
             Core


          Base Library
Sandbox




The sandbox ensures a consistent interface
     Modules can rely on the methods to always be there
Module
 Module                  Module


Module     Sandbox        Module

          Application
             Core


          Base Library
Module
 Module                                      Module


Module               Sandbox                   Module




  Modules only know the sandbox
   The rest of the architecture doesn't exist to them
The sandbox also acts like a security guard
Knows 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 I'm allowed...
                if (sandbox.iCanHazCheezburger()){
                    alert("thx u");
                }
           },

           destroy: function(){
               //destructor
           }

      };

});
Sandbox Jobs
Consistency
– Interface must be dependable
Security
– Determine which parts of the framework a module can
  access
Communication
– Translate module requests into core actions
Take the time to design the
 correct sandbox interface
       It can't change later
Module
 Module                  Module


Module     Sandbox        Module

          Application
             Core


          Base Library
Application
                Core


The application core manages modules
               That's it
Application
          Core



aka Application Controller
The application core tells a module when
it 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 modules
Core.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 modules
Core.startAll();
The application core manages
communication between modules




             flickr.com/photos/markhillary/353738538/
TimelineFilter = {
    changeFilter: function(filter){
        Timeline.applyFilter(filter);
    }
};                                        Tight
                                         Coupling
StatusPoster = {
    postStatus: function(status){
        Timeline.post(status);
    }
};                                    Tight
                                     Coupling
Timeline = {
    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 doesn't break the others
No direct access to another module = no breaking should the module disappear
The application core handles errors
Uses 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 more
http://www.slideshare.net/nzakas/enterprise-javascript-error-handling-presentation
Application Core Jobs
Manage module lifecycle
– Tell modules when to start and stop doing their job
Enable inter-module communication
– Allow loose coupling between modules that are related
  to one another
General error handling
– Detect, trap, and report errors in the system
Be extensible
– The first three jobs are not enough!
Why not?
Web applications change
Often in ways that you couldn't possibly anticipate
Plan for extension
flickr.com/photos/pointnshoot/1443575327/




     Anything built for extension can never be
                      obsolete
Extensions augment the capabilities of the core to keep it relevant and useful
Module
  Module                   Module


Module       Sandbox        Module

            Application
Extension                   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 format



Three parts must be in sync for Ajax to work
      Modules shouldn't know anything about any of this
Module
  Module                   Module


Module       Sandbox        Module

            Application
Extension                   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>
Entrypoint
var xhr = new XMLHttpRequest();
xhr.open("get", "/ajax?name=value", true);
                                             Request
xhr.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               Entrypoint

var 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 format



Ajax 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                   Module


Module       Sandbox        Module

            Application
Extension                   Ajax/JSON
               Core


            Base Library
Ajax Extension Jobs
Hide Ajax communication details
– Modules don't need to know any of it
Provide common request interface
– Modules use this interface to specify data to send to
  the server
Provide common response interface
– Modules use this interface to retrieve data from the
  response
Manage server failures
– Modules only care if they got what they wanted or
  not, don't care why
Module
  Module                   Module


Module       Sandbox        Module

            Application
Extension                   Extension
               Core


            Base Library
The base library provides basic functionality
                  Ironic, huh?




                Base Library
flickr.com/photos/kartik_m/2724121901/




 Most applications are too tightly coupled
            to the base library
Developers get upset when they can't touch the base library directly
High-Performance JavaScript, OSCON 2007
             Joseph Smarr, Plaxo, Inc.
Learn more
http://josephsmarr.com/2007/07/25/high-performance-javascript-oscon-2007/
Ideally, only the application core
has any idea what base library is
            being used
Module
 Module                 Module


Module     Sandbox       Module

          Application
             Core


             Dojo
Module
 Module                 Module


Module     Sandbox       Module

          Application
             Core


             YUI
Base Library Jobs
Browser normalization
– Abstract away differences in browsers with common
  interface
General-purpose utilities
–   Parsers/serializers for XML, JSON, etc.
–   Object manipulation
–   DOM manipulation
–   Ajax communication
Provide low-level extensibility
Module
  Module                   Module


Module       Sandbox        Module

            Application
Extension                   Extension
               Core


Extension   Base Library    Extension
Architecture Knowledge
Module
  Module                   Module


Module       Sandbox        Module

            Application
Extension                   Extension
               Core


Extension   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
                          Core


Only 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 exists
They have no knowledge of one another or the rest of the architecture
Module
  Module                     Module


 Module        Sandbox         Module

              Application
Extension                     Extension
                 Core


Extension    Base Library     Extension




No 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 separately
You just need to verify that each is doing it's unique job




                                             flickr.com/photos/misocrazy/151021636/
A scalable JavaScript architecture
allows you to replace any block
without fear of toppling the tower




                flickr.com/photos/aku-ma/2424194422/
Implementations
https://github.com/legalbox/lb_js_scalableApp
http://scaleapp.org
http://tcorral.github.com/Hydra.js/
http://alanlindsay.me/kerneljs/
http://terrifically.org/
http://addyosmani.github.com/aura/
The End
Etcetera
•My blog:        nczonline.net
•Twitter:        @slicknet
•These Slides:   slideshare.net/nzakas

More Related Content

What's hot

Introduction to React JS for beginners
Introduction to React JS for beginners Introduction to React JS for beginners
Introduction to React JS for beginners Varun Raj
 
Basic JavaScript Tutorial
Basic JavaScript TutorialBasic JavaScript Tutorial
Basic JavaScript TutorialDHTMLExtreme
 
Java script final presentation
Java script final presentationJava script final presentation
Java script final presentationAdhoura Academy
 
Real Life Clean Architecture
Real Life Clean ArchitectureReal Life Clean Architecture
Real Life Clean ArchitectureMattia Battiston
 
Introduction into Struts2 jQuery Grid Tags
Introduction into Struts2 jQuery Grid TagsIntroduction into Struts2 jQuery Grid Tags
Introduction into Struts2 jQuery Grid TagsJohannes Geppert
 
Optimizing Alert Monitoring with Oracle Enterprise Manager
Optimizing Alert Monitoring with Oracle Enterprise ManagerOptimizing Alert Monitoring with Oracle Enterprise Manager
Optimizing Alert Monitoring with Oracle Enterprise ManagerDatavail
 
Understanding react hooks
Understanding react hooksUnderstanding react hooks
Understanding react hooksMaulik Shah
 
Grails Simple Login
Grails Simple LoginGrails Simple Login
Grails Simple Loginmoniguna
 
Loosely Coupled Complexity - Unleash the power of your Domain Model with Comm...
Loosely Coupled Complexity - Unleash the power of your Domain Model with Comm...Loosely Coupled Complexity - Unleash the power of your Domain Model with Comm...
Loosely Coupled Complexity - Unleash the power of your Domain Model with Comm...Alberto Brandolini
 
React JS and why it's awesome
React JS and why it's awesomeReact JS and why it's awesome
React JS and why it's awesomeAndrew Hull
 
Developing Rich Clients with the Eclipse 4 Application Platform
Developing Rich Clients with the Eclipse 4 Application PlatformDeveloping Rich Clients with the Eclipse 4 Application Platform
Developing Rich Clients with the Eclipse 4 Application PlatformKai Tödter
 
Domain Driven Design
Domain Driven DesignDomain Driven Design
Domain Driven DesignYoung-Ho Cho
 

What's hot (20)

Javascript
JavascriptJavascript
Javascript
 
HTML5 Canvas
HTML5 CanvasHTML5 Canvas
HTML5 Canvas
 
Introduction to React JS
Introduction to React JSIntroduction to React JS
Introduction to React JS
 
Introduction to React JS for beginners
Introduction to React JS for beginners Introduction to React JS for beginners
Introduction to React JS for beginners
 
Basic JavaScript Tutorial
Basic JavaScript TutorialBasic JavaScript Tutorial
Basic JavaScript Tutorial
 
Java script final presentation
Java script final presentationJava script final presentation
Java script final presentation
 
Real Life Clean Architecture
Real Life Clean ArchitectureReal Life Clean Architecture
Real Life Clean Architecture
 
Introduction into Struts2 jQuery Grid Tags
Introduction into Struts2 jQuery Grid TagsIntroduction into Struts2 jQuery Grid Tags
Introduction into Struts2 jQuery Grid Tags
 
Optimizing Alert Monitoring with Oracle Enterprise Manager
Optimizing Alert Monitoring with Oracle Enterprise ManagerOptimizing Alert Monitoring with Oracle Enterprise Manager
Optimizing Alert Monitoring with Oracle Enterprise Manager
 
Understanding react hooks
Understanding react hooksUnderstanding react hooks
Understanding react hooks
 
JavaScript Promises
JavaScript PromisesJavaScript Promises
JavaScript Promises
 
Webpack slides
Webpack slidesWebpack slides
Webpack slides
 
Grails Simple Login
Grails Simple LoginGrails Simple Login
Grails Simple Login
 
Intro to React
Intro to ReactIntro to React
Intro to React
 
Reactjs
Reactjs Reactjs
Reactjs
 
Loosely Coupled Complexity - Unleash the power of your Domain Model with Comm...
Loosely Coupled Complexity - Unleash the power of your Domain Model with Comm...Loosely Coupled Complexity - Unleash the power of your Domain Model with Comm...
Loosely Coupled Complexity - Unleash the power of your Domain Model with Comm...
 
React JS and why it's awesome
React JS and why it's awesomeReact JS and why it's awesome
React JS and why it's awesome
 
Developing Rich Clients with the Eclipse 4 Application Platform
Developing Rich Clients with the Eclipse 4 Application PlatformDeveloping Rich Clients with the Eclipse 4 Application Platform
Developing Rich Clients with the Eclipse 4 Application Platform
 
Domain Driven Design
Domain Driven DesignDomain Driven Design
Domain Driven Design
 
React hooks
React hooksReact hooks
React hooks
 

Viewers also liked

Scalable JavaScript Application Architecture
Scalable JavaScript Application ArchitectureScalable JavaScript Application Architecture
Scalable JavaScript Application ArchitectureNicholas Zakas
 
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceNicholas Zakas
 
Enterprise JavaScript Error Handling (Ajax Experience 2008)
Enterprise JavaScript Error Handling (Ajax Experience 2008)Enterprise JavaScript Error Handling (Ajax Experience 2008)
Enterprise JavaScript Error Handling (Ajax Experience 2008)Nicholas Zakas
 
Maintainable JavaScript 2012
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012Nicholas Zakas
 
Building a JavaScript Module Framework at Gilt
Building a JavaScript Module Framework at GiltBuilding a JavaScript Module Framework at Gilt
Building a JavaScript Module Framework at GiltEric Shepherd
 
Modeling Patterns for JavaScript Browser-Based Games
Modeling Patterns for JavaScript Browser-Based GamesModeling Patterns for JavaScript Browser-Based Games
Modeling Patterns for JavaScript Browser-Based GamesRay Toal
 
Data Caching Strategies for Oracle Mobile Application Framework
Data Caching Strategies for Oracle Mobile Application FrameworkData Caching Strategies for Oracle Mobile Application Framework
Data Caching Strategies for Oracle Mobile Application Frameworkandrejusb
 
Maintainable JavaScript
Maintainable JavaScriptMaintainable JavaScript
Maintainable JavaScriptNicholas Zakas
 
JavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and PerformanceJavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and PerformanceNicholas Zakas
 
Performance on the Yahoo! Homepage
Performance on the Yahoo! HomepagePerformance on the Yahoo! Homepage
Performance on the Yahoo! HomepageNicholas Zakas
 
Advancing JavaScript with Libraries (Yahoo Tech Talk)
Advancing JavaScript with Libraries (Yahoo Tech Talk)Advancing JavaScript with Libraries (Yahoo Tech Talk)
Advancing JavaScript with Libraries (Yahoo Tech Talk)jeresig
 
Talk at FullStack 2016: Automating documentation on JavaScript projects
Talk at FullStack 2016: Automating documentation on JavaScript projectsTalk at FullStack 2016: Automating documentation on JavaScript projects
Talk at FullStack 2016: Automating documentation on JavaScript projectsMarcos Iglesias
 
Built to Last
Built to LastBuilt to Last
Built to LastDan Lynch
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed BumpsNicholas Zakas
 
WebPagetest Power Users - Velocity 2014
WebPagetest Power Users - Velocity 2014WebPagetest Power Users - Velocity 2014
WebPagetest Power Users - Velocity 2014Patrick Meenan
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Nicholas Zakas
 

Viewers also liked (20)

Scalable JavaScript Application Architecture
Scalable JavaScript Application ArchitectureScalable JavaScript Application Architecture
Scalable JavaScript Application Architecture
 
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
 
Enterprise JavaScript Error Handling (Ajax Experience 2008)
Enterprise JavaScript Error Handling (Ajax Experience 2008)Enterprise JavaScript Error Handling (Ajax Experience 2008)
Enterprise JavaScript Error Handling (Ajax Experience 2008)
 
Maintainable JavaScript 2012
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012
 
Building a JavaScript Module Framework at Gilt
Building a JavaScript Module Framework at GiltBuilding a JavaScript Module Framework at Gilt
Building a JavaScript Module Framework at Gilt
 
Hydra.js modula tu código
Hydra.js modula tu códigoHydra.js modula tu código
Hydra.js modula tu código
 
Modeling Patterns for JavaScript Browser-Based Games
Modeling Patterns for JavaScript Browser-Based GamesModeling Patterns for JavaScript Browser-Based Games
Modeling Patterns for JavaScript Browser-Based Games
 
Data Caching Strategies for Oracle Mobile Application Framework
Data Caching Strategies for Oracle Mobile Application FrameworkData Caching Strategies for Oracle Mobile Application Framework
Data Caching Strategies for Oracle Mobile Application Framework
 
Modular JavaScript
Modular JavaScriptModular JavaScript
Modular JavaScript
 
Grails 2.0 Update
Grails 2.0 UpdateGrails 2.0 Update
Grails 2.0 Update
 
Maintainable JavaScript
Maintainable JavaScriptMaintainable JavaScript
Maintainable JavaScript
 
JavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and PerformanceJavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and Performance
 
The Pointerless Web
The Pointerless WebThe Pointerless Web
The Pointerless Web
 
Performance on the Yahoo! Homepage
Performance on the Yahoo! HomepagePerformance on the Yahoo! Homepage
Performance on the Yahoo! Homepage
 
Advancing JavaScript with Libraries (Yahoo Tech Talk)
Advancing JavaScript with Libraries (Yahoo Tech Talk)Advancing JavaScript with Libraries (Yahoo Tech Talk)
Advancing JavaScript with Libraries (Yahoo Tech Talk)
 
Talk at FullStack 2016: Automating documentation on JavaScript projects
Talk at FullStack 2016: Automating documentation on JavaScript projectsTalk at FullStack 2016: Automating documentation on JavaScript projects
Talk at FullStack 2016: Automating documentation on JavaScript projects
 
Built to Last
Built to LastBuilt to Last
Built to Last
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
 
WebPagetest Power Users - Velocity 2014
WebPagetest Power Users - Velocity 2014WebPagetest Power Users - Velocity 2014
WebPagetest Power Users - Velocity 2014
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 

Similar to Scalable JavaScript Application Architecture 2012

ascitconsultancy-scalable-javascript-application-architecture for ascitconsul...
ascitconsultancy-scalable-javascript-application-architecture for ascitconsul...ascitconsultancy-scalable-javascript-application-architecture for ascitconsul...
ascitconsultancy-scalable-javascript-application-architecture for ascitconsul...Carmor Bass
 
An overview of Scalable Web Application Front-end
An overview of Scalable Web Application Front-endAn overview of Scalable Web Application Front-end
An overview of Scalable Web Application Front-endSaeid Zebardast
 
Modern JavaScript Applications: Design Patterns
Modern JavaScript Applications: Design PatternsModern JavaScript Applications: Design Patterns
Modern JavaScript Applications: Design PatternsVolodymyr Voytyshyn
 
Introduction And Basics of Modules in Drupal 7
Introduction And Basics of Modules in Drupal 7 Introduction And Basics of Modules in Drupal 7
Introduction And Basics of Modules in Drupal 7 Dhinakaran Mani
 
Building modular software with OSGi - Ulf Fildebrandt
Building modular software with OSGi - Ulf FildebrandtBuilding modular software with OSGi - Ulf Fildebrandt
Building modular software with OSGi - Ulf Fildebrandtmfrancis
 
Modules as requirement specifications
Modules as requirement specificationsModules as requirement specifications
Modules as requirement specificationsIBM Rational software
 
Building Scalable JavaScript Apps
Building Scalable JavaScript AppsBuilding Scalable JavaScript Apps
Building Scalable JavaScript AppsGil Fink
 
jquery summit presentation for large scale javascript applications
jquery summit  presentation for large scale javascript applicationsjquery summit  presentation for large scale javascript applications
jquery summit presentation for large scale javascript applicationsDivyanshGupta922023
 
ZF2 Modular Architecture - Taking advantage of it
ZF2 Modular Architecture - Taking advantage of itZF2 Modular Architecture - Taking advantage of it
ZF2 Modular Architecture - Taking advantage of itSteve Maraspin
 
P Training Presentation
P Training PresentationP Training Presentation
P Training PresentationGaurav Tyagi
 
Solid principles, Design Patterns, and Domain Driven Design
Solid principles, Design Patterns, and Domain Driven DesignSolid principles, Design Patterns, and Domain Driven Design
Solid principles, Design Patterns, and Domain Driven DesignIrwansyah Irwansyah
 
Spring Architecture | Advanced Java
Spring Architecture | Advanced JavaSpring Architecture | Advanced Java
Spring Architecture | Advanced JavaVISHAL DONGA
 
Using Dagger in a Clean Architecture project
Using Dagger in a Clean Architecture projectUsing Dagger in a Clean Architecture project
Using Dagger in a Clean Architecture projectFabio Collini
 
Java modulesystem
Java modulesystemJava modulesystem
Java modulesystemMarc Kassis
 
Writing modular java script
Writing modular java scriptWriting modular java script
Writing modular java scriptIT Weekend
 
Developing large scale JavaScript applications
Developing large scale JavaScript applicationsDeveloping large scale JavaScript applications
Developing large scale JavaScript applicationsMilan Korsos
 

Similar to Scalable JavaScript Application Architecture 2012 (20)

ascitconsultancy-scalable-javascript-application-architecture for ascitconsul...
ascitconsultancy-scalable-javascript-application-architecture for ascitconsul...ascitconsultancy-scalable-javascript-application-architecture for ascitconsul...
ascitconsultancy-scalable-javascript-application-architecture for ascitconsul...
 
An overview of Scalable Web Application Front-end
An overview of Scalable Web Application Front-endAn overview of Scalable Web Application Front-end
An overview of Scalable Web Application Front-end
 
Modern JavaScript Applications: Design Patterns
Modern JavaScript Applications: Design PatternsModern JavaScript Applications: Design Patterns
Modern JavaScript Applications: Design Patterns
 
Introduction And Basics of Modules in Drupal 7
Introduction And Basics of Modules in Drupal 7 Introduction And Basics of Modules in Drupal 7
Introduction And Basics of Modules in Drupal 7
 
Building modular software with OSGi - Ulf Fildebrandt
Building modular software with OSGi - Ulf FildebrandtBuilding modular software with OSGi - Ulf Fildebrandt
Building modular software with OSGi - Ulf Fildebrandt
 
Modules as requirement specifications
Modules as requirement specificationsModules as requirement specifications
Modules as requirement specifications
 
JavaScript Module Loaders
JavaScript Module LoadersJavaScript Module Loaders
JavaScript Module Loaders
 
Building Scalable JavaScript Apps
Building Scalable JavaScript AppsBuilding Scalable JavaScript Apps
Building Scalable JavaScript Apps
 
VIKAS.pptx
VIKAS.pptxVIKAS.pptx
VIKAS.pptx
 
jquery summit presentation for large scale javascript applications
jquery summit  presentation for large scale javascript applicationsjquery summit  presentation for large scale javascript applications
jquery summit presentation for large scale javascript applications
 
ZF2 Modular Architecture - Taking advantage of it
ZF2 Modular Architecture - Taking advantage of itZF2 Modular Architecture - Taking advantage of it
ZF2 Modular Architecture - Taking advantage of it
 
P Training Presentation
P Training PresentationP Training Presentation
P Training Presentation
 
Solid principles, Design Patterns, and Domain Driven Design
Solid principles, Design Patterns, and Domain Driven DesignSolid principles, Design Patterns, and Domain Driven Design
Solid principles, Design Patterns, and Domain Driven Design
 
Spring Architecture | Advanced Java
Spring Architecture | Advanced JavaSpring Architecture | Advanced Java
Spring Architecture | Advanced Java
 
Model viewviewmodel2
Model viewviewmodel2Model viewviewmodel2
Model viewviewmodel2
 
Using Dagger in a Clean Architecture project
Using Dagger in a Clean Architecture projectUsing Dagger in a Clean Architecture project
Using Dagger in a Clean Architecture project
 
Java modulesystem
Java modulesystemJava modulesystem
Java modulesystem
 
Sda 8
Sda   8Sda   8
Sda 8
 
Writing modular java script
Writing modular java scriptWriting modular java script
Writing modular java script
 
Developing large scale JavaScript applications
Developing large scale JavaScript applicationsDeveloping large scale JavaScript applications
Developing large scale JavaScript applications
 

More from Nicholas Zakas

Enough with the JavaScript already!
Enough with the JavaScript already!Enough with the JavaScript already!
Enough with the JavaScript already!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)
JavaScript APIs you’ve never heard of (and some you have)Nicholas Zakas
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)Nicholas Zakas
 
Maintainable JavaScript 2011
Maintainable JavaScript 2011Maintainable JavaScript 2011
Maintainable JavaScript 2011Nicholas Zakas
 
High Performance JavaScript 2011
High Performance JavaScript 2011High Performance JavaScript 2011
High Performance JavaScript 2011Nicholas Zakas
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)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)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
 
YUI Test The Next Generation (YUIConf 2010)
YUI Test The Next Generation (YUIConf 2010)YUI Test The Next Generation (YUIConf 2010)
YUI Test The Next Generation (YUIConf 2010)Nicholas Zakas
 
High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)Nicholas Zakas
 
High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010Nicholas Zakas
 
Nicholas' Performance Talk at Google
Nicholas' Performance Talk at GoogleNicholas' Performance Talk at Google
Nicholas' Performance Talk at GoogleNicholas Zakas
 
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010Nicholas Zakas
 
High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010Nicholas Zakas
 
Extreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI CompressorExtreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI CompressorNicholas Zakas
 
Writing Efficient JavaScript
Writing Efficient JavaScriptWriting Efficient JavaScript
Writing Efficient JavaScriptNicholas Zakas
 
Speed Up Your JavaScript
Speed Up Your JavaScriptSpeed Up Your JavaScript
Speed Up Your JavaScriptNicholas Zakas
 
JavaScript Variable Performance
JavaScript Variable PerformanceJavaScript Variable Performance
JavaScript Variable PerformanceNicholas Zakas
 
The New Yahoo! Homepage and YUI 3
The New Yahoo! Homepage and YUI 3The New Yahoo! Homepage and YUI 3
The New Yahoo! Homepage and YUI 3Nicholas Zakas
 
Test Driven Development With YUI Test (Ajax Experience 2008)
Test Driven Development With YUI Test (Ajax Experience 2008)Test Driven Development With YUI Test (Ajax Experience 2008)
Test Driven Development With YUI Test (Ajax Experience 2008)Nicholas Zakas
 

More from Nicholas Zakas (20)

Enough with the JavaScript already!
Enough with the JavaScript already!Enough with the JavaScript already!
Enough with the JavaScript already!
 
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)
JavaScript APIs you’ve never heard of (and some you have)
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
 
Maintainable JavaScript 2011
Maintainable JavaScript 2011Maintainable JavaScript 2011
Maintainable JavaScript 2011
 
High Performance JavaScript 2011
High Performance JavaScript 2011High Performance JavaScript 2011
High Performance JavaScript 2011
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
 
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)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
 
YUI Test The Next Generation (YUIConf 2010)
YUI Test The Next Generation (YUIConf 2010)YUI Test The Next Generation (YUIConf 2010)
YUI Test The Next Generation (YUIConf 2010)
 
High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)
 
High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010
 
Nicholas' Performance Talk at Google
Nicholas' Performance Talk at GoogleNicholas' Performance Talk at Google
Nicholas' Performance Talk at Google
 
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010
 
High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010
 
Responsive interfaces
Responsive interfacesResponsive interfaces
Responsive interfaces
 
Extreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI CompressorExtreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI Compressor
 
Writing Efficient JavaScript
Writing Efficient JavaScriptWriting Efficient JavaScript
Writing Efficient JavaScript
 
Speed Up Your JavaScript
Speed Up Your JavaScriptSpeed Up Your JavaScript
Speed Up Your JavaScript
 
JavaScript Variable Performance
JavaScript Variable PerformanceJavaScript Variable Performance
JavaScript Variable Performance
 
The New Yahoo! Homepage and YUI 3
The New Yahoo! Homepage and YUI 3The New Yahoo! Homepage and YUI 3
The New Yahoo! Homepage and YUI 3
 
Test Driven Development With YUI Test (Ajax Experience 2008)
Test Driven Development With YUI Test (Ajax Experience 2008)Test Driven Development With YUI Test (Ajax Experience 2008)
Test Driven Development With YUI Test (Ajax Experience 2008)
 

Recently uploaded

A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfROWELL MARQUINA
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Mark Simos
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...panagenda
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...Karmanjay Verma
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfAarwolf Industries LLC
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 

Recently uploaded (20)

A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdf
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdf
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 

Scalable JavaScript Application Architecture 2012

  • 1. Scalable JavaScript Application Architecture Nicholas C. Zakas | @slicknet
  • 2. New
  • 3. Model View Controller
  • 5. An application framework is like a playground for your code Provides structure around otherwise unrelated activities flickr.com/photos/osterwalder/152697503/
  • 6. Isn't that what JavaScript libraries do?
  • 7. flickr.com/photos/skistz/398429879/ jQuery YUI Dojo A JavaScript library is like a toolbox You can build any number of things using the tools
  • 8. Application Core Base Library
  • 10. module (n) 1 : a standard or unit of measurement 2 : the size of some one part taken as a unit of measure by which the proportions of an architectural composition are regulated 3 a : any in a series of standardized units for use together: as (1) : a unit of furniture or architecture (2) : an educational unit which covers a single subject or topic b : a usually packaged functional assembly of electronic components for use with other such assemblies 4 : an independently operable unit that is a part of the total structure of a space vehicle 5 a : a subset of an additive group that is also a group under addition b : a mathematical set that is a commutative group under addition and that is closed under multiplication which is distributive from the left or right or both by elements of a ring and for which a(bx) = (ab)x or (xb)a = x(ba) or both where a and b are elements of the ring and x belongs to the set Source: Merriam-Webster Dictionary
  • 11. module (n) 1 : a standard or unit of measurement 2 : the size of some one part taken as a unit of measure by which the proportions of an architectural composition are regulated 3 a : any in a series of standardized units for use together: as (1) : a unit of furniture or architecture (2) : an educational unit which covers a single subject or topic b : a usually packaged functional assembly of electronic components for use with other such assemblies 4 : an independently operable unit that is a part of the total structure of a space vehicle 5 a : a subset of an additive group that is also a group under addition b : a mathematical set that is a commutative group under addition and that is closed under multiplication which is distributive from the left or right or both by elements of a ring and for which a(bx) = (ab)x or (xb)a = x(ba) or both where a and b are elements of the ring and x belongs to the set Source: Merriam-Webster Dictionary
  • 12.
  • 13.
  • 14. How does this apply to web applications?
  • 15. web application module (n) 1 : an independent unit of functionality that is part of the total structure of a web application Source: Me
  • 16.
  • 17. Web application modules consist of HTML + CSS + JavaScript
  • 18. Any single module should be able to live on its own
  • 19. Loose coupling allows you to make changes to one module without affecting the others flickr.com/photos/quinnanya/3575417671/
  • 20. flickr.com/photos/renfield/3414246938/ Each module has its own sandbox An interface with which the module can interact to ensure loose coupling
  • 21. Module Module Module Module Sandbox Module Application Core Base Library
  • 22. Module Module Module Module Sandbox Module Modules have limited knowledge Each module knows about their sandbox and that's it
  • 23. Core.register("module-name", function(sandbox){ return { init: function(){ //constructor }, destroy: function(){ //destructor } }; });
  • 24. Which parts know about the web application being built?
  • 26. 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/
  • 27. What is a module's job?
  • 28. Hello, I'm the weather module. It's my job to tell you the weather.
  • 29. Hello, I'm the stocks module. It's my job to tell you about the stock market.
  • 30. Each module's job is to create a meaningful user experience
  • 31. flickr.com/photos/eljay/2392332379/ The web application is created as a result of all parts doing their job
  • 32. Module Module Module Module Sandbox Module
  • 33. Module Module Module Module Module Modules contain business logic related to the module’s particular job
  • 34. Data Module View Modules manage data and views Though may not have actual objects representing either
  • 35. Data Widget Module View Widget Widget Widgets are reusable pieces of UI They contain no business logic or data
  • 36. Data Menu Module View Tabs Carousel Widgets are reusable pieces of UI They contain no business logic or data
  • 37. Data Module View Menu Data Module Tabs View Carousel Widgets are part of a view toolkit All modules can use widgets within their views
  • 38. Modules can’t do whatever they want to do their job
  • 39. flickr.com/photos/tedsblog/43433812/ Modules are like little kids They need a strict set of rules so they don't get into trouble
  • 40. Module Rules Hands to yourself – Only call your own methods or those on the sandbox – Don't access DOM elements outside of your box – Don't access non-native global objects Ask, don't take – Anything else you need, ask the sandbox Don't leave your toys around – Don't create global objects Don't talk to strangers – Don't directly reference other modules
  • 41. Modules must stay within their own sandboxes No matter how restrictive or uncomfortable it may seem flickr.com/photos/madaise/3406217980/
  • 42. Module Module Module Module Sandbox Module Application Core Base Library
  • 43. Sandbox The sandbox ensures a consistent interface Modules can rely on the methods to always be there
  • 44. Module Module Module Module Sandbox Module Application Core Base Library
  • 45. Module Module Module Module Sandbox Module Modules only know the sandbox The rest of the architecture doesn't exist to them
  • 46. The sandbox also acts like a security guard Knows what the modules are allowed to access and do on the framework flickr.com/photos/heraklit/169566548/
  • 47. Core.register("module-name", function(sandbox){ return { init: function(){ //not sure if I'm allowed... if (sandbox.iCanHazCheezburger()){ alert("thx u"); } }, destroy: function(){ //destructor } }; });
  • 48. Sandbox Jobs Consistency – Interface must be dependable Security – Determine which parts of the framework a module can access Communication – Translate module requests into core actions
  • 49. Take the time to design the correct sandbox interface It can't change later
  • 50. Module Module Module Module Sandbox Module Application Core Base Library
  • 51. Application Core The application core manages modules That's it
  • 52. Application Core aka Application Controller
  • 53. The application core tells a module when it 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 modules Core.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 modules Core.startAll();
  • 57. The application core manages communication between modules flickr.com/photos/markhillary/353738538/
  • 58.
  • 59. TimelineFilter = { changeFilter: function(filter){ Timeline.applyFilter(filter); } }; Tight Coupling StatusPoster = { postStatus: function(status){ Timeline.post(status); } }; Tight Coupling Timeline = { 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 doesn't break the others No direct access to another module = no breaking should the module disappear
  • 63. The application core handles errors Uses 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 – Tell modules when to start and stop doing their job Enable inter-module communication – Allow loose coupling between modules that are related to one another General error handling – Detect, trap, and report errors in the system Be extensible – The first three jobs are not enough!
  • 68. Web applications change Often in ways that you couldn't possibly anticipate
  • 70. flickr.com/photos/pointnshoot/1443575327/ Anything built for extension can never be obsolete Extensions augment the capabilities of the core to keep it relevant and useful
  • 71. Module Module Module Module Sandbox Module Application Extension 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 format Three parts must be in sync for Ajax to work Modules shouldn't know anything about any of this
  • 75. Module Module Module Module Sandbox Module Application Extension 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. Entrypoint var xhr = new XMLHttpRequest(); xhr.open("get", "/ajax?name=value", true); Request xhr.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 Entrypoint var 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 format Ajax 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 Module Module Sandbox Module Application Extension Ajax/JSON Core Base Library
  • 83. Ajax Extension Jobs Hide Ajax communication details – Modules don't need to know any of it Provide common request interface – Modules use this interface to specify data to send to the server Provide common response interface – Modules use this interface to retrieve data from the response Manage server failures – Modules only care if they got what they wanted or not, don't care why
  • 84. Module Module Module Module Sandbox Module Application Extension Extension Core Base Library
  • 85. The base library provides basic functionality Ironic, huh? Base Library
  • 86.
  • 87. flickr.com/photos/kartik_m/2724121901/ Most applications are too tightly coupled to the base library Developers get upset when they can't touch the base library directly
  • 88. High-Performance JavaScript, OSCON 2007 Joseph Smarr, Plaxo, Inc.
  • 90. Ideally, only the application core has any idea what base library is being used
  • 91. Module Module Module Module Sandbox Module Application Core Dojo
  • 92. Module Module Module Module Sandbox Module Application Core YUI
  • 93. Base Library Jobs Browser normalization – Abstract away differences in browsers with common interface General-purpose utilities – Parsers/serializers for XML, JSON, etc. – Object manipulation – DOM manipulation – Ajax communication Provide low-level extensibility
  • 94. Module Module Module Module Sandbox Module Application Extension Extension Core Extension Base Library Extension
  • 96. Module Module Module Module Sandbox Module Application Extension Extension Core Extension Base Library Extension
  • 97. Only the base library knows which browser is being used No other part of the architecture should need to know Base Library
  • 98. 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
  • 99. Sandbox Application Core Only the sandbox knows which application core is being used No other part of the architecture should need to know
  • 100. Module Module Module Module Sandbox Module The modules know nothing except that the sandbox exists They have no knowledge of one another or the rest of the architecture
  • 101. Module Module Module Module Sandbox Module Application Extension Extension Core Extension Base Library Extension No part knows about the web application
  • 103. flickr.com/photos/kgoldendragon613/278240446/ Multiple different applications can be created with the same framework Minimize ramp-up time by reusing existing components
  • 104. Each part can be tested separately You just need to verify that each is doing it's unique job flickr.com/photos/misocrazy/151021636/
  • 105. A scalable JavaScript architecture allows you to replace any block without fear of toppling the tower flickr.com/photos/aku-ma/2424194422/
  • 114. Etcetera •My blog: nczonline.net •Twitter: @slicknet •These Slides: slideshare.net/nzakas

Editor's Notes

  1. Over the past couple of years, we&apos;ve seen JavaScript development earn recognition as a true discipline. The idea that you should architect your code, use patterns and good programming practices has really elevated the role of the front end engineer. In my opinion, part of this elevation has been the adoption of what has traditionally been considered back end methodologies. We now focus on performance and algorithms, there&apos;s unit testing for JavaScript, and so much more. One of the areas that I&apos;ve seen a much slower than adoption that I&apos;d like is in the area of error handling.How many people have an error handling strategy for their backend? How many have dashboards that display problems with uptime and performance? How many have anything similar for the front end?Typically, the front end has been this black hole of information. You may get a few customer reports here and there, but you have no information about what&apos;s going on, how often it&apos;s occurring, or how many people have been affected.
  2. So what have we talked about? Maintainable JavaScript is made up of four components.First is Code Conventions that describe the format of the code you’re writing.Second is Loose Coupling – keeping HTML, JavaScript, and CSS on separate layers and keeping application logic out of event handlers.Third is Programming Practices that ensure your code is readable and easily debugged.Fourth is creating a Build Process