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.

Transcript

1. Front End
   Ops Tooling
   A #BUILDFIRST APPROACH
   

   View Slide

2. Hello! I’m Nico
   nzgb
   

   View Slide

3. Hello! I’m Nico
   nzgb
   bevacqua
   

   View Slide

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

   View Slide

5. bevacqua.io/bf
   Processes
   

   View Slide

6. bevacqua.io/bf
   Processes
   Modularity
   

   View Slide

7. bevacqua.io/bf
   Processes
   Modularity
   Testing
   

   View Slide

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

   View Slide

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

   View Slide

10. Why?
    Topics
    

    View Slide

11. Why? Flow
    Topics
    

    View Slide

12. How?
    Topics
    

    View Slide

13. How? Tools
    Topics
    

    View Slide

14. What?
    Topics
    

    View Slide

15. What? Tasks
    Topics
    

    View Slide

16. And..?
    Topics
    

    View Slide

17. And..? Modularity!
    Topics
    

    View Slide

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

    View Slide

19. Why
    Build?
    

    View Slide

20. Why
    Build
    First?
    

    View Slide

21. Because Process
    

    View Slide

22. Because Process
    Productivity
    

    View Slide

23. Because Process
    Productivity
    Performance
    

    View Slide

24. Process
    Automation
    

    View Slide

25. Process
    Automation:
    Eliminates repetitive work
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. Automation.
    

    View Slide

30. Automation is
    Productivity
    

    View Slide

31. Automation is
    Productivity
    

    View Slide

32. Automation is
    Productivity
    Continuous Development
    

    View Slide

33. Automation is
    Productivity
    Continuous Development
    Integration
    Continuous
    

    View Slide

34. Automation is
    Productivity
    Continuous Development
    Integration
    Deployments
    Continuous
    Continuous
    

    View Slide

35. Performance
    Compiling
    

    View Slide

36. Performance
    Bundling
    Compiling
    

    View Slide

37. Performance
    Bundling Minifying
    Compiling
    

    View Slide

38. Performance
    Bundling Minifying
    Spriting
    Compiling
    

    View Slide

39. Performance
    Bundling Minifying
    Spriting Asset Hashing
    Compiling
    

    View Slide

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

    View Slide

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

    View Slide

42. Which
    Tools??
    

    View Slide

43. make
    

    View Slide

44. make
    

    View Slide

45. make
    

    View Slide

46. make
    

    View Slide

47. make
    

    View Slide

48. make
    

    View Slide

49. Burden of Choice
    make
    

    View Slide

50. Burden of Choice
    make
    

    View Slide

51. Burden of Choice
    make
    

    View Slide

52. Burden of Choice
    make
    

    View Slide

53. Burden of Choice
    make
    

    View Slide

54. Burden of Choice
    make
    

    View Slide

55. Burden of Choice
    make
    

    View Slide

56. Burden of Choice
    make
    

    View Slide

57. Gulp, Grunt, Whatever
    Choose
    your own
    adventure
    

    View Slide

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

    View Slide

59. Featuring
    Grunt
    Tooling
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

66. Installing
    Grunt
    Tooling
    

    View Slide

67. bevacqua.io/bf/tooling
    npm init
    

    View Slide

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

    View Slide

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

    View Slide

70. Turning icons
    into a
    Sprite Sheet
    

    View Slide

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');
    };
    

    View Slide

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');
    };
    

    View Slide

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');
    };
    

    View Slide

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');
    };
    

    View Slide

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');
    };
    

    View Slide

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
    

    View Slide

77. View Slide

78. Deploying to an
    Amazon EC2
    Instance
    

    View Slide

79. View Slide

80. View Slide

81. Featuring
    Gulp
    Tooling
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

88. Installing
    Gulp
    Tooling
    

    View Slide

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

    View Slide

90. Building with
    Gulp
    Tooling
    

    View Slide

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'));
    });
    

    View Slide

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'));
    });
    

    View Slide

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'));
    });
    

    View Slide

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'));
    });
    

    View Slide

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
    

    View Slide

96. Featuring
    npm
    Tooling
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

     View Slide

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
     

     View Slide

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
     

     View Slide

103. Installing
     npm run
     

     View Slide

104. Installing
     npm run
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

110. Use whatever
     does the job.
     

     View Slide

111. Use whatever
     works for you.
     

     View Slide

112. One last
     thing…
     

     View Slide

113. Modularity
     

     View Slide

114. Modularity
     

     View Slide

115. Modularity
     in the browser?
     

     View Slide

116. View Slide

117. View Slide

118. View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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.
     

     View Slide

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.
     

     View Slide

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

     View Slide

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();
     

     View Slide

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
     

     View Slide

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
     

     View Slide

128. Browserify
     Enter
     

     View Slide

129. Browserify
     ✔ Inlines require calls.
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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.
     

     View Slide

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.
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

138. Recap
     

     View Slide

139. Recap
     Build First, not “later”
     

     View Slide

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

     View Slide

141. Recap
     Build First, not “later”
     Make tools work for you
     Browserify all the things
     

     View Slide

142. such thanks
     nzgb bevacqua
     

     View Slide

143. nzgb
     many questions?
     bevacqua
     such thanks
     

     View Slide