Asynchronous Module Definition (AMD) used for Dependency Injection (DI) and MVVM
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 938 views

I originally presented on AMD in October 2012 at eBags (http://www.ebags.com) to the entire development team. This Slideshare was my preparation. ...

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

Statistics

Views

Total Views
938
Slideshare-icon Views on SlideShare
938
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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