JavaScript build workflow

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

B48000922680b510078188df438184dd?s=128

Piotr Lewandowski

March 25, 2016
Tweet

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