JavaScript build workflow

Lessons learned form JavaScript build process and workflow after working over 1.5 year on project.

Content:
- npm scripts
- npm vs bower
- npm and Jenkins
- Grunt
- Gulp vs Grunt
- Security

Transcript

1. JavaScript build workflow Lessons learned Piotr Lewandowski @constjs
2. npm install npm install ­g bower bower install npm install ­g grunt grunt setup ./gradlew run npm gradle
3. use npm scripts + more control on remote env e.g. Jenkins + all packages can be local { "scripts": { "postinstall": "bower install", "start": "grunt", "release": "grunt build ­­release" } } > npm install > npm start > npm run release
4. do we need bower? + flat directory tree + simple dependency resolution + no big problems actually - the same work as npm - additional tool in stack - no clear future
5. nope. not yet. still missing some front-end packages can I switch to npm?
6. npm goals for 2016 npm for front-end developers 1. Treat git dependencies like registry dependencies. 2. Front-end asset installer. 3. Support the new ECMAScript module system. https://github.com/npm/npm/wiki/Roadmap
7. Don't install libraries with 10 lines of code
8. npm + Jenkins = ? build = 200MB and 25k files* Cache problems Quota Limit of inodes Internet connection *backend and other stuff per job = ~1GB
9. npm install ­­no­optional ­­cache­min=999999 ­­quiet npm + Jenkins = ❤ npm 3 is even better better architecture less files less space npm 2+
10. build
11. we use Grunt 1000+ lines of config file a bit messy ... not only in config file ... regular changes needed
12. clean config an unexpected journey
13. single responsibility one reason to change a file separate list of libraries list of modules encapsulated tasks linters optimizations releases
14. instead of... dashboard: { files: { 'dist/js/dashboard.min.js': [ 'src/modules/dashboard/module.js', '!src/modules/dashboard/route.js' 'src/modules/dashboard/**/*.js' ] } // ... repeat for 40 other modules // ... add new tasks at the end of file
15. create project abstraction var APP_MODULES = [ { module: 'app.modules.monitor', dir: 'monitor', outFile: 'monitor' }, { module: 'app.modules.dashboard', dir: 'dashboard', outFile: 'dashboard' }, { module: 'app.modules.account', dir: 'account', outFile: 'account' } ]; important: project files structure RegEx friendly
16. envoriment variables var properties = { VERSION: version, API: '/* @echo API */', TYPE: '/* @echo TYPE */', REVISION: '/* @echo REVISION */', DATE: '/* @echo DATE */' }; one file! can be Injected anywhere can be unit tested list of all possibilities in one place
17. the same rules as clean code Gandalf approves
18. gulp.task("compile", ["tslint"], () => { return gulp.src("src/**/*.ts") .pipe(sourcemaps.init()) .pipe(tsc(tsProject)).js .pipe(ngAnnotate()) .pipe(sourcemaps.write(".")) .pipe(gulp.dest("build")); }); Gulp > Grunt for more complex apps + simple API + code over configuration + easily separated for many files
19. separated front-end ... you're gonna have a bad time + less team communication required + easier setup for front-end devs - synchronization problem - security
20. single page app = different security
21. serve app from back-end resources if your app is the only client of your API
22. End Of File Thanks