Front End Ops Tooling

Front End Ops Tooling

This talk covers build tooling, processes, and your development workflow. You’ll get a glimpse as to why you should be building, and why you should put together a build process from the get-go. Then we’ll move on to tooling. Here I’ll discuss some of the most popular JavaScript build tools, namely Grunt, Gulp, and npm.

We’ll investigate how each one performs for certain tasks, and I’ll help you forge your own build sword. Lastly, I’ll discuss the benefits of going for the module format Node.js uses, which is Common.js, and how you can leverage those modules in the browser, using a tool called Browserify.

550d0153dbeee2fcaede98f906e55d02?s=128

Nicolás Bevacqua

May 28, 2014
Tweet

Transcript

  1. Front End Ops Tooling A #BUILDFIRST APPROACH

  2. Hello! I’m Nico nzgb

  3. Hello! I’m Nico nzgb bevacqua

  4. Hello! I’m Nico blog.ponyfoo.com nzgb bevacqua

  5. bevacqua.io/bf Processes

  6. bevacqua.io/bf Processes Modularity

  7. bevacqua.io/bf Processes Modularity Testing

  8. bevacqua.io/bf Processes Modularity Testing 100+ samples!

  9. jsconf14bf bevacqua.io/bf 45% off!

  10. Why? Topics

  11. Why? Flow Topics

  12. How? Topics

  13. How? Tools Topics

  14. What? Topics

  15. What? Tasks Topics

  16. And..? Topics

  17. And..? Modularity! Topics

  18. And..? Modularity! in the browser!! Topics

  19. Why Build?

  20. Why Build First?

  21. Because Process

  22. Because Process Productivity

  23. Because Process Productivity Performance

  24. Process Automation

  25. Process Automation: Eliminates repetitive work

  26. Process Automation: Eliminates repetitive work Reduces Human Error bevacqua.io/knight

  27. Process Automation: Eliminates repetitive work Reduces Human Error bevacqua.io/knight Reduces

    Human Error bevacqua.io/knight
  28. Process Automation: Eliminates repetitive work Reduces Human Error bevacqua.io/knight Reduces

    Human Error bevacqua.io/knight Eliminates repetitive work
  29. Automation.

  30. Automation is Productivity

  31. Automation is Productivity

  32. Automation is Productivity Continuous Development

  33. Automation is Productivity Continuous Development Integration Continuous

  34. Automation is Productivity Continuous Development Integration Deployments Continuous Continuous

  35. Performance Compiling

  36. Performance Bundling Compiling

  37. Performance Bundling Minifying Compiling

  38. Performance Bundling Minifying Spriting Compiling

  39. Performance Bundling Minifying Spriting Asset Hashing Compiling

  40. Performance Faster Response Times Bundling Minifying Spriting Asset Hashing Compiling

  41. Performance Happier Humans Faster Response Times Bundling Minifying Spriting Asset

    Hashing Compiling
  42. Which Tools??

  43. make

  44. make

  45. make

  46. make

  47. make

  48. make

  49. Burden of Choice make

  50. Burden of Choice make

  51. Burden of Choice make

  52. Burden of Choice make

  53. Burden of Choice make

  54. Burden of Choice make

  55. Burden of Choice make

  56. Burden of Choice make

  57. Gulp, Grunt, Whatever Choose your own adventure

  58. Gulp, Grunt, Whatever Choose your own adventure Tooling

  59. Featuring Grunt Tooling

  60. bevacqua.io/bf/tooling Tooling ✔ Configuration Driven

  61. bevacqua.io/bf/tooling Tooling ✔ Configuration Driven ✔ Easy to configure

  62. bevacqua.io/bf/tooling Tooling ✔ Configuration Driven ✔ Easy to configure ✔

    Thousands of Plugins
  63. bevacqua.io/bf/tooling Tooling ✔ Configuration Driven ✔ Easy to configure ✔

    Thousands of Plugins ✔ It’s just JavaScript
  64. bevacqua.io/bf/tooling Tooling ✔ Configuration Driven ✔ Easy to configure ✔

    Thousands of Plugins ✔ It’s just JavaScript ✖ Long flows get too verbose
  65. bevacqua.io/bf/tooling Tooling ✔ Configuration Driven ✔ Easy to configure ✔

    Thousands of Plugins ✔ It’s just JavaScript ✖ Long flows get too verbose ✖ Not so fast
  66. Installing Grunt Tooling

  67. bevacqua.io/bf/tooling npm init

  68. bevacqua.io/bf/tooling npm init npm install grunt-cli -g

  69. bevacqua.io/bf/tooling npm init npm install grunt-cli -g npm install grunt

    -D
  70. Turning icons into a Sprite Sheet

  71. module.exports = function (grunt) { grunt.initConfig({ sprite: { icons: {

    src: 'img/icons/*.png', destImg: 'img/icons.png', destCSS: 'css/icons.css' } } }); ! grunt.loadNpmTasks('grunt-spritesmith'); };
  72. module.exports = function (grunt) { grunt.initConfig({ sprite: { icons: {

    src: 'img/icons/*.png', destImg: 'img/icons.png', destCSS: 'css/icons.css' } } }); ! grunt.loadNpmTasks('grunt-spritesmith'); };
  73. module.exports = function (grunt) { grunt.initConfig({ sprite: { icons: {

    src: 'img/icons/*.png', destImg: 'img/icons.png', destCSS: 'css/icons.css' } } }); ! grunt.loadNpmTasks('grunt-spritesmith'); };
  74. module.exports = function (grunt) { grunt.initConfig({ sprite: { icons: {

    src: 'img/icons/*.png', destImg: 'img/icons.png', destCSS: 'css/icons.css' } } }); ! grunt.loadNpmTasks('grunt-spritesmith'); };
  75. module.exports = function (grunt) { grunt.initConfig({ sprite: { icons: {

    src: 'img/icons/*.png', destImg: 'img/icons.png', destCSS: 'css/icons.css' } } }); ! grunt.loadNpmTasks('grunt-spritesmith'); };
  76. module.exports = function (grunt) { grunt.initConfig({ sprite: { icons: {

    src: 'img/icons/*.png', destImg: 'img/icons.png', destCSS: 'css/icons.css' } } }); ! grunt.loadNpmTasks('grunt-spritesmith'); }; grunt sprite
  77. None
  78. Deploying to an Amazon EC2 Instance

  79. None
  80. None
  81. Featuring Gulp Tooling

  82. bevacqua.io/bf/tooling ✔ Code Driven

  83. bevacqua.io/bf/tooling ✔ Code Driven ✔ leaner than Grunt

  84. bevacqua.io/bf/tooling ✔ Code Driven ✔ leaner than Grunt ✔ Hundreds

    of Plugins
  85. bevacqua.io/bf/tooling ✔ Code Driven ✔ leaner than Grunt ✔ Hundreds

    of Plugins ✔ It’s just JavaScript
  86. bevacqua.io/bf/tooling ✔ Code Driven ✔ leaner than Grunt ✔ Hundreds

    of Plugins ✔ It’s just JavaScript ✖ Streams, Pipes, Async
  87. bevacqua.io/bf/tooling ✔ Code Driven ✔ leaner than Grunt ✔ Hundreds

    of Plugins ✔ It’s just JavaScript ✖ Streams, Pipes, Async ✔ Faster than Grunt
  88. Installing Gulp Tooling

  89. bevacqua.io/bf/tooling npm init npm install gulp -g npm install gulp

    -D
  90. Building with Gulp Tooling

  91. var gulp = require('gulp'); var uglify = require('gulp-uglify'); var size

    = require('gulp-size'); var header = require('gulp-header'); var pkg = require('./package.json'); var head = '// <%= p.name %>@v<%= p.version %>\n'; ! gulp.task('build', function () { gulp.src('./js/entry.js') .pipe(uglify()) .pipe(header(head, { p: pkg })) .pipe(size()) .pipe(gulp.dest('./dist')); });
  92. var gulp = require('gulp'); var uglify = require('gulp-uglify'); var size

    = require('gulp-size'); var header = require('gulp-header'); var pkg = require('./package.json'); var head = '// <%= p.name %>@v<%= p.version %>\n'; ! gulp.task('build', function () { gulp.src('./js/contra.js') .pipe(uglify()) .pipe(header(head, { p: pkg })) .pipe(size()) .pipe(gulp.dest('./dist')); });
  93. var gulp = require('gulp'); var uglify = require('gulp-uglify'); var size

    = require('gulp-size'); var header = require('gulp-header'); var pkg = require('./package.json'); var head = '// <%= p.name %>@v<%= p.version %>\n'; ! gulp.task('build', function () { gulp.src('./js/contra.js') .pipe(uglify()) .pipe(header(head, { p: pkg })) .pipe(size()) .pipe(gulp.dest('./dist')); });
  94. var gulp = require('gulp'); var uglify = require('gulp-uglify'); var size

    = require('gulp-size'); var header = require('gulp-header'); var pkg = require('./package.json'); var head = '// <%= p.name %>@v<%= p.version %>\n'; ! gulp.task('build', function () { gulp.src('./js/contra.js') .pipe(uglify()) .pipe(header(head, { p: pkg })) .pipe(size()) .pipe(gulp.dest('./dist')); });
  95. var gulp = require('gulp'); var uglify = require('gulp-uglify'); var size

    = require('gulp-size'); var header = require('gulp-header'); var pkg = require('./package.json'); var head = '// <%= p.name %>@v<%= p.version %>\n'; ! gulp.task('build', function () { gulp.src('./js/contra.js') .pipe(uglify()) .pipe(header(head, { p: pkg })) .pipe(size()) .pipe(gulp.dest('./dist')); }); gulp build
  96. Featuring npm Tooling

  97. bevacqua.io/bf/tooling Tooling ✔ Script Driven RUN

  98. bevacqua.io/bf/tooling Tooling ✔ Script Driven ✔ Barely any configuration RUN

  99. bevacqua.io/bf/tooling Tooling ✔ Script Driven ✔ Barely any configuration ✔

    Use any npm package RUN
  100. bevacqua.io/bf/tooling Tooling ✔ Script Driven ✔ Barely any configuration ✔

    Use any npm package ✔ It can be just JavaScript RUN
  101. bevacqua.io/bf/tooling Tooling ✔ Script Driven ✔ Barely any configuration ✔

    Use any npm package ✔ It can be just JavaScript ✖ Bash isn’t so cross-platform RUN
  102. bevacqua.io/bf/tooling Tooling ✔ Script Driven ✔ Barely any configuration ✔

    Use any npm package ✔ It can be just JavaScript ✖ Bash isn’t so cross-platform ✔ Fastest RUN
  103. Installing npm run

  104. Installing npm run

  105. bevacqua.io/bf/tooling RUN npm init

  106. bevacqua.io/bf/tooling RUN npm init { "scripts": { "lint": "jshint .",

    "test": "tape test/*" } }
  107. bevacqua.io/bf/tooling RUN npm init { "scripts": { "lint": "jshint .",

    "test": "tape test/*" } } npm run lint
  108. It doesn’t matter which tool you use.

  109. It doesn’t matter which tool you use.

  110. Use whatever does the job.

  111. Use whatever works for you.

  112. One last thing…

  113. Modularity

  114. Modularity

  115. Modularity in the browser?

  116. None
  117. None
  118. None
  119. What’s ? ✔ Modular. Each file is a module.

  120. What’s ? ✔ Modular. Each file is a module. ✔

    Modules have an implicit local scope.
  121. What’s ? ✔ Modular. Each file is a module. ✔

    Modules have an implicit local scope. ✔ Modules can expose an API.
  122. What’s ? ✔ Modular. Each file is a module. ✔

    Modules have an implicit local scope. ✔ Modules can expose an API. ✔ Modules can require other modules.
  123. What’s ? ✔ Modular. Each file is a module. ✔

    Modules have an implicit local scope. ✔ Modules can expose an API. ✔ Modules can require other modules. ✔ Module loading is synchronous.
  124. Sample ~/js/pony.js var status = ‘happy’; ! module.exports = {

    setStatus: function (val) { status = val; }, printStatus: function () { console.log(status); } };
  125. Sample ~/js/pony.js ~/js/foo.js var status = ‘happy’; ! module.exports =

    { setStatus: function (val) { status = val; }, printStatus: function () { console.log(status); } }; var pony = require(‘./pony’); ! pony.setStatus(‘furious’); pony.printStatus();
  126. Sample ~/js/pony.js ~/js/foo.js var status = ‘happy’; ! module.exports =

    { setStatus: function (val) { status = val; }, printStatus: function () { console.log(status); } }; var pony = require(‘./pony’); ! pony.setStatus(‘furious’); pony.printStatus(); node foo
  127. Sample ~/js/pony.js ~/js/foo.js var status = ‘happy’; ! module.exports =

    { setStatus: function (val) { status = val; }, printStatus: function () { console.log(status); } }; var pony = require(‘./pony’); ! pony.setStatus(‘furious’); pony.printStatus(); node foo
  128. Browserify Enter

  129. Browserify ✔ Inlines require calls.

  130. Browserify ✔ Inlines require calls. ✔ ports Node-core modules to

    browser.
  131. Browserify ✔ Inlines require calls. ✔ ports Node-core modules to

    browser. ✔ Non-Commonjs modules can be shimmed.
  132. Browserify ✔ Inlines require calls. ✔ ports Node-core modules to

    browser. ✔ Non-Commonjs modules can be shimmed. ✔ Access to all of npm.
  133. Browserify ✔ Inlines require calls. ✔ ports Node-core modules to

    browser. ✔ Non-Commonjs modules can be shimmed. ✔ Access to all of npm. ✔ Generates source maps.
  134. Browserify ✔ Inlines require calls. ✔ ports Node-core modules to

    browser. ✔ Non-Commonjs modules can be shimmed. ✔ Access to all of npm. ✔ Generates source maps. ✔ Build step, can be automated away.
  135. Browserify { "scripts": { "build": "browserify main.js > browser.js" }

    }
  136. Browserify { "scripts": { "build": "browserify main.js > browser.js" }

    } npm run build
  137. Browserify { "scripts": { "build": "browserify main.js > browser.js" }

    } npm run build
  138. Recap

  139. Recap Build First, not “later”

  140. Recap Build First, not “later” Make tools work for you

  141. Recap Build First, not “later” Make tools work for you

    Browserify all the things
  142. such thanks nzgb bevacqua

  143. nzgb many questions? bevacqua such thanks