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
   

   View Slide

2. npm install
   npm install ­g bower
   bower install
   npm install ­g grunt
   grunt
   setup
   ./gradlew run
   npm gradle
   

   View Slide

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
   

   View Slide

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
   

   View Slide

5. nope. not yet.
   still missing some front-end packages
   can I switch to npm?
   

   View Slide

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
   

   View Slide

7. Don't install libraries
   with
   10 lines of code
   

   View Slide

8. npm + Jenkins = ?
   build = 200MB and 25k files*
   Cache problems
   Quota
   Limit of inodes
   Internet connection
   *backend and other stuff per job = ~1GB
   

   View Slide

9. npm install ­­no­optional
   ­­cache­min=999999 ­­quiet
   npm + Jenkins = ❤
   npm 3 is even better
   better architecture
   less files
   less space
   npm 2+
   

   View Slide

10. build
    

    View Slide

11. we use Grunt
    1000+ lines of config file
    a bit messy
    ... not only in config file
    ... regular changes needed
    

    View Slide

12. clean config
    an unexpected journey
    

    View Slide

13. single responsibility
    one reason to change a file
    separate
    list of libraries
    list of modules
    encapsulated tasks
    linters
    optimizations
    releases
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

17. the same rules as clean code
    Gandalf approves
    

    View Slide

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
    

    View Slide

19. separated front-end
    ... you're gonna have a bad time
    + less team communication required
    + easier setup for front-end devs
    - synchronization problem
    - security
    

    View Slide

20. single page app
    =
    different security
    

    View Slide

21. serve app from back-end
    resources
    if your app is the only client
    of your API
    

    View Slide

22. End Of File
    Thanks
    

    View Slide