Click here to load reader
Upload
hugh-anderson
View
967
Download
1
Embed Size (px)
DESCRIPTION
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
Citation preview
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