Download as PDF, PPTX
![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()));
});](https://image.slidesharecdn.com/gulpmultiprojectenterprisetemplate-141204063035-conversion-gate01/75/Multi-modularized-project-setup-with-gulp-typescript-and-angular-js-11-2048.jpg)
![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](https://image.slidesharecdn.com/gulpmultiprojectenterprisetemplate-141204063035-conversion-gate01/75/Multi-modularized-project-setup-with-gulp-typescript-and-angular-js-19-2048.jpg)
![Cross File Dependency Solution
1. Concat
→ cross file dependencies managed by angular.module
2. TypeScript innerModules
module de.dab.myproject{
import MyType = de.dab.IMyType;
}
IMytype.d.ts
declare module de.dab {
interface IMyType {
id: string;
accounts : IAccount[];
}](https://image.slidesharecdn.com/gulpmultiprojectenterprisetemplate-141204063035-conversion-gate01/75/Multi-modularized-project-setup-with-gulp-typescript-and-angular-js-26-2048.jpg)
![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()));
});](https://crownmelresort.com/image.slidesharecdn.com/gulpmultiprojectenterprisetemplate-141204063035-conversion-gate01/75/Multi-modularized-project-setup-with-gulp-typescript-and-angular-js-11-2048.jpg)
![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](https://crownmelresort.com/image.slidesharecdn.com/gulpmultiprojectenterprisetemplate-141204063035-conversion-gate01/75/Multi-modularized-project-setup-with-gulp-typescript-and-angular-js-19-2048.jpg)
![Cross File Dependency Solution
1. Concat
→ cross file dependencies managed by angular.module
2. TypeScript innerModules
module de.dab.myproject{
import MyType = de.dab.IMyType;
}
IMytype.d.ts
declare module de.dab {
interface IMyType {
id: string;
accounts : IAccount[];
}](https://crownmelresort.com/image.slidesharecdn.com/gulpmultiprojectenterprisetemplate-141204063035-conversion-gate01/75/Multi-modularized-project-setup-with-gulp-typescript-and-angular-js-26-2048.jpg)
Uploaded byDavid Amend
Multi modularized project setup with gulp, typescript and angular.js
The document discusses setting up a multi-module build process for an Angular and TypeScript application with Gulp at DAB Bank. It describes challenges with their initial Grunt-based approach and outlines their new Gulp-based solution using a common setup module to define shared build tasks and provide a base configuration. It also covers managing dependencies between files and modules through Angular's module system and TypeScript's module syntax.
More Related Content
Similar to Multi modularized project setup with gulp, typescript and angular.js
Multi modularized project setup with gulp, typescript and angular.js
- 1. Practical Multi-Module Gulp-Setup with Angular.JS& TypeScript at DAB Bank
- 2. 1. Build Setup 2.Dependency Management To Be Solved ...
- 3. Pursuit of stable quality& efficience - 3 teams - 25 developers - single portal project
- 4. Node.js NPM: Build toolsfor the web - Efficient development - Minification - Optimization - Modularization - Analysis
- 5. First Build SetupApproach - grunt.js - organized by feature - functionality by file - missing cross project/ module management
- 6.
- 7. First approach: BuildSetup Copy-Paste @Dev: long manual list @Prod: Differs from @Dev
- 8. Scaffolding / Templating Problemswith existing template projects - opinionated → create your own - copy&paste template → breaks on updates → require merging - missing cross module
- 9. DAB Enterprise BuildSetup customization by composition - predefine - override - extend - integrate
- 10. npm: common-setup-module gulpfile.js +BuildConfig.js + tslint.json, tsd.rc, protractor.conf.js, karma.conf.js
- 11. 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())); });
- 12. Appplication module myappfolder node_modules - package.json -gulpfile.js - bower.json
- 13. 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(){ ...}
- 14. 1. Build Setup 2.Dependency Management To be Solved ...
- 15. JavaScript IDE Support JsHintRefactoring → by single file Autocompletion
- 16. Dependency Management ??? → cross file ??? →cross module1. 2.
- 17. Cross File DependencyManagement - AMD - Common.Js - ES6 Harmony - angular.modules - Web Components - TypeScript - Bower - None ...
- 18. Angular.module Best Practices /app /applicationContext.js /modules /submodule /submodule-service.js /submodule-directive.js /submodule-controller.jsMiško Hevery Inspired By 1. 2. Module Creation & Referencing Module Retrieval & Chargement
- 19. Single Point ofDependency 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
- 20. Usage of ModuleIn 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
- 21. Why separate angular. module Registration& Usage ? Handling cross file dependencies over to angular → order does not matter
- 22.
- 23. Lab: Results TypeScript: outermodules = Common.js/AMD import angular = require(“./thirdparty/angular.d.ts”);
- 24. Lab: TS: outermodules (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
- 25. Dependency Management ??? → crossfile ??? → cross module1. 2.
- 26. Cross File DependencySolution 1. Concat → cross file dependencies managed by angular.module 2. TypeScript innerModules module de.dab.myproject{ import MyType = de.dab.IMyType; } IMytype.d.ts declare module de.dab { interface IMyType { id: string; accounts : IAccount[]; }
- 27. Final Solution to DependencyManagement 1. BuildConfig.js → store bower.json “dab-*”deps devDependencies/dependencies 2. gulpfile.js → use list of deps in tasks Bower ???
- 28. JavaScript Multi Projects bower.jsondeps: 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 module bower link 2. Use on local machine bower link mymodule *.d.ts *.ts
- 30.
- 31. Advanced TypeScript & Angular 1.Gulp Multi-Project Build-Setup 2. Code Conventions & Best Practices
- 32. Gulp Multi-Project Build-Setup 1.Why another bootstrap? 2. scaffolding vs. composition 3. multi-project development 4. TypeScript strategy a. tsd b. devDependency, dependency strategy i. no </// references ii. separate in .d.ts => performance c. Java → .d.ts generator d. TsLint
- 33. Why another bootstrap? 1.Fit to techstack 2. Large scale project 3. Multi-project strategy 4. Being up to date
- 34. Scaffolding vs Composition Problemswith scaffolding (Yeoman) - copy+paste of templates - opinionated technologies - missing common glue - hard to find matching techstack - breaks on updates - merge operations → convention > customization
- 35. Composition / Inheritance -glue strategy for projects - technology agnostic - update project without merging - reuse != copy → customization is the default
- 36. By Example 1. leadinggulpfile 2. customization: override, extend or integrate 3.
- 37. 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
- 38. Simplicity 1. Modularize bymodule 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
- 39. Multi Project Development Problems: 1.Multi project strategy 2. 3. realtime sync
- 40. Multi Project Development 1.bower link 2. npm link 3. git versioning vs. searchable/-repository 4. devDependency, dependency strategy
- 41. Code Conventions &Best Practices 1. constant namespaces 2. direct export 3. controller a. mycontroller = this.scope; 4. directives a. lambda 5. services
- 43. Compiling & TypeScript WhyTypeScript? - Compilation Imposed by Google - Sweet Home Java/.Net-Developer - Refactoring Made Easy - Models Management - Future-Proof Syntax, Angular 2.0, … - Choice of TypeScriptifying