Asynchronous Module Definition (AMD) used for Dependency Injection (DI) and MVVM

Dependency Injection (DI)
           Model View ViewModel (MVVM)
                        AMD Build Scripts
               Unit Testing AMD Modules

4/1/2013                                    1
     Break Js into independent modules
        Single Responsibility Principle (SRP)
        Each Js file is a Module
        Modules loaded Asynchronously, only as
           needed
     Control and limit the Global scope
        Each module has its own scope inside its
         own function
        Module’s only access to the outside world is
         through its Dependencies


4/1/2013                                                2
     How to bootstrap an AMD page
        Main module file roots all module paths*
        Require will figure out how to sequence
           dependencies
     How to reference one module from another
        Use the path relative to the main Js module*
        Don’t use .js extension
     Aliasing modules via config
        Place for libs to get named
        Alias eases integration concerns for versioned
           libs*

4/1/2013                                                  3
     require()
        require(moduleName, callback(module));*
        this dynamically loads a module
     define()
        define(dependencyList, callback(dependencies));
        this defines a module
        dependencyList is an array of paths of other
         dependent modules
        Callback receives dependency references as
         parameters in the same order defined in the list*
        From callback(), return an object or function or
         nothing – this is the module “API” or Interface*
        Module’s body function is only executed once


4/1/2013                                                     4
     Dependencies are injected into Module’s
      function as parameters
        Same order they were listed
           define(dependencyList, callback(dependencies));


     dependencyList is just an Array of string
        Each dependency in list will be loaded, but
         doesn’t necessarily need to be
         used/referenced
        Paths are relative to main Js file referenced
         by the Html

4/1/2013                                                     5
     Js-Private
        Variables & Functions inside a Module’s function
         body that are not part of the returned interface*
        Feel free to name things whatever! It won’t
         overwrite the Global scope*
     Js-Public/Interface
        Variables & Functions that are part of the
           Module callback’s returned structure*
     Module’s return type can be:
        Object – static instance shared by all*
        Function – constructor or other functionality*
        Nothing – module has no Public API*


4/1/2013                                                     6
 Familiar Mocking concept
 Stub out a module’s dependencies*
 Jasmine Unit Testing Framework is
  demonstrated*




4/1/2013                              7
     Module is a “ViewModel” that is bound to the UI with
      Knockout*
     Properties of the ViewModel have 2 way binding to
      elements on the page
        ViewModel properties correspond to View’d UI constructs*
        Use a Knockout binding handler to do processing at bind-
           time*
     Page events are bound to ViewModel functions
        ViewModel functions correspond to UI actions or events*
     Subelements can be bound, just like a User Control
        ViewModel can be composed with other ViewModels*
        Using Knockout’s template binding or with binding to re-
           use View code and specify a binding context*



4/1/2013                                                            8
 r.js, a part of Require.js, uses NodeJs to
  run as a command-line-app
 Input file: JSON commands for compiler*
 Builds demonstrated:
        Build a whole site’s Html and Css
        Build all site Js into one combined Js
        Build all site Js into one combined and minified
         Js
        Droid build – defines a variable as part of the
         build

4/1/2013                                                    9
     SmartJs
        https://github.com/hughanderson4/smartjs
     RequireJs
        http://requirejs.org/
     RequireJs optimizer (r.js)
        http://requirejs.org/docs/optimization.html
     jQuery Mobile
        http://jquerymobile.com/
     Jasmine
        http://pivotal.github.com/jasmine/


4/1/2013                                               10
Conclusion: AMD is awesome




4/1/2013                         11
1 of 11

Recommended

RequireJS by
RequireJSRequireJS
RequireJSTim Doherty
6.1K views43 slides
Managing JavaScript Dependencies With RequireJS by
Managing JavaScript Dependencies With RequireJSManaging JavaScript Dependencies With RequireJS
Managing JavaScript Dependencies With RequireJSDen Odell
4.3K views31 slides
Requirejs by
RequirejsRequirejs
RequirejsJason Lotito
1.2K views72 slides
Modularize JavaScript with RequireJS by
Modularize JavaScript with RequireJSModularize JavaScript with RequireJS
Modularize JavaScript with RequireJSMinh Hoang
4K views38 slides
JavaScript Modules in Practice by
JavaScript Modules in PracticeJavaScript Modules in Practice
JavaScript Modules in PracticeMaghdebura
1.4K views25 slides
Requirejs by
RequirejsRequirejs
Requirejssioked
3.4K views16 slides

More Related Content

What's hot

