I originally presented on AMD in October 2012 at eBags (http://www.ebags.com) to the entire development team. This Slideshare was my preparation. Within the slides, you will notice a yellow star on some bullet points. During my AMD presentation, these yellow stars were my signal to switch over to Visual Studio, where I had prepared code samples that illustrate each point. In my presentation I used SmartJs to illustrate each of these yellow stars. SmartJs is a wonderful companion to this Slideshare, and can be viewed on my Github repository: https://github.com/hughanderson4/smartjs

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