SlideShare una empresa de Scribd logo
1 de 114
Descargar para leer sin conexión
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
Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012
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
Scalable JavaScript Application Architecture 2012
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/
Scalable JavaScript Application Architecture 2012
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
Scalable JavaScript Application Architecture 2012
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

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Express JS
Express JSExpress JS
Express JS
 
Node.js
Node.jsNode.js
Node.js
 
Technologies sur angular.pptx
Technologies sur angular.pptxTechnologies sur angular.pptx
Technologies sur angular.pptx
 
Vue JS Intro
Vue JS IntroVue JS Intro
Vue JS Intro
 
Build RESTful API Using Express JS
Build RESTful API Using Express JSBuild RESTful API Using Express JS
Build RESTful API Using Express JS
 
Node.js Basics
Node.js Basics Node.js Basics
Node.js Basics
 
Developing New Widgets for your Views in Owl
Developing New Widgets for your Views in OwlDeveloping New Widgets for your Views in Owl
Developing New Widgets for your Views in Owl
 
Node.js Express
Node.js  ExpressNode.js  Express
Node.js Express
 
Introduction to Spring Boot
Introduction to Spring BootIntroduction to Spring Boot
Introduction to Spring Boot
 
Angular 9
Angular 9 Angular 9
Angular 9
 
Java Spring
Java SpringJava Spring
Java Spring
 
Introduction to Spring Boot!
Introduction to Spring Boot!Introduction to Spring Boot!
Introduction to Spring Boot!
 
Node js Introduction
Node js IntroductionNode js Introduction
Node js Introduction
 
AngularJS Internal
AngularJS InternalAngularJS Internal
AngularJS Internal
 
Nodejs presentation
Nodejs presentationNodejs presentation
Nodejs presentation
 
Sharing Data Between Angular Components
Sharing Data Between Angular ComponentsSharing Data Between Angular Components
Sharing Data Between Angular Components
 
Vue, vue router, vuex
Vue, vue router, vuexVue, vue router, vuex
Vue, vue router, vuex
 
Clean architecture
Clean architectureClean architecture
Clean architecture
 
Spring Boot
Spring BootSpring Boot
Spring Boot
 
Mongoose and MongoDB 101
Mongoose and MongoDB 101Mongoose and MongoDB 101
Mongoose and MongoDB 101
 

Destacado

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
 
Building Large Scale Javascript Application
Building Large Scale Javascript ApplicationBuilding Large Scale Javascript Application
Building Large Scale Javascript ApplicationAnis Ahmad
 

Destacado (20)

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)
 
Building Large Scale Javascript Application
Building Large Scale Javascript ApplicationBuilding Large Scale Javascript Application
Building Large Scale Javascript Application
 

Similar a 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 a 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
 

Más de 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
 

Más de 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)
 

Último

ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 

Último (20)

ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 

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
  • 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
  • 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/
  • 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
  • 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

Notas del editor

  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