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
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
78. Deploying to an Amazon EC2 Instance
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?
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