Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Practical Multi-Module
Gulp-Setup
with Angular.JS & TypeScript at
DAB Bank
1. Build Setup
2. 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 manag...
https://www.dab-bank.de/Konto-Kredit/DAB-Finanzmanager-
Demo/
https://www.dab-bank.de/Special/Videos/Video-Finanzmanager.
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
→ ...
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:on...
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...
1. Build Setup
2. 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
-...
Angular.module Best Practices
/app
/applicationContext.js
/modules
/submodule
/submodule-service.js
/submodule-directive.j...
Single Point of Dependency Wiring
/app
applicationContext.js
angular.module(‘de.dab.pfm.app’, [‘de.dab.pfm.dashboard’]);
a...
Usage of Module In File
pieChart
pie-chart-directive.js
angular.module(‘de.dab.shared.pieChart’)
.directive(‘de.dab.shared...
Why separate angular.
module
Registration & Usage ?
Handling cross file dependencies over to angular
→ order does not matt...
Angular.module Graph
https://github.com/lucalanca/grunt-angular-architecture-
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...
Dependency Management
???
→ cross file
???
→ cross module1. 2.
Cross File Dependency Solution
1. Concat
→ cross file dependencies managed by angular.module
2. TypeScript innerModules
mo...
Final Solution to
Dependency Management
1. BuildConfig.js
→ store bower.json “dab-*”deps
devDependencies/dependencies
2. g...
JavaScript Multi Projects
bower.json deps:
dab-subproject-component
dab-common-widget-component
dab-bootstrap-component
cu...
Trash
Advanced
TypeScript & Angular
1. Gulp Multi-Project Build-Setup
2. Code Conventions & Best Practices
Gulp Multi-Project Build-Setup
1. Why another bootstrap?
2. scaffolding vs. composition
3. multi-project development
4. Ty...
Why another bootstrap?
1. Fit to techstack
2. Large scale project
3. Multi-project strategy
4. Being up to date
Scaffolding vs Composition
Problems with scaffolding (Yeoman)
- copy+paste of templates
- opinionated technologies
- missi...
Composition / Inheritance
- glue strategy for projects
- technology agnostic
- update project without merging
- reuse != c...
By Example
1. leading gulpfile
2. customization:
override, extend or integrate
3.
Complexity
RequireJS
- file dependencies
- Issues with testing
- 350 Requests are slow
- at runtime & async
- Angular.modu...
Simplicity
1. Modularize by module
2. Adapt complexity later: http://www.2ality.com/2014/09/es6-
modules-final.html
3. Bow...
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, depende...
Code Conventions & Best Practices
1. constant namespaces
2. direct export
3. controller
a. mycontroller = this.scope;
4. d...
Compiling & TypeScript
Why TypeScript?
- Compilation Imposed by Google
- Sweet Home Java/.Net-Developer
- Refactoring Made...
Multi modularized project setup with gulp, typescript and angular.js
Multi modularized project setup with gulp, typescript and angular.js
Multi modularized project setup with gulp, typescript and angular.js
Multi modularized project setup with gulp, typescript and angular.js
Multi modularized project setup with gulp, typescript and angular.js
Multi modularized project setup with gulp, typescript and angular.js
Multi modularized project setup with gulp, typescript and angular.js
Multi modularized project setup with gulp, typescript and angular.js
Multi modularized project setup with gulp, typescript and angular.js
Multi modularized project setup with gulp, typescript and angular.js
Multi modularized project setup with gulp, typescript and angular.js
Próxima SlideShare
Cargando en…5
×

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

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

  1. 1. Practical Multi-Module Gulp-Setup with Angular.JS & TypeScript at DAB Bank
  2. 2. 1. Build Setup 2. Dependency Management To Be Solved ...
  3. 3. Pursuit of stable quality & efficience - 3 teams - 25 developers - single portal project
  4. 4. Node.js NPM: Build tools for the web - Efficient development - Minification - Optimization - Modularization - Analysis
  5. 5. First Build Setup Approach - grunt.js - organized by feature - functionality by file - missing cross project/ module management
  6. 6. https://www.dab-bank.de/Konto-Kredit/DAB-Finanzmanager- Demo/ https://www.dab-bank.de/Special/Videos/Video-Finanzmanager.
  7. 7. First approach: Build Setup Copy-Paste @Dev: long manual list @Prod: Differs from @Dev
  8. 8. Scaffolding / Templating Problems with existing template projects - opinionated → create your own - copy&paste template → breaks on updates → require merging - missing cross module
  9. 9. DAB Enterprise Build Setup customization by composition - predefine - override - extend - integrate
  10. 10. npm: common-setup-module gulpfile.js + BuildConfig.js + tslint.json, tsd.rc, protractor.conf.js, karma.conf.js
  11. 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. 12. Appplication module myappfolder node_modules - package.json - gulpfile.js - bower.json
  13. 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. 14. 1. Build Setup 2. Dependency Management To be Solved ...
  15. 15. JavaScript IDE Support JsHint Refactoring → by single file Autocompletion
  16. 16. Dependency Management ??? → cross file ??? → cross module1. 2.
  17. 17. Cross File Dependency Management - AMD - Common.Js - ES6 Harmony - angular.modules - Web Components - TypeScript - Bower - None ...
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. Why separate angular. module Registration & Usage ? Handling cross file dependencies over to angular → order does not matter
  22. 22. Angular.module Graph https://github.com/lucalanca/grunt-angular-architecture- http://kyu-project.co/kyu.html
  23. 23. Lab: Results TypeScript: outer modules = Common.js/AMD import angular = require(“./thirdparty/angular.d.ts”);
  24. 24. 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
  25. 25. Dependency Management ??? → cross file ??? → cross module1. 2.
  26. 26. 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[]; }
  27. 27. 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 ???
  28. 28. 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 module bower link 2. Use on local machine bower link mymodule *.d.ts *.ts
  29. 29. Trash
  30. 30. Advanced TypeScript & Angular 1. Gulp Multi-Project Build-Setup 2. Code Conventions & Best Practices
  31. 31. 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
  32. 32. Why another bootstrap? 1. Fit to techstack 2. Large scale project 3. Multi-project strategy 4. Being up to date
  33. 33. 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
  34. 34. Composition / Inheritance - glue strategy for projects - technology agnostic - update project without merging - reuse != copy → customization is the default
  35. 35. By Example 1. leading gulpfile 2. customization: override, extend or integrate 3.
  36. 36. 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
  37. 37. 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
  38. 38. Multi Project Development Problems: 1. Multi project strategy 2. 3. realtime sync
  39. 39. Multi Project Development 1. bower link 2. npm link 3. git versioning vs. searchable/-repository 4. devDependency, dependency strategy
  40. 40. Code Conventions & Best Practices 1. constant namespaces 2. direct export 3. controller a. mycontroller = this.scope; 4. directives a. lambda 5. services
  41. 41. 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

×