1.
Dependency Injection (DI) Model View ViewModel (MVVM) AMD Build Scripts Unit Testing AMD Modules4/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 Dependencies4/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 once4/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 Html4/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 build4/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 awesome4/1/2013 11