Tweet
Tweet

Slide 1

Slide 1 text

FRONT-END TOOLING +AddyOsmani @addyosmani WORKFLOWS

Slide 2

Slide 2 text

! Building for the web sometimes feels like…

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Time is a key factor in staying productive. Use yours efficiently.

Slide 6

Slide 6 text

Better tooling can be simple. Can DevTools help us emulate real devices?

Slide 7

Slide 7 text

It can be as simple as opting for emulation when a real-device isn’t needed for testing.

Slide 8

Slide 8 text

Throttle network speed Toggle between devices

Slide 9

Slide 9 text

Having tools refresh device URLs for you BrowserSync Scrolls Clicks Refresh Forms Synchronise:

Slide 10

Slide 10 text

Previewing all your breakpoints at once Emmett Re:View

Slide 11

Slide 11 text

or automating style guide conformance checking Highlight issues Fix to match the Style Guide JSCS for Sublime Text

Slide 12

Slide 12 text

$ history | grep ‘querySelector’ Search your command-line history $ echo 'Hello World!' | pbcopy Copy to clipboard $ sudo !! Run the last command with sudo $ top -o vsize Discover what’s eating your memory $ unzip -l images.zip Unzip an archive to the current directory $ mdfind Use Spotlight to search from command-line Tooling can be weird..and wonderful.

Slide 13

Slide 13 text

React DevTools It can extend your debugging experience ES6 REPL Angular Batarang Gradient Inspector Tamper (modify requests before serving)

Slide 14

Slide 14 text

ImageOptim (Mac) or PNGGauntlet (Windows) Optimise sites with little to no configuration..* Ngx PageSpeed / Mod PageSpeed Smaller for CSS/JS/HTML (Mac) * we’ll talk about Grunt, Gulp and npm soon

Slide 15

Slide 15 text

Beautify and “fix” issues in your source Format, search and re-write JS jsfmt $ jsfmt -w=true source.js Non-destructively fix linting errors fixmyjs $ fixmyjs source.js Detect structural similarities in code jsinspect $ jsinspect -t 30 -i ./scripts

Slide 16

Slide 16 text

Sip Color Picker Or just improve your workflow. Chrome DevTools Eye Dropper

Slide 17

Slide 17 text

Automation is having tools do the tedious work, so you don’t have to.

Slide 18

Slide 18 text

If you aren’t using productivity tools or task automation, you are working too hard

Slide 19

Slide 19 text

Our tools are like onions. Peel back the layers to discover more functionality.

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Learn to love the command-line

Slide 22

Slide 22 text

! ! $ git clone ▌ $ sublime . Improve your command-line skills

Slide 23

Slide 23 text

Learn to love and use shortcuts. Ctrl A + Go to the start of the line Ctrl E + Go to the end of the line

Slide 24

Slide 24 text

iTerm2.x for Mac Replay command history Autocomplete Paste history Open with a global shortcut

Slide 25

Slide 25 text

Zsh Pure - minimal prompt Prezto - config framework for Zsh Customisable alternative to Bash See http://jilles.me/badassify-your-terminal-and-shell/

Slide 26

Slide 26 text

cmder for Windows Slick console with enhancements spiced with Monokai colours and a custom prompt layout

Slide 27

Slide 27 text

Many CLI apps to augment your workflow e.g PageRes for generating responsive screenshots from the command-line

Slide 28

Slide 28 text

Learn to use dot files to alias common tasks in your workflow

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

! addyo at addyo-macbook in ~/projects/ on master* ! $ server ▌ $ clone $ tree $ fs $ gz Customise Dotfiles (theme, .aliases, .functions)

Slide 31

Slide 31 text

Learn to extend your tools

Slide 32

Slide 32 text

CSS & Sass Color Highlighter

Slide 33

Slide 33 text

Gutter Color ColorPicker

Slide 34

Slide 34 text

AutoFilename

Slide 35

Slide 35 text

JSHint Gutter Linter

Slide 36

Slide 36 text

GitGutter

Slide 37

Slide 37 text

Enforce code style with JSCS Code Style Configuration

Slide 38

Slide 38 text

Emmett for HTML Type a one-liner HTML generated just hit tab!

Slide 39

Slide 39 text

Navigate quickly to any file ⌘ P +

Slide 40

Slide 40 text

Navigate to any symbol ⌘ R +

Slide 41

Slide 41 text

Pick a theme that helps you focus

Slide 42

Slide 42 text

Seti UI Theme (for Sublime Text) Icons per extension Crisp colors

Slide 43

Slide 43 text

which is a port of Seti UI Theme (for Atom Editor) Per-tool icons ! (e.g Grunt, Gulp)

Slide 44

Slide 44 text

Maybe someday write your tools

Slide 45

Slide 45 text

Sublime FixMyJS

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

Build Tools

Slide 48

Slide 48 text

What do we build?

Slide 49

Slide 49 text

Go!
HTML .paper-button { background-color: red; } CSS document.querySelector('.paper-button') .addEventListener('click', function(e) { // your code here }, false); JavaScript

Slide 50

Slide 50 text

sass input.scss output.css sass watch Pre-processors Sass CSS

Slide 51

Slide 51 text

browserify app.js -o bundle.js Bundle dependencies Modules Bundle

Slide 52

Slide 52 text

coffee --compile coffee --watch Language transpilers Coffee JavaScript

Slide 53

Slide 53 text

Why do we build?

Slide 54

Slide 54 text

Productivity & performance

Slide 55

Slide 55 text

soup.io The web

Slide 56

Slide 56 text

HTTPArchive - October 2014 reports 1944KB Average page size 1.9MB ~1.2MB images ~0.35MB scripts & styles

Slide 57

Slide 57 text

TMI (Too Many Images) http://github.com/addyosmani/tmi

Slide 58

Slide 58 text

300-1000ms 1 second + 10 seconds + Later. 0-100ms Human Perception in 2014

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

Automating performance improvement

Slide 61

Slide 61 text

When you want to be fast, you have to give up the things slowing you down.

Slide 62

Slide 62 text

(1) Client renders page, custom JS beacons back ATF CSS styles ▪ PageSpeed gathers critical CSS beacons from visitors (2) Critical CSS is inlined... ▪ Remaining CSS loaded after first paint + https://developers.google.com/speed/pagespeed/module/filter-prioritize-critical-css  ModPagespeedEnableFilters  prioritize_critical_css        #  Apache !  pagespeed  EnableFilters      prioritize_critical_css        #  Nginx   ● modpagespeed.com ● ngxpagespeed.com

Slide 63

Slide 63 text

JSConf.eu Old Speed Index 2149

Slide 64

Slide 64 text

Optimized: JSConf.eu + mod_pagespeed Old Speed Index 2149 New Speed Index 1310

Slide 65

Slide 65 text

How do we build?

Slide 66

Slide 66 text

Boilerplate Abstractions Frameworks Testing Docs Workflow Dependency management Performance optimization Build Continuous Integration Deployment Version control

Slide 67

Slide 67 text

Setup ! Scaffolding HTML5 Boilerplate ! Download libraries Twitter Bootstrap
 Download templates Layouts ! Download frameworks Angular, Polymer, Ember.

Slide 68

Slide 68 text

Develop ! Watch Sass, Less, Stylus CoffeeScript, ECMAScript 6 Jade, Haml ! ! LiveReload Refresh pages
 Linting JavaScript CSS Style linting

Slide 69

Slide 69 text

Build ! Code linting Running unit tests Compile everything Minify and concatenate Generate images / icons Optimize performance HTTP Server Deployment

Slide 70

Slide 70 text

Automate workflow for simple projects

Slide 71

Slide 71 text

CodeKit

Slide 72

Slide 72 text

Hammer for Mac

Slide 73

Slide 73 text

Prepros

Slide 74

Slide 74 text

Automate workflow for all types of projects

Slide 75

Slide 75 text

Build Tools Make

Slide 76

Slide 76 text

Why use a task runner or build system? Automation

Slide 77

Slide 77 text

Improve quality Ship the goods to users faster It’s easily repeatable

Slide 78

Slide 78 text

Automation isn’t about being lazy. It’s about being efficient

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

What are Gulp and Grunt?

Slide 81

Slide 81 text

Grunt and Gulp Task runner Streaming build system

Slide 82

Slide 82 text

How are they different? ! Based on files Configuration over code ! Based on streams Code over configuration

Slide 83

Slide 83 text

Get files Modify them Make new ones Win Creating this workflow

Slide 84

Slide 84 text

Typical Grunt task Read files Modify Write files ! ! File system ! ! Temp Read files Modify Write files ! ! Temp Read files Modify

Slide 85

Slide 85 text

Gulp uses streams Read files Modify ! ! File system Modify Modify Modify Write files ! ! File system

Slide 86

Slide 86 text

Task automation with Gulp

Slide 87

Slide 87 text

Before you get started • Download and install NodeJS · Available for all major operating systems • Install Gulp as a global utility Prerequisites $ npm install -g gulp

Slide 88

Slide 88 text

Gulp in a nutshell Install Gulp globally Create package file Install dependent packages Add tasks to your Gulp file Load tasks into Gulp

Slide 89

Slide 89 text

Create your package.json file Prompts for your author, package name and the basics. $ npm init

Slide 90

Slide 90 text

Install Gulp locally to the package.json file $ npm install gulp —save-dev —save-dev for development —save for production

Slide 91

Slide 91 text

Gulp plugins use streams

Slide 92

Slide 92 text

! ! gulp.src(‘app/vendor/*.js’); gulp.src(‘app/**/*.js’); gulp.src(‘never/gonna/give/you/up.js’); gulp.src([‘**/*.js’,’*.cs’]); Streams

Slide 93

Slide 93 text

Install Gulp locally to the package.json file $ npm install gulp-concat gulp-uglify gulp-jshint —save-dev Concatenate files Minify files Lint your JavaScript

Slide 94

Slide 94 text

package.json to manage dependencies

Slide 95

Slide 95 text

Good news! There’s only 4 API methods

Slide 96

Slide 96 text

Gulp’s API

Slide 97

Slide 97 text

! ! ! gulp.task(‘scripts’, [‘lint’], function () { return gulp.src('js/*.js') .pipe(uglify()) .pipe(gulp.dest(‘dist’)); }); Optionally declare dependencies gulp.task(name, [dep], fn) Registers a task name with a function

Slide 98

Slide 98 text

! ! ! gulp.task(‘scripts’, [‘lint’], function () { return gulp.src('js/*.js') .pipe(uglify()) .pipe(gulp.dest(‘dist’)); }); Take a file system glob (set of files) and emit files that match gulp.src(glob)

Slide 99

Slide 99 text

! ! ! gulp.task(‘scripts’, [‘lint’], function () { return gulp.src('js/*.js') .pipe(uglify()) .pipe(gulp.dest(‘dist’)); }); Piped files are written to the file system gulp.dest(folder)

Slide 100

Slide 100 text

e.g Minifying JavaScript

Slide 101

Slide 101 text

! var gulp = require('gulp'); var uglify = require('gulp-uglify'); ! gulp.task('minify', function() { gulp.src('app.js') .pipe(uglify()) .pipe(gulp.dest('out')); }); Gulpfile.js

Slide 102

Slide 102 text

! var gulp = require('gulp'); var uglify = require('gulp-uglify'); ! gulp.task('minify', function() { gulp.src('app.js') .pipe(uglify()) .pipe(gulp.dest('out')); }); Gulpfile.js

Slide 103

Slide 103 text

! var gulp = require('gulp'); var uglify = require('gulp-uglify'); ! gulp.task('minify', function() { gulp.src('app.js') .pipe(uglify()) .pipe(gulp.dest('out')); }); Gulpfile.js

Slide 104

Slide 104 text

! var gulp = require('gulp'); var uglify = require('gulp-uglify'); ! gulp.task('minify', function() { gulp.src('app.js') .pipe(uglify()) .pipe(gulp.dest('out')); }); Gulpfile.js

Slide 105

Slide 105 text

! var gulp = require('gulp'); var uglify = require('gulp-uglify'); ! gulp.task('minify', function() { gulp.src('app.js') .pipe(uglify()) .pipe(gulp.dest('out')); }); Gulpfile.js

Slide 106

Slide 106 text

File System Uglify app.js dist/ app.js gulp.src

Slide 107

Slide 107 text

! ! gulp.task(‘lint-watcher’, function() { gulp.watch('js/**/*.js', [‘jshint’]); }); Run a function when the glob changes gulp.watch(glob, fn);

Slide 108

Slide 108 text

You’re a Gulp pro now! task src dest watch

Slide 109

Slide 109 text

Code defining your tasks, which loads & uses plugins Gulpfile.js

Slide 110

Slide 110 text

Gulpfile.js

Slide 111

Slide 111 text

$ gulp Run from the terminal or command prompt Running Gulp

Slide 112

Slide 112 text

Task dependencies run in parallel We need to be careful. If a clean task was running here, it might finish last, deleting all the output. Whoops!

Slide 113

Slide 113 text

Task dependency chains

Slide 114

Slide 114 text

Task automation with Grunt

Slide 115

Slide 115 text

How are they different? ! Based on files Configuration over code ! Based on streams Code over configuration

Slide 116

Slide 116 text

Before you get started • Download and install NodeJS · Available for all major operating systems • Install Grunt CLI as a global utility, run from any path. Prerequisites $ npm install -g grunt-cli

Slide 117

Slide 117 text

Grunt in a nutshell Install CLI Create package file Install dependent packages Config tasks in Gruntfile.js Load tasks into Grunt Register custom tasks

Slide 118

Slide 118 text

Create your package.json file Prompts for your author, package name and the basics. $ npm init

Slide 119

Slide 119 text

Install Grunt locally to the package.json file $ npm install grunt —save-dev —save-dev for development

Slide 120

Slide 120 text

grunt vs grunt-cli ! “In a typical Grunt-based dev workflow, the CLI is installed once per system, while the lib is installed once per project.” ! “The relatively high proportion of CLI installs implies that many devs are using Continuous Integration, where both the CLI and core lib get installed every time.”

Slide 121

Slide 121 text

Install package dependencies $ npm install grunt-contrib-jshint grunt-contrib-cssmin —save-dev Install one or more tasks contrib tasks are officially maintained

Slide 122

Slide 122 text

package.json to manage dependencies

Slide 123

Slide 123 text

Gruntfile.js • Your task configuration • JSON Style • Load the plugins Summary

Slide 124

Slide 124 text

Grunt overview • Task configuration • Task loading • Register custom tasks • Grunt wrapper

Slide 125

Slide 125 text

Grunt overview • Grunt wrapper • Task configuration • Task loading • Register custom tasks

Slide 126

Slide 126 text

Task configuration

Slide 127

Slide 127 text

Task configuration

Slide 128

Slide 128 text

Gruntfile.js

Slide 129

Slide 129 text

Load Tasks Load npm tasks into Grunt Task names

Slide 130

Slide 130 text

Custom tasks Custom task name Tasks to run

Slide 131

Slide 131 text

Running individual Grunt tasks: Sample output from generator-webapp $ grunt task

Slide 132

Slide 132 text

Evaluate. Choose the tool you’re most comfortable with.

Slide 133

Slide 133 text

Evaluate. Choose the tool you’re most comfortable with.

Slide 134

Slide 134 text

How are they different? ! Based on files Configuration over code Independent tasks, strong I/O connection 3600 packages > 2 years old Widely used ! Based on streams Code over configuration Tasks run a sequence of methods. Less I/O 800 plugins > 1 year old Increasingly used

Slide 135

Slide 135 text

npm as a front-end task runner?

Slide 136

Slide 136 text

"scripts": { "build-js": "browserify browser/main.js | uglifyjs -mc > static/bundle.js", "build-css": "cat static/pages/*.css tabs/*/*.css", "build": "npm run build-js && npm run build-css", "watch-js": "watchify browser/main.js -o static/bundle.js -dv", "watch-css": "catw static/pages/*.css tabs/*/*.css -o static/bundle.css -v", "watch": "npm run watch-js & npm run watch-css", "start": "node server.js", } package.json http://substack.net/task_automation_with_npm_run Start a server Watch task Build & minify JS npm run scripts

Slide 137

Slide 137 text

Build tool helpers

Slide 138

Slide 138 text

Gulp DevTools

Slide 139

Slide 139 text

Gulp App

Slide 140

Slide 140 text

Grunt DevTools

Slide 141

Slide 141 text

Editors + Web Starter Kit

Slide 142

Slide 142 text

Gulp Recipes ! https://github.com/gulpjs/gulp/tree/master/docs/recipes

Slide 143

Slide 143 text

Useful build tasks

Slide 144

Slide 144 text

grunt-concurrent (concurrency is default in Gulp) ! ! ! ! Speed up build time by concurrently running tasks like Sass and Coffee.

Slide 145

Slide 145 text

grunt-newer (or gulp-changed) ! ! ! Only run tasks on source files that have been modified since the last run.

Slide 146

Slide 146 text

No content

Slide 147

Slide 147 text

No content

Slide 148

Slide 148 text

No content

Slide 149

Slide 149 text

Sizing up the average Bootstrap page MINIFIED ORIGINAL STYLES UNCSS + MINIFICATION 120KB 110KB 11KB (1) ~ 90% improvement (2) Based on average improvements reported by UnCSS users

Slide 150

Slide 150 text

Optimize Critical Path CSS

Slide 151

Slide 151 text

Just render visible content! 1. One RTT render for above the fold 2. Fast server response. No redirects 3. Must optimize critical rendering path a. Inline critical CSS b. Remove any blocking JavaScript Don’t render the whole page!

Slide 152

Slide 152 text

New Critical-path CSS tools which builds on Penthouse <333 $ npm install --save-dev penthouse CriticalCSS by FilamentGroup is also solid $ npm install --save-dev criticalcss Critical $ npm install --save-dev critical

Slide 153

Slide 153 text

No content

Slide 154

Slide 154 text

Extract stylesheets ! (Oust) Generate Critical path CSS for a viewport ! (Penthouse) Inline styles in ! (inline-critical) Output Source Critical’s workflow Inject loadCSS & async load site.css Wrap link tags in for users with JS disabled

Slide 155

Slide 155 text

Working with Web Components? Concatenates HTML Imports into a single file Vulcanize https://www.polymer-project.org/articles/concatenating-web-components.html grunt-vulcanize gulp-vulcanize

Slide 156

Slide 156 text

Continuous performance benchmarking

Slide 157

Slide 157 text

WebPageTest CLI $ npm install -g webpagetest Install $ webpagetest test $ webpagetest test -- wait 8000 Usage Jenkins

Slide 158

Slide 158 text

Grunt-PerfBudget http://cognition.happycog.com/article/grunt-plugins-reviewed $ npm install grunt-perfbudget Install 1 2 3 Budget in ms for render, KB for page weight Over budget? Task fails and reports an error. GitHub PRs will show the build failed

Slide 159

Slide 159 text

Smarter package management

Slide 160

Slide 160 text

npm as a front-end package manager?

Slide 161

Slide 161 text

Will we see a shift in 2015?

Slide 162

Slide 162 text

"dependencies": { "bootstrap": "^3.3.0", "jquery": "^2.1.1", "underscore": "^1.7.0" }, package.json

Slide 163

Slide 163 text

Find packages that work in both the client and server-side easily BrowserifySearch.org

Slide 164

Slide 164 text

Front-end package management for today Bower

Slide 165

Slide 165 text

Old way of doing things ! 1. jQuery is out of date. Let’s update! 2. Open up the site 3. Download the lib 4. Copy from ~/Downloads 5. Paste to app folder 6. Wire in with script tags

Slide 166

Slide 166 text

$ bower install jquery Installing jQuery with Bower

Slide 167

Slide 167 text

Newer hotness • Download and install NodeJS · Available for all major operating systems • Install Bower as a global utility Package manager for the web $ npm install -g bower

Slide 168

Slide 168 text

No content

Slide 169

Slide 169 text

Find packages • Find a library ! ! • Lists all the available libraries by that name Package manager for the web $ bower search

Slide 170

Slide 170 text

Install packages • Install a library ! Package manager for the web $ bower install

Slide 171

Slide 171 text

Yeoman

Slide 172

Slide 172 text

Yeoman kickstarts new projects, prescribing best practices and tools to help you stay productive yeoman.io

Slide 173

Slide 173 text

No content

Slide 174

Slide 174 text

Scaffolding a project quickly

Slide 175

Slide 175 text

Subtitle

Slide 176

Slide 176 text

Yo Grunt / Gulp Bower Scaffolding Build system Package manager

Slide 177

Slide 177 text

Generators • Over 1000 available today • Anyone can write them

Slide 178

Slide 178 text

Subtitle

Slide 179

Slide 179 text

Subtitle

Slide 180

Slide 180 text

Installation • Download and install NodeJS · Available for all major operating systems • Install Yo as a global utility $ npm install -g yo

Slide 181

Slide 181 text

! ! $ npm install -g generator-webapp ▌ ! Install a generator

Slide 182

Slide 182 text

! ! $ npm install -g generator-gulp-webapp ▌ ! Install a generator

Slide 183

Slide 183 text

! ! $ yo webapp ▌ Usage ! Yo!

Slide 184

Slide 184 text

Subtitle

Slide 185

Slide 185 text

Subtitle

Slide 186

Slide 186 text

No content

Slide 187

Slide 187 text

No content

Slide 188

Slide 188 text

! $ yo ! [?]  What  would  you  like  to  do?    ›❯    Install  a  generator      Run  the  Angular  generator      Run  the  Backbone  generator        Run  the  Blog  generator      Run  the  jQuery  generator      Run  the  Gruntfile  generator   (Move  up  and  down  to  reveal  more  choices) Remembers what you like to use

Slide 189

Slide 189 text

Slide 190

Slide 190 text

github.com/google/web-starter-kit

Slide 191

Slide 191 text

No content

Slide 192

Slide 192 text

No content

Slide 193

Slide 193 text

No content

Slide 194

Slide 194 text

No content

Slide 195

Slide 195 text

> gulp pagespeed

Slide 196

Slide 196 text

Choose tools you’ll use. Add tools & abstractions when they improve your productivity.

Slide 197

Slide 197 text

LibSass, PostCSS 2014 Trends? 2015 ES6 Modules (transpiled) npm for front-end package management * Web Components, virtual-dom / React Angular 2.0, Ember * If we’re able to address outstanding issues making Bower a better choice for today + Browserify Custom Elements & HTML Imports will be big. + persistent data structures

Slide 198

Slide 198 text

! Create Consume Refine Relax #ToolsNotRules

Slide 199

Slide 199 text

+AddyOsmani @addyosmani