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

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

define(dependencyList, callback(dependencies));

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