CommonJS Everywhere (Wakanday 2011) by
CommonJS Everywhere (Wakanday 2011)CommonJS Everywhere (Wakanday 2011)
CommonJS Everywhere (Wakanday 2011)cadorn
3.3K views161 slides
Require js by
Require jsRequire js
Require jsNirbhay Kundan
1.1K views18 slides
Browserify by
BrowserifyBrowserify
Browserifydavidchubbs
1.6K views14 slides
Introduction to require js by
Introduction to require jsIntroduction to require js
Introduction to require jsAhmed Elharouny
597 views10 slides
Require JS by
Require JSRequire JS
Require JSImaginea
2.1K views10 slides
AngularJS - Architecture decisions in a large project  by
AngularJS - Architecture decisionsin a large project AngularJS - Architecture decisionsin a large project 
AngularJS - Architecture decisions in a large project Elad Hirsch
3.5K views71 slides

What's hot(20)

CommonJS Everywhere (Wakanday 2011) by cadorn
CommonJS Everywhere (Wakanday 2011)CommonJS Everywhere (Wakanday 2011)
CommonJS Everywhere (Wakanday 2011)
cadorn3.3K views
Require JS by Imaginea
Require JSRequire JS
Require JS
Imaginea2.1K views
AngularJS - Architecture decisions in a large project  by Elad Hirsch
AngularJS - Architecture decisionsin a large project AngularJS - Architecture decisionsin a large project 
AngularJS - Architecture decisions in a large project 
Elad Hirsch3.5K views
Javascript ui for rest services by Ioan Eugen Stan
Javascript ui for rest servicesJavascript ui for rest services
Javascript ui for rest services
Ioan Eugen Stan3.1K views
uRequire@greecejs: An introduction to http://uRequire.org by Agelos Pikoulas
uRequire@greecejs: An introduction to http://uRequire.orguRequire@greecejs: An introduction to http://uRequire.org
uRequire@greecejs: An introduction to http://uRequire.org
Agelos Pikoulas15.8K views
Angularjs architecture by Michael He
Angularjs architectureAngularjs architecture
Angularjs architecture
Michael He999 views
Design & Development of Web Applications using SpringMVC by Naresh Chintalcheru
Design & Development of Web Applications using SpringMVC Design & Development of Web Applications using SpringMVC
Design & Development of Web Applications using SpringMVC
Naresh Chintalcheru12.8K views
Modern Web Application Development Workflow - EclipseCon Europe 2014 by Stéphane Bégaudeau
Modern Web Application Development Workflow - EclipseCon Europe 2014Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014
Karlsruher Entwicklertag 2013 - Webanwendungen mit AngularJS by Philipp Burgmer
Karlsruher Entwicklertag 2013 - Webanwendungen mit AngularJSKarlsruher Entwicklertag 2013 - Webanwendungen mit AngularJS
Karlsruher Entwicklertag 2013 - Webanwendungen mit AngularJS
Philipp Burgmer983 views
Using RequireJS for Modular JavaScript Code by Thomas Lundström
Using RequireJS for Modular JavaScript CodeUsing RequireJS for Modular JavaScript Code
Using RequireJS for Modular JavaScript Code
Thomas Lundström4.1K views
Integrating Browserify with Sprockets by Spike Brehm
Integrating Browserify with SprocketsIntegrating Browserify with Sprockets
Integrating Browserify with Sprockets
Spike Brehm1.8K views
Spring framework 3.2 > 4.0 — themes and trends by Arawn Park
Spring framework 3.2 > 4.0 — themes and trendsSpring framework 3.2 > 4.0 — themes and trends
Spring framework 3.2 > 4.0 — themes and trends
Arawn Park8.1K views

Similar to Asynchronous Module Definition (AMD) used for Dependency Injection (DI) and MVVM

Modules all the way down: OSGi and the Java Platform Module System by
Modules all the way down: OSGi and the Java Platform Module SystemModules all the way down: OSGi and the Java Platform Module System
Modules all the way down: OSGi and the Java Platform Module SystemTim Ellison
1.2K views18 slides
Spring core module by
Spring core moduleSpring core module
Spring core moduleRaj Tomar
1.4K views108 slides
As7 jbug j_boss_modules_yang yong by
As7 jbug j_boss_modules_yang yongAs7 jbug j_boss_modules_yang yong
As7 jbug j_boss_modules_yang yongjbossug
462 views18 slides
Require.JS by
Require.JSRequire.JS
Require.JSIvano Malavolta
2.5K views18 slides
Java 9 Module System by
Java 9 Module SystemJava 9 Module System
Java 9 Module SystemHasan Ünal
500 views42 slides
Backbone beyond jQuery by
Backbone beyond jQueryBackbone beyond jQuery
Backbone beyond jQueryAdam Krebs
258 views16 slides

Similar to Asynchronous Module Definition (AMD) used for Dependency Injection (DI) and MVVM(20)

Modules all the way down: OSGi and the Java Platform Module System by Tim Ellison
Modules all the way down: OSGi and the Java Platform Module SystemModules all the way down: OSGi and the Java Platform Module System
Modules all the way down: OSGi and the Java Platform Module System
Tim Ellison1.2K views
Spring core module by Raj Tomar
Spring core moduleSpring core module
Spring core module
Raj Tomar1.4K views
As7 jbug j_boss_modules_yang yong by jbossug
As7 jbug j_boss_modules_yang yongAs7 jbug j_boss_modules_yang yong
As7 jbug j_boss_modules_yang yong
jbossug462 views
Java 9 Module System by Hasan Ünal
Java 9 Module SystemJava 9 Module System
Java 9 Module System
Hasan Ünal500 views
Backbone beyond jQuery by Adam Krebs
Backbone beyond jQueryBackbone beyond jQuery
Backbone beyond jQuery
Adam Krebs258 views
Spring Architecture | Advanced Java by VISHAL DONGA
Spring Architecture | Advanced JavaSpring Architecture | Advanced Java
Spring Architecture | Advanced Java
VISHAL DONGA469 views
Scalable JavaScript Application Architecture 2012 by Nicholas Zakas
Scalable JavaScript Application Architecture 2012Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012
Nicholas Zakas94K views
Hints and Tips for Modularizing Existing Enterprise Applications with OSGi - ... by mfrancis
Hints and Tips for Modularizing Existing Enterprise Applications with OSGi - ...Hints and Tips for Modularizing Existing Enterprise Applications with OSGi - ...
Hints and Tips for Modularizing Existing Enterprise Applications with OSGi - ...
mfrancis812 views
Hints and Tips for Modularizing Existing Enterprise Applications (OSGi Commun... by Graham Charters
Hints and Tips for Modularizing Existing Enterprise Applications (OSGi Commun...Hints and Tips for Modularizing Existing Enterprise Applications (OSGi Commun...
Hints and Tips for Modularizing Existing Enterprise Applications (OSGi Commun...
Graham Charters900 views
Java modulesystem by Marc Kassis
Java modulesystemJava modulesystem
Java modulesystem
Marc Kassis250 views
Introduction to Spring Framework and Spring IoC by Funnelll
Introduction to Spring Framework and Spring IoCIntroduction to Spring Framework and Spring IoC
Introduction to Spring Framework and Spring IoC
Funnelll2.1K views
OSGi in Action Chapter 1 and 2 by pjhInovex
OSGi in Action Chapter 1 and 2OSGi in Action Chapter 1 and 2
OSGi in Action Chapter 1 and 2
pjhInovex687 views
스프링 프레임워크 by Yoonki Chang
스프링 프레임워크스프링 프레임워크
스프링 프레임워크
Yoonki Chang1.3K views

Recently uploaded

Info Session November 2023.pdf by
Info Session November 2023.pdfInfo Session November 2023.pdf
Info Session November 2023.pdfAleksandraKoprivica4
13 views15 slides
Vertical User Stories by
Vertical User StoriesVertical User Stories
Vertical User StoriesMoisés Armani Ramírez
14 views16 slides
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N... by
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...James Anderson
92 views32 slides
PRODUCT LISTING.pptx by
PRODUCT LISTING.pptxPRODUCT LISTING.pptx
PRODUCT LISTING.pptxangelicacueva6
14 views1 slide
The Forbidden VPN Secrets.pdf by
The Forbidden VPN Secrets.pdfThe Forbidden VPN Secrets.pdf
The Forbidden VPN Secrets.pdfMariam Shaba
20 views72 slides
Zero to Automated in Under a Year by
Zero to Automated in Under a YearZero to Automated in Under a Year
Zero to Automated in Under a YearNetwork Automation Forum
15 views23 slides

Recently uploaded(20)

GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N... by James Anderson
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
James Anderson92 views
The Forbidden VPN Secrets.pdf by Mariam Shaba
The Forbidden VPN Secrets.pdfThe Forbidden VPN Secrets.pdf
The Forbidden VPN Secrets.pdf
Mariam Shaba20 views
"Running students' code in isolation. The hard way", Yurii Holiuk by Fwdays
"Running students' code in isolation. The hard way", Yurii Holiuk "Running students' code in isolation. The hard way", Yurii Holiuk
"Running students' code in isolation. The hard way", Yurii Holiuk
Fwdays17 views
TouchLog: Finger Micro Gesture Recognition Using Photo-Reflective Sensors by sugiuralab
TouchLog: Finger Micro Gesture Recognition  Using Photo-Reflective SensorsTouchLog: Finger Micro Gesture Recognition  Using Photo-Reflective Sensors
TouchLog: Finger Micro Gesture Recognition Using Photo-Reflective Sensors
sugiuralab21 views
Igniting Next Level Productivity with AI-Infused Data Integration Workflows by Safe Software
Igniting Next Level Productivity with AI-Infused Data Integration Workflows Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Safe Software280 views
Business Analyst Series 2023 - Week 3 Session 5 by DianaGray10
Business Analyst Series 2023 -  Week 3 Session 5Business Analyst Series 2023 -  Week 3 Session 5
Business Analyst Series 2023 - Week 3 Session 5
DianaGray10300 views
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive by Network Automation Forum
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveAutomating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive
SAP Automation Using Bar Code and FIORI.pdf by Virendra Rai, PMP
SAP Automation Using Bar Code and FIORI.pdfSAP Automation Using Bar Code and FIORI.pdf
SAP Automation Using Bar Code and FIORI.pdf
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f... by TrustArc
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc11 views
STPI OctaNE CoE Brochure.pdf by madhurjyapb
STPI OctaNE CoE Brochure.pdfSTPI OctaNE CoE Brochure.pdf
STPI OctaNE CoE Brochure.pdf
madhurjyapb14 views

Asynchronous Module Definition (AMD) used for Dependency Injection (DI) and MVVM

  • 1. Dependency Injection (DI) Model View ViewModel (MVVM) AMD Build Scripts Unit Testing AMD Modules 4/1/2013 1
  • 2. Break Js into independent modules  Single Responsibility Principle (SRP)  Each Js file is a Module  Modules loaded Asynchronously, only as needed  Control and limit the Global scope  Each module has its own scope inside its own function  Module’s only access to the outside world is through its Dependencies 4/1/2013 2
  • 3. How to bootstrap an AMD page  Main module file roots all module paths*  Require will figure out how to sequence dependencies  How to reference one module from another  Use the path relative to the main Js module*  Don’t use .js extension  Aliasing modules via config  Place for libs to get named  Alias eases integration concerns for versioned libs* 4/1/2013 3
  • 4. require()  require(moduleName, callback(module));*  this dynamically loads a module  define()  define(dependencyList, callback(dependencies));  this defines a module  dependencyList is an array of paths of other dependent modules  Callback receives dependency references as parameters in the same order defined in the list*  From callback(), return an object or function or nothing – this is the module “API” or Interface*  Module’s body function is only executed once 4/1/2013 4
  • 5. Dependencies are injected into Module’s function as parameters  Same order they were listed define(dependencyList, callback(dependencies));  dependencyList is just an Array of string  Each dependency in list will be loaded, but doesn’t necessarily need to be used/referenced  Paths are relative to main Js file referenced by the Html 4/1/2013 5
  • 6. Js-Private  Variables & Functions inside a Module’s function body that are not part of the returned interface*  Feel free to name things whatever! It won’t overwrite the Global scope*  Js-Public/Interface  Variables & Functions that are part of the Module callback’s returned structure*  Module’s return type can be:  Object – static instance shared by all*  Function – constructor or other functionality*  Nothing – module has no Public API* 4/1/2013 6
  • 7.  Familiar Mocking concept  Stub out a module’s dependencies*  Jasmine Unit Testing Framework is demonstrated* 4/1/2013 7
  • 8. Module is a “ViewModel” that is bound to the UI with Knockout*  Properties of the ViewModel have 2 way binding to elements on the page  ViewModel properties correspond to View’d UI constructs*  Use a Knockout binding handler to do processing at bind- time*  Page events are bound to ViewModel functions  ViewModel functions correspond to UI actions or events*  Subelements can be bound, just like a User Control  ViewModel can be composed with other ViewModels*  Using Knockout’s template binding or with binding to re- use View code and specify a binding context* 4/1/2013 8
  • 9.  r.js, a part of Require.js, uses NodeJs to run as a command-line-app  Input file: JSON commands for compiler*  Builds demonstrated:  Build a whole site’s Html and Css  Build all site Js into one combined Js  Build all site Js into one combined and minified Js  Droid build – defines a variable as part of the build 4/1/2013 9
  • 10. SmartJs  https://github.com/hughanderson4/smartjs  RequireJs  http://requirejs.org/  RequireJs optimizer (r.js)  http://requirejs.org/docs/optimization.html  jQuery Mobile  http://jquerymobile.com/  Jasmine  http://pivotal.github.com/jasmine/ 4/1/2013 10
  • 11. Conclusion: AMD is awesome 4/1/2013 11