Multi modularized project setup with gulp, typescript and angular.js

Practical Multi-Module

Gulp-Setup

with Angular.JS & TypeScript at DAB Bank

1. Build Setup2. Dependency Management

To Be Solved ...

Pursuit of stable

quality & efficience

- 3 teams- 25 developers- single portal project

Node.js NPM: Build tools for the web

- Efficient development- Minification- Optimization- Modularization- Analysis

First Build Setup Approach

- grunt.js- organized by feature- functionality by file- missing cross project/

module management

https://www.dab-bank.de/Konto-Kredit/DAB-Finanzmanager-Demo/https://www.dab-bank.de/Special/Videos/Video-Finanzmanager.xhtml

First approach: Build Setup

Copy-Paste@Dev: long manual list

@Prod: Differs from @Dev

Scaffolding / Templating

Problems with existing template projects

- opinionated→ create your own

- copy&paste template→ breaks on updates → require merging

- missing cross module

DAB Enterprise Build Setup

customization by composition

- predefine

- override

- extend

- integrate

npm: common-setup-module

gulpfile.js + BuildConfig.js

+ tslint.json, tsd.rc, protractor.conf.js, karma.conf.js

common-setup-module gulpfile

module.exports = function ( gulp, CONFIG) {

gulp.task("default", ["dev"]);

gulp.task("prod:once", ["prod"]);

gulp.task("prod", ["prod:tscompile", "templates"]);

gulp.task("dev", ["dev:once", "webserver", "watch"]);

…

gulp.task("js-app", function () {

gulp.src(CONFIG.SRC.TS.FILES())

.pipe(partials.errorPipe())

.pipe(plugins.concat( CONFIG.DIST.JS.FILES.APP()))

.pipe(gulp.dest( CONFIG.DIST.JS.FOLDER()));

});

Appplication module

myappfolder

node_modules

- package.json- gulpfile.js- bower.json

Composition: Gulpfile.json

var gulp = require("gulp");

var CONFIG= require('./node_modules/common-setup-module/BuildConfig');

var gulpInit = require("./node_modules/common-setup-module/gulpfile");

CONFIG.SRC.JS.FILES = “customSRC/**.js” ;

var gulpInstanceToOverride = gulpInit(gulp, CONFIG);

gulpInstanceToOverride.task("js-app", function(){

console.log("was overridden");

});

gulpInstanceToOverride.task(“someNewTask”, function(){ ...}

1. Build Setup2. Dependency Management

To be Solved ...

JavaScript IDE Support

JsHint Refactoring

→ by single file

Autocompletion

Dependency

Management

???→ cross file

???→ cross module1. 2.

Cross File Dependency Management

- AMD

- Common.Js

- ES6 Harmony

- angular.modules

- Web Components

- TypeScript

- Bower

- None

...

Angular.module Best Practices

/app

/applicationContext.js

/modules

/submodule

/submodule-service.js

/submodule-directive.js

/submodule-controller.js Miško Hevery

Inspired By

1.

2.

Module Creation & Referencing

Module Retrieval & Chargement

Single Point of Dependency Wiring

/app

applicationContext.js

angular.module(‘de.dab.pfm.app’, [‘de.dab.pfm.dashboard’]);

angular.module(‘de.dab.pfm.dashboard’, [‘de.dab.pfm.dashboard.header’]);

angular.module(‘de.dab.pfm.dashboard.header’, [‘de.dab.pfm.dashboard.intro’,‘de.dab.shared.pieChart‘]);

angular.module(‘de.dab.pfm.dashboard.intro’, [‘...’]);

angular.module(‘de.dab.shared.pieChart’, [‘...’]);

Registration

Usage of Module In File

pieChart

pie-chart-directive.js

angular.module(‘de.dab.shared.pieChart’).directive(‘de.dab.shared.pieChartService’, ...);

pie-chart-service.js

angular.module(‘de.dab.shared.pieChart’).service(‘de.dab.shared.pieChartService’, ...) pie-chart-model.js

pie-chart.tpl.html

Getter

Why separate angular.module

Registration & Usage ?

Handling cross file dependencies over to angular

→ order does not matter

Angular.module Graph

https://github.com/lucalanca/grunt-angular-architecture-graph

http://kyu-project.co/kyu.html

Lab: Results

TypeScript: outer modules= Common.js/AMD

import angular = require(“./thirdparty/angular.d.ts”);

Lab: TS: outer modules (Common.js/AMD)

→ no difference to angular.module

→ aync needed in AMD ?

→ define file dependencies: anyway app.min.js file deployed

Evidence, same graph with: https://github.com/auchenberg/dependo

Dependency Management

???→ cross file

???→ cross module1. 2.

Cross File Dependency Solution

1. Concat→ cross file dependencies managed by angular.module

2. TypeScript innerModulesmodule de.dab.myproject{ import MyType = de.dab.IMyType;}

IMytype.d.ts declare module de.dab {

interface IMyType {

id: string;

accounts : IAccount[];

}

Final Solution to

Dependency Management

1. BuildConfig.js

→ store bower.json “dab-*”deps devDependencies/dependencies

2. gulpfile.js

→ use list of deps in tasks

Bower

???

JavaScript Multi Projects

bower.json deps:

dab-subproject-component

dab-common-widget-component

dab-bootstrap-component

current module

gulpfile.js

concat/TypeScript: common.js, app.js,

templates.js, libs.js webserver: target/main.css

bower dependency

bower devDependency

1. Register local modulebower link

2. Use on local machinebower link mymodule

*.d.ts

*.ts

Trash

Advanced TypeScript & Angular

1. Gulp Multi-Project Build-Setup

2. Code Conventions & Best Practices

Gulp Multi-Project Build-Setup1. Why another bootstrap?

2. scaffolding vs. composition3. multi-project development4. TypeScript strategy

a. tsdb. devDependency, dependency strategy

i. no </// referencesii. separate in .d.ts => performance

c. Java → .d.ts generatord. TsLint

Why another bootstrap?

1. Fit to techstack2. Large scale project3. Multi-project strategy4. Being up to date

Scaffolding vs Composition

Problems with scaffolding (Yeoman)

- copy+paste of templates- opinionated technologies

- missing common glue- hard to find matching techstack

- breaks on updates - merge operations

→ convention > customization

Composition / Inheritance

- glue strategy for projects- technology agnostic- update project without merging- reuse != copy

→ customization is the default

By Example

1. leading gulpfile2. customization:

override, extend or integrate3.

Complexity

RequireJS

- file dependencies- Issues with testing- 350 Requests are slow- at runtime & async- Angular.modules vs. modularization

→ will be one file at prod, anyway

→ which files to deliver in which package?

→ versioning

Simplicity

1. Modularize by module

2. Adapt complexity later: http://www.2ality.com/2014/09/es6-

modules-final.html

3. Bower: not supporting multi versioning

4. be similar to production, only dev & prod mode

angular overmind

Multi Project Development

Problems:

1. Multi project strategy

2.3. realtime sync

Multi Project Development

1. bower link

2. npm link

3. git versioning vs. searchable/-repository

4. devDependency, dependency strategy

Code Conventions & Best Practices

1. constant namespaces

2. direct export3. controller

a. mycontroller = this.scope;4. directives

a. lambda5. services

Compiling & TypeScript

Why TypeScript?

- Compilation Imposed by Google- Sweet Home Java/.Net-Developer- Refactoring Made Easy- Models Management- Future-Proof Syntax, Angular

2.0, …- Choice of TypeScriptifying