Slide 1

Slide 1 text

Front End Ops Tooling A #BUILDFIRST APPROACH

Slide 2

Slide 2 text

Hello! I’m Nico nzgb

Slide 3

Slide 3 text

Hello! I’m Nico nzgb bevacqua

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

bevacqua.io/bf Processes

Slide 6

Slide 6 text

bevacqua.io/bf Processes Modularity

Slide 7

Slide 7 text

bevacqua.io/bf Processes Modularity Testing

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

jsconf14bf bevacqua.io/bf 45% off!

Slide 10

Slide 10 text

Why? Topics

Slide 11

Slide 11 text

Why? Flow Topics

Slide 12

Slide 12 text

How? Topics

Slide 13

Slide 13 text

How? Tools Topics

Slide 14

Slide 14 text

What? Topics

Slide 15

Slide 15 text

What? Tasks Topics

Slide 16

Slide 16 text

And..? Topics

Slide 17

Slide 17 text

And..? Modularity! Topics

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Why Build?

Slide 20

Slide 20 text

Why Build First?

Slide 21

Slide 21 text

Because Process

Slide 22

Slide 22 text

Because Process Productivity

Slide 23

Slide 23 text

Because Process Productivity Performance

Slide 24

Slide 24 text

Process Automation

Slide 25

Slide 25 text

Process Automation: Eliminates repetitive work

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Automation.

Slide 30

Slide 30 text

Automation is Productivity

Slide 31

Slide 31 text

Automation is Productivity

Slide 32

Slide 32 text

Automation is Productivity Continuous Development

Slide 33

Slide 33 text

Automation is Productivity Continuous Development Integration Continuous

Slide 34

Slide 34 text

Automation is Productivity Continuous Development Integration Deployments Continuous Continuous

Slide 35

Slide 35 text

Performance Compiling

Slide 36

Slide 36 text

Performance Bundling Compiling

Slide 37

Slide 37 text

Performance Bundling Minifying Compiling

Slide 38

Slide 38 text

Performance Bundling Minifying Spriting Compiling

Slide 39

Slide 39 text

Performance Bundling Minifying Spriting Asset Hashing Compiling

Slide 40

Slide 40 text

Performance Faster Response Times Bundling Minifying Spriting Asset Hashing Compiling

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Which Tools??

Slide 43

Slide 43 text

make

Slide 44

Slide 44 text

make

Slide 45

Slide 45 text

make

Slide 46

Slide 46 text

make

Slide 47

Slide 47 text

make

Slide 48

Slide 48 text

make

Slide 49

Slide 49 text

Burden of Choice make

Slide 50

Slide 50 text

Burden of Choice make

Slide 51

Slide 51 text

Burden of Choice make

Slide 52

Slide 52 text

Burden of Choice make

Slide 53

Slide 53 text

Burden of Choice make

Slide 54

Slide 54 text

Burden of Choice make

Slide 55

Slide 55 text

Burden of Choice make

Slide 56

Slide 56 text

Burden of Choice make

Slide 57

Slide 57 text

Gulp, Grunt, Whatever Choose your own adventure

Slide 58

Slide 58 text

Gulp, Grunt, Whatever Choose your own adventure Tooling

Slide 59

Slide 59 text

Featuring Grunt Tooling

Slide 60

Slide 60 text

bevacqua.io/bf/tooling Tooling ✔ Configuration Driven

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

Installing Grunt Tooling

Slide 67

Slide 67 text

bevacqua.io/bf/tooling npm init

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

Turning icons into a Sprite Sheet

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

Deploying to an Amazon EC2 Instance

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

Featuring Gulp Tooling

Slide 82

Slide 82 text

bevacqua.io/bf/tooling ✔ Code Driven

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

Installing Gulp Tooling

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

Building with Gulp Tooling

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

Featuring npm Tooling

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

Installing npm run

Slide 104

Slide 104 text

Installing npm run

Slide 105

Slide 105 text

bevacqua.io/bf/tooling RUN npm init

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

It doesn’t matter which tool you use.

Slide 109

Slide 109 text

It doesn’t matter which tool you use.

Slide 110

Slide 110 text

Use whatever does the job.

Slide 111

Slide 111 text

Use whatever works for you.

Slide 112

Slide 112 text

One last thing…

Slide 113

Slide 113 text

Modularity

Slide 114

Slide 114 text

Modularity

Slide 115

Slide 115 text

Modularity in the browser?

Slide 116

Slide 116 text

No content

Slide 117

Slide 117 text

No content

Slide 118

Slide 118 text

No content

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

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.

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

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

Slide 128

Slide 128 text

Browserify Enter

Slide 129

Slide 129 text

Browserify ✔ Inlines require calls.

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

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

Slide 132

Slide 132 text

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

Slide 133

Slide 133 text

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

Slide 134

Slide 134 text

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.

Slide 135

Slide 135 text

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

Slide 136

Slide 136 text

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

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

Recap

Slide 139

Slide 139 text

Recap Build First, not “later”

Slide 140

Slide 140 text

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

Slide 141

Slide 141 text

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

Slide 142

Slide 142 text

such thanks nzgb bevacqua

Slide 143

Slide 143 text

nzgb many questions? bevacqua such thanks