Evgeny Dmitriev, Frontend-developer (Ciklum, Minsk) Presentation topic: «Dependency Injection Pattern in JavaScript» Evgeny will focus on the following aspects of the topic: Service Locator vs DI or how to organize entities interaction? Angular DI, what we have what to expect?

1. DI IN JSCreatedbyEugenyDmitriev

3. MAY THE BROWSER BE WITH YOU.
document.addEventListener("DOMContentLoaded", brewCappuccino);
Framework can provide higher abstraction
$routeProvider.when('/, {
templateUrl: 'home.html',
controller: 'HomeCappucinoController'
});

4. PFFF, I ALREADY HAVE MODULES.
var Milk = require('milk'),
CoffeeBeans = require('coffee‐beans'),
Sugar = require('sugar'),
Wager = require('water');
function CappuccinoFactory() {
this.milk = new Milk({fat: ’skim’});
this.beans = new CoffeeBeans({from: ‘Africa’});
this.sugar = new Sugar({type: ‘granulated’});
this.water = new Water();
}
CappuccinoFactory.prototype.brew = function brewOneCup() {
var brewedCoffee = this.water.add(this.beans.roast()).brew()
var foamFoam = this.milk.add(this.sugar).heat().blend();
brewedCoffee.add(milkFoam);
}

5. A BIT LIGHTER PATH WITH SERVICE LOCATOR.
var injector = require('app').injector;
function CappuccinoFactory(injector) {
this.milkFoam = injector.get(‘milkFoam’);
this.brewedCoffee = injector.get(‘brewedCoffee’);
}
CappuccinoFactory.prototype.brew = function brewOneCup() {
brewedCoffee.add(milkFoam);
}

6. “DON'T CALL US, WE'LL CALL YOU”
function CappuccinoFactory(brewedCoffee, milkFoam) {
this.milkFoam = milkFoam;
this.brewedCoffee = brewedCoffee;
}
CappuccinoFactory.prototype.brew = function brewOneCup() {
brewedCoffee.add(milkFoam);
}
var BrewedCoffee = require('brewed‐coffee'),
MilkFoam = require('milk‐foam');
CappuccinoFactory.prototype.inject = [BrewedCoffee, MilkFoam];

7. ANGULAR STYLE
Register bootstrap callback
Find ['ng-app']
// All modules are registered including dependency per each module
doBootstrap(){ createInjector(listModules, strictDi) }
// Instances dependency graph
// s1
// / |
// / s2
// / / |
// /s3 < s4 > s5
// //
// s6

8. SYNAX
// inferred (only works if code not minified/obfuscated)
$injector.invoke(function(serviceA){});
// annotated
function explicit(serviceA) {};
explicit.$inject = ['serviceA'];
$injector.invoke(explicit);
// inline
$injector.invoke(['serviceA', function(serviceA){}]);

9. AUTOMATION
npm install ‐g ng‐annotate
// @ngInject
function Foo($scope) {}
function Foo($scope) {}
Foo.$inject = ["$scope"];
x = /*@ngInject*/ function($scope) {};
=>
x = ["$scope", function($scope) {}];
npm i grunt‐ng‐annotate ‐‐save‐dev
npm i gulp‐ng‐annotate
npm i browserify‐ngannotate
npm i ng‐annotate‐loader

10. TOMORROW COMES TODAY OR ES777
// app.ats is an ATScript draft, maybe already deprecated in favor of typescript
class MyApp {
server:Server;
@Bind('name') name:string;
@Event('foo') fooFn:Function;
@Inject()
constructor(@parent server:Server) {}
greet():string {}
}

11. WANNA TRY?

12. ES6 BY DEFAULT
// customer‐detail.es6
import {HttpClient} from 'aurelia‐http‐client';
export class CustomerDetail{
static inject() { return [HttpClient]; }
constructor(http){
this.http = http;
}
}
Even smaller in typescript
// customer‐detail.ts
import {HttpClient} from 'aurelia‐http‐client';
export class CustomerDetail{
constructor(http:HttpClient){
this.http = http;
}
}

13. DI CONTAINER FEATURES
// Lazy injection
import {Lazy} from 'aurelia‐framework';
import {HttpClient} from 'aurelia‐http‐client';
export class CustomerDetail{
static inject() { return [Lazy.of(HttpClient)]; }
constructor(getHTTP){
this.getHTTP = getHTTP;
}
sendRequest(config) {
getHTTP(http => {
http.get('api/config', config)
})
}
}

14. DI CONTAINER FEATURES
// All injection returns all initialized workers
import {Optional} from 'aurelia‐framework';
import {Outsider} from 'outsiders';
export class CustomerDetail{
static inject() { return [Optional.of(Outsider)]; }
constructor(outsiders){
this.outsiders = outsiders || 'no outsiders initialized';
}
}

15. DI CONTAINER FEATURES
// Parent
import {Parent} from 'aurelia‐framework';
import {Router} from 'aurelia‐router';
export class CustomerDetail{
static inject() { return [Parent.of(Router)]; }
constructor(router){
this.router = router;
}
}

16. DI CONTAINER FEATURES
// All injection returns all initialized workers
import {All} from 'aurelia‐framework';
import {Worker} from 'workers';
export class CustomerDetail{
static inject() { return [All.of(Worker)]; }
constructor(workers){
this.workers = workers;
}
}

17. DI REGISTRATION FEATURES
// default registration is singleton
import {Metadata} from 'aurelia‐framework';
import {Woker} from 'workers';
export class CustomerDetail{
static metadata(){ return Metadata.transient(); }
static inject() { return [Worker]; }
constructor(worker){
this.newWorker = worker;
}
}

18. UNIT TESTING
describe('User permissions service specification', function () {
var userServiceMock;
beforeEach(module('myApp', function ($provide) {
userServiceMock = {
getUserDetails: jasmine.createSpy()
};
$provide.value('userService', userServiceMock);
}));
describe('hasAdminAccess method', function () {
it('should return true when user details has property: admin === true',
inject(function (permissionService) {
userServiceMock.getUserDetails.andReturn({admin: true});
expect(permissionService.hasAdminAccess('anAdminUser')).toBe(true);
}));
});
});

19. NG-IMPROVED-TESTING
describe('User permissions service specification', function() {
beforeEach(ModuleBuilder.forModules('myApp')
.serviceWithMocksFor('permissionService', 'userService')
.build());
describe('hasAdminAccess method', function() {
it('should return true when user details has property: admin == true',
inject(function(permissionService, userServiceMock) {
userServiceMock.getUserDetails.andReturn({admin: true});
expect(permissionService.hasAdminAccess('anAdminUser')).toBe(true);
}));
});
});
bower install ng‐improved‐testing ‐‐save‐dev

20. THE END
BY EUGENY DMITRIEV