Slide 1
Slide 1 text
AUTOMATING WORKFLOW
IMPROVING FRONT-END HAPPINESS WITH BETTER TOOLING
❤
@addyosmani
Slide 2
Slide 2 text
Trying to develop for the
web today is a little like..
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Our tooling landscape is
getting more complex.
Slide 5
Slide 5 text
Boilerplate Abstractions
Frameworks Testing Docs
Workflow Dependency
management Performance
optimization Build
Continuous Integration
Deployment Version control
Slide 6
Slide 6 text
OMG. WHAT IS THAT?
Slide 7
Slide 7 text
The first rule of tooling is
“Thou shalt not make @paul_irish cry”
Slide 8
Slide 8 text
Choose tools you’ll use.
The second is..
Slide 9
Slide 9 text
Time is a key factor in
staying productive.
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Automate repetitive tasks
to stay effective.
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
Automation isn’t about being
lazy. It’s about being efficient.
Slide 14
Slide 14 text
Steve Wozniak
Slide 15
Slide 15 text
The right tools make the
difference between an artist
and a craftsman.
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
The average front-end
workflow today
Slide 18
Slide 18 text
Setup
Scaffolding
Download libraries
Download templates
Download frameworks
Slide 19
Slide 19 text
Develop
Watch Sass / Less / Stylus
Watch CoffeeScript
Watch Jade / Haml
LiveReload
JS / CSS Linting
Slide 20
Slide 20 text
Code linting
Running unit tests
Compile everything
Minify and concatenate
Generate images / icons
Optimize performance
HTTP Server
Deployment Build
Slide 21
Slide 21 text
Automate this workflow for
simple projects
Slide 22
Slide 22 text
Workflow tools
bit.ly/codekit
Slide 23
Slide 23 text
hammerformac.com
Slide 24
Slide 24 text
bit.ly/prepros Win/Mac
Slide 25
Slide 25 text
koala-app.com W/M/L
Slide 26
Slide 26 text
mixture.io Win/Mac
Slide 27
Slide 27 text
bit.ly/compassapp
Slide 28
Slide 28 text
bit.ly/scout-app Win/Mac
Slide 29
Slide 29 text
So happy.
I may just cry.
Slide 30
Slide 30 text
Iterative
improvement.
Slide 31
Slide 31 text
First do it.
Then do it right.
Then do it better.
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
better?
Slide 34
Slide 34 text
Automate workflow for
all types of projects.
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
Scaffold, write less with Yo
Build, preview and test with Grunt
Manage dependencies with Bower
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
Flexibility to customize your
setup as much as you desire.
Slide 39
Slide 39 text
Limit the time spent
writing boilerplate.
Slide 40
Slide 40 text
Improve your productivity and
delight during development.
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
Helps run repetitive tasks.
Slide 43
Slide 43 text
Linting
Compiling
Minification
Testing
Conversion
Documentation
Deployment
And more
Slide 44
Slide 44 text
Alternative to
Rake/Cake/Make/Ant
Slide 45
Slide 45 text
Huge ecosystem.
Slide 46
Slide 46 text
Fantastic for developers and designers.
♥
Slide 47
Slide 47 text
touch package.json Gruntfile.js
Slide 48
Slide 48 text
package.json
Slide 49
Slide 49 text
{
! "name": "awesome-app",
! "version": "0.0.1",
! "devDependencies": {
! ! "grunt": "~0.4.1",
! ! "grunt-contrib-jshint": "~0.6.3",
! ! "grunt-contrib-uglify": "~0.2.0"
! }
}
Specify Grunt plugins and metadata.
Slide 50
Slide 50 text
Gruntfile.js
Slide 51
Slide 51 text
module.exports = function(grunt){
! grunt.initConfig({
! ! uglify: {
! ! ! build: {
src: 'app.js',
dest: 'build/app.min.js'}
! ! },
! ! jshint: { all: ['**/*.js']}
! });
! grunt.loadNpmTasks('grunt-contrib-uglify');
! grunt.loadNpmTasks('grunt-contrib-jshint');
! grunt.registerTask('default', ['jshint', 'uglify']);
};
Config tasks and load plugins
Slide 52
Slide 52 text
$ npm install -g grunt-cli
Slide 53
Slide 53 text
$ npm install
Slide 54
Slide 54 text
$ grunt
Running “jshint:all” (jshint) task
Running “uglify:build” (uglify) task
Done.
Slide 55
Slide 55 text
Not bad!
Slide 56
Slide 56 text
$ npm install grunt- --save-dev
Slide 57
Slide 57 text
task tip
grunt-responsive-images
Create multi-resolution images from
a directory for src-set/srcN
bit.ly/grunt-resp
Slide 58
Slide 58 text
task tip
grunt-contrib-imageoptim
Lower page-weight by applying
optimizations to JPG/PNG/Gif
bit.ly/grunt-image
Slide 59
Slide 59 text
speed tip
grunt-concurrent
Speed up build time by concurrently
running tasks like Sass and Coffee.
bit.ly/grunt-conc
Slide 60
Slide 60 text
speed tip
grunt-newer
Run tasks on only source files
modified since the last run.
bit.ly/grunt-newer
Slide 61
Slide 61 text
A first look at something new I’ve
been hacking on
Slide 62
Slide 62 text
grunt-uncss
Remove unused CSS across your
project at build time.
bit.ly/uncss
Slide 63
Slide 63 text
A few weeks ago..
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
Get audits for unused CSS in
your page with DevTools
Slide 66
Slide 66 text
Chrome DevTools Audits
Slide 67
Slide 67 text
grunt-uncss can remove
unused CSS at build time
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
Very early days, but 280KB
down to 40KB of CSS.
Slide 70
Slide 70 text
120KB
11KB
What about Bootstrap alone?
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
A package manager for the web.
Slide 73
Slide 73 text
1. That lib is 6 months old? Better 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
The old way of doing things.
Slide 74
Slide 74 text
New hotness.
Slide 75
Slide 75 text
$ npm install -g bower
Slide 76
Slide 76 text
$ bower search
Slide 77
Slide 77 text
$ bower search angular
Search results:
angular git://github.com/angular/bower-angular.git
angular-mocks git://github.com/angular/bower-angular-mocks.git
angular-resource git://github.com/angular/bower-angular-
resource.git
angular-cookies git://github.com/angular/bower-angular-cookies.git
angular-sanitize git://github.com/angular/bower-angular-
sanitize.git
angular-bootstrap git://github.com/angular-ui/bootstrap-bower.git
........
Slide 78
Slide 78 text
$ bower install
Slide 79
Slide 79 text
$ bower install angular --save-dev
bower install angular#1.0.8
angular#1.0.8 app/bower_components/angular
Slide 80
Slide 80 text
$ bower install
$ bower install
$ bower install #
$ bower install =#
Slide 81
Slide 81 text
$ bower list
Slide 82
Slide 82 text
$ bower list
bower check-new Checking for new versions of the project
dependencies..
testapp#0.0.0 /Users/addyo/projects/testapp
ᵓᴷᴷ angular#1.0.8 (latest is 1.2.0-rc.3)
ᵓᴷᵣ bootstrap#3.0.0
ᴹ ᵋᴷᴷ jquery#1.9.1 (2.0.3 available)
ᵓᴷᴷ jquery#1.9.1 (latest is 2.0.3)
ᵋᴷᴷ modernizr#2.6.2
Slide 83
Slide 83 text
Runs over:
Git
HTTP(s)
Zip
npm
Slide 84
Slide 84 text
You can even wire up deps
from the command-line!
Slide 85
Slide 85 text
No content
Slide 86
Slide 86 text
grunt-bower-install
bit.ly/grunt-bower
Slide 87
Slide 87 text
$ npm install grunt-bower install --save-dev
$ bower install jquery --save
$ grunt bower-install
Slide 88
Slide 88 text
No more worrying about
script tags!
Slide 89
Slide 89 text
http:/
/bower.io
Slide 90
Slide 90 text
bit.ly/bowersearch
Slide 91
Slide 91 text
No content
Slide 92
Slide 92 text
Yo is your gateway to this
magical new world.
Slide 93
Slide 93 text
It scaffolds out boilerplate.
Slide 94
Slide 94 text
Can prescribe helpful Grunt tasks.
Slide 95
Slide 95 text
Can automatically install
dependencies you need.
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
$ npm install -g yo
Slide 98
Slide 98 text
This installs yo, grunt and bower
for you.
Slide 99
Slide 99 text
$ yo
[?] What would you like to do?
›❯ Install a generator
Run the Angular generator (0.4.0)
Run the Backbone generator (0.1.9)
Run the Blog generator (0.0.0)
Run the jQuery generator (0.1.4)
Run the Gruntfile generator (0.0.6)
(Move up and down to reveal more choices)
Slide 100
Slide 100 text
$ yo
[?] What would you like to do? Install a generator
[?] Search NPM for generators: jquery
[?] Here's what I found. Install one?
›❯ generator-jquery-boilerplate
generator-jquery-mobile
Search again
Return home
Slide 101
Slide 101 text
$ yo jquery-boilerplate
create .jshintrc
create CONTRIBUTING.md
create Gruntfile.js
create HISTORY.md
create boilerplate.jquery.json
create demo/index.html
create dist/jquery.boilerplate.js
create dist/jquery.boilerplate.min.js
create package.json
create src/jquery.boilerplate.coffee
create src/jquery.boilerplate.js
Slide 102
Slide 102 text
Boom. You just created a jQuery
plugin.
Slide 103
Slide 103 text
Installing a custom generator.
Slide 104
Slide 104 text
$ npm install generator-bootstrap -g
Slide 105
Slide 105 text
$ yo bootstrap
In what format would you like the Twitter
Bootstrap stylesheets? (Use arrow keys)
›❯ css
sass
less
stylus
Slide 106
Slide 106 text
$ npm install generator-webapp -g
Slide 107
Slide 107 text
$ yo webapp
Out of the box I include H5BP and jQuery.
[ ? ] What more would you like?
›❯ Bootstrap for Sass
RequireJS
Modernizr
Slide 108
Slide 108 text
No content
Slide 109
Slide 109 text
Boilerplate - H5BP, Bootstrap, Modernizr
Abstractions - optionally Sass, CoffeeScript, grunt-
bower-install available by default.
Performance optimization - optimize images,
scripts, stylesheets, get lean Modernizr builds,
concurrently run all of these tasks at build time.
Testing and build process - Mocha, Jasmine,
PhantomJS
Boom. Just created a webapp!
Slide 110
Slide 110 text
No content
Slide 111
Slide 111 text
$ grunt server
Slide 112
Slide 112 text
You can now edit and LiveReload!
Slide 113
Slide 113 text
Make changes. Save. Browser automatically refreshes.
Slide 114
Slide 114 text
Fantastic for getting a real-time
view of application state.
Slide 115
Slide 115 text
Edits can also refresh all your
devices. Instant real-device previews.
Slide 116
Slide 116 text
Cross-device live reload
bit.ly/gruntsync
Slide 117
Slide 117 text
No content
Slide 118
Slide 118 text
What about frameworks?
Slide 119
Slide 119 text
$ npm install generator-angular -g
Slide 120
Slide 120 text
$ yo angular
[?] Would you like to include Bootstrap? (Y/n)
Slide 121
Slide 121 text
$ yo angular
[?] Would you like to include Bootstrap? (Y/n)
[?] Would you like to use the SCSS version?
Slide 122
Slide 122 text
$ yo angular
[?] Would you like to include Bootstrap? (Y/n)
[?] Would you like to use the SCSS version?
[?] Which modules would you like to include?
(Press to select)
›❯ angular-resource.js
angular-cookies.js
angular-sanitize.js
Slide 123
Slide 123 text
No content
Slide 124
Slide 124 text
$ yo angular:view user
create app/views/user.html
Slide 125
Slide 125 text
$ yo angular:controller user
create app/scripts/controllers/user.js
create test/spec/controllers/user.js
Slide 126
Slide 126 text
$ yo angular:directive mydirective
create app/scripts/directives/mydirective.js
create test/spec/directives/mydirective.js
Slide 127
Slide 127 text
$ bower install angular-local-storage
create app/scripts/directives/mydirective.js
create test/spec/directives/mydirective.js
Slide 128
Slide 128 text
You just created an Angular
app with dependencies
Slide 129
Slide 129 text
$ yo express-angular
AngularJS + Express
backend
Slide 130
Slide 130 text
Generators also available for:
Backbone
Ember
Polymer
Flight
CanJS
& many other frameworks.
Slide 131
Slide 131 text
$ yo jekyllrb
Tell us a little about yourself. ☛
[?] Name: Addy Osmani
[?] Email: [email protected]
[?] GitHub username: addyosmani
[?] Twitter username: @addyosmani
Wire tools and preprocessors. ☛
[?] CSS preprocessor: Sass
[?] Use Autoprefixer? Yes
[?] Javascript preprocessor:
Coffeescript
›❯ None
Slide 132
Slide 132 text
$ yo chrome-extension
[?] What would you like to call this extension?
[?] How would you describe it?
[?] Would you like more UI Features?
›❯ Options Page
Content Scripts
Omnibox
[?] Would you like to use permissions? (Press to select)
›❯ Tabs
Bookmarks
Cookies
History
Management
Slide 133
Slide 133 text
$ yo mobile
Bootstrap 3, TopCoat, Foundation, Pure
Generates responsive images
Generates site screenshots
Removes 300ms delay on touch
Boilerplate for Fullscreen API
Integrated BrowserStack testing
Polyfill for async localStorage
and more.
bit.ly/yomobile
Slide 134
Slide 134 text
http:/
/yeoman.io
Slide 135
Slide 135 text
Generator search
Slide 136
Slide 136 text
Demo apps built with Yeoman?
http:/
/bit.ly/yeomandemo
Slide 137
Slide 137 text
Work less. Do more.
Make awesome.
Slide 138
Slide 138 text
How can we improve the
rest of your workflow?
Slide 139
Slide 139 text
Learn to love the command-line
Slide 140
Slide 140 text
It isn’t scary. You know how to
use PhotoShop’s 3000 buttons.
That’s scary!
Slide 141
Slide 141 text
Script common tasks
bit.ly/mydotfiles
Slide 142
Slide 142 text
$ server
python -m SimpleHTTPServer
Start up a new local server
Slide 143
Slide 143 text
$ clone
Clone a repo easily, cd into it, open up sublime
Slide 144
Slide 144 text
$ gitexport
function gitexport(){
mkdir -p "$1"
git archive master | tar -x -C "$1"
}
Copy a local checkout without the .git stuff
Slide 145
Slide 145 text
Terminal Replay (iTerm 2)
Slide 146
Slide 146 text
TotalTerminal
A system-wide terminal available via a hot-key
bit.ly/totalterminal
Slide 147
Slide 147 text
@climagic
Slide 148
Slide 148 text
Do things more quickly.
Slide 149
Slide 149 text
Alfred.app
Slide 150
Slide 150 text
Alfred Workflows
Find apps, files
Find packages on npm
Build tasks
bit.ly/alfredworkflows
Slide 151
Slide 151 text
Alfred Workflows
bit.ly/alfredworkflows
Browser compatibility search
Find documentation on Dash
Font awesome search
Slide 152
Slide 152 text
Windows? Try Launchy.
launchy.net
Slide 153
Slide 153 text
Automator
Point-and-click automation of repetitive tasks
Slide 154
Slide 154 text
bit.ly/macrorecorder
Slide 155
Slide 155 text
Next, let’s look at your editor.
Slide 156
Slide 156 text
Know yours inside out.
Slide 157
Slide 157 text
Shortcuts are incredibly powerful.
Slide 158
Slide 158 text
Sublime Autoprefixer
Write CSS without the prefixes!
bit.ly/autoprefixer
Slide 159
Slide 159 text
Emmet (Zen Coding)
bit.ly/emmet-sublime
Slide 160
Slide 160 text
STProjectMaker
Easily reuse your boilerplates
bit.ly/stprojectmaker
Slide 161
Slide 161 text
Sublime TernJS
Smarter code completion, contextual jump to definition.
bit.ly/sublime-tern
Slide 162
Slide 162 text
Sublime Build System
bit.ly/sublime-grunt
Call tools from your editor. Get feedback in the console.
Slide 163
Slide 163 text
SublimeLinter
bit.ly/sublime-linter
Live linter feedback as you code
Slide 164
Slide 164 text
Develop and debug in the
browser
Slide 165
Slide 165 text
Chrome DevTools
An improved find and fix workflow.
devtools.chrome.com
Slide 166
Slide 166 text
Workspaces
Add and edit local projects. Breakpoints persist. Debug in-place.
Slide 167
Slide 167 text
New! Create New Files
Slide 168
Slide 168 text
Sass Source Maps
Slide 169
Slide 169 text
New! Less Source Maps
Slide 170
Slide 170 text
New! CSS Pretty-printing
Slide 171
Slide 171 text
New! Ignoring library code
Slide 172
Slide 172 text
New! DevTools Terminal
npm, git and all your favorite cli tools with this extension
Slide 173
Slide 173 text
bit.ly/devtools-terminal
Slide 174
Slide 174 text
No content
Slide 175
Slide 175 text
What about better integration
between tools?
Slide 176
Slide 176 text
Sublime Web Inspector
bit.ly/sublime-inspector
Debugger. Breakpoints. Console. Evaluate call frames.
Slide 177
Slide 177 text
Emmet LiveStyle
Edit CSS. See changes live in Chrome *without* a browser refresh.
livestyle.emmet.io
Slide 178
Slide 178 text
Adobe Brackets
Bi-directional HTML live editing with Chrome.
brackets.io
Slide 179
Slide 179 text
bit.ly/webstormide
Slide 180
Slide 180 text
WebStorm: Live Edit
Slide 181
Slide 181 text
WebStorm: Debug with Chrome
Slide 182
Slide 182 text
WebStorm 7
npm search! built-in terminal
web components & more.
Slide 183
Slide 183 text
LightTable
lighttable.com
Slide 184
Slide 184 text
Sublime jsRun
Run JS in Chrome from Sublime
bit.ly/sublime-jsrun
Slide 185
Slide 185 text
Tailor
Brackets + Git for ChromeOS
Slide 186
Slide 186 text
Synchronized cross-device
testing
Slide 187
Slide 187 text
Re-checking your site on mobile is a pain
Slide 188
Slide 188 text
How does this fit into your workflow?
Slide 189
Slide 189 text
Navigate all devices to the
same URL
Slide 190
Slide 190 text
A lo-fi, free option
Remote Preview
Slide 191
Slide 191 text
Remote Preview
◦ [+] Free!
◦ [-] Loads page into iframe
◦ [-] Requires user to type url in page
◦ [+] Central place to change url to load into iframe after
initial set-up
bit.ly/remotepreview
Slide 192
Slide 192 text
Synchronize navigation &
get screenshots.
Slide 193
Slide 193 text
Adobe Edge Inspect CC
Slide 194
Slide 194 text
No content
Slide 195
Slide 195 text
Adobe Edge Inspect
◦ [-] One device at a time
◦ [-] Displays site in a WebView
◦ [+] Supports live reload
◦ [+] Extension to load any page you view in Chrome
◦ [-] Can’t account for localhost (i.e. switch to ip addr. of
machine on local network)
◦ [+] Remote Inspect via Weinre
bit.ly/edgeinspect
Slide 196
Slide 196 text
Refresh all devices on edit
Slide 197
Slide 197 text
Grunt + LiveReload
Slide 198
Slide 198 text
Grunt + LiveReload
◦ [+] Free!
◦ [+] Easily see how each change you save looks across devices
◦ [+] Works with any modern mobile browser
◦ [-] Requires you to use Grunt for your build process
bit.ly/gruntsync
Slide 199
Slide 199 text
Synchronize scrolls, clicks,
interactions as well as navigation
Slide 200
Slide 200 text
GhostLab
Slide 201
Slide 201 text
Sync desktop & mobile navigation
Slide 202
Slide 202 text
Sync navigation across *all* your devices
Slide 203
Slide 203 text
Sync clicks, scrolls and other interactions
Slide 204
Slide 204 text
Ghostlab
◦ [+] Creates server to folder contents
◦ [+] Syncs scrolls, clicks and reloads
◦ [-] Needs typing into browser on each device
◦ [+] Allows to match up scrolling and input
◦ [-] OS X Only
◦ [+] Debugging via Weinre
bit.ly/ghostapp
Slide 205
Slide 205 text
Mobile Debugging
Slide 206
Slide 206 text
DevTools Remote Debugging
Slide 207
Slide 207 text
New! RAW USB Debugging
Slide 208
Slide 208 text
jsConsole
bit.ly/jsconsole
Slide 209
Slide 209 text
js Hybugger
jshybugger.com
Slide 210
Slide 210 text
iOS WebKit Debug Proxy
bit.ly/webkitdebug
Slide 211
Slide 211 text
MIHTool
bit.ly/mihtool
Slide 212
Slide 212 text
Visual regression testing
Slide 213
Slide 213 text
Wraith
bit.ly/wraithapp
Slide 214
Slide 214 text
Huxley
bit.ly/huxleyapp
Slide 215
Slide 215 text
PhantomCSS
bit.ly/phantomcss
Slide 216
Slide 216 text
Simulate real-network
conditions
Slide 217
Slide 217 text
charlesproxy.com
Slide 218
Slide 218 text
Network Link Conditioner
Slide 219
Slide 219 text
slowyapp.com
Slide 220
Slide 220 text
Fiddler
fiddler2.com
Slide 221
Slide 221 text
Netwem, WANEm (Linux)
bit.ly/linuxnetem
Slide 222
Slide 222 text
Simulators & Emulators
Slide 223
Slide 223 text
Open Device Labs
Slide 224
Slide 224 text
Screenshots or live testing?
Slide 225
Slide 225 text
Simulators
bit.ly/simulatorlist
Massive, well-maintained list of emulators & simulators available
Slide 226
Slide 226 text
Are emulators enough?
Slide 227
Slide 227 text
Do I even need an emulator?
Chrome DevTools Overrides
Slide 228
Slide 228 text
Emulate touch events
Slide 229
Slide 229 text
Emulate screens
Slide 230
Slide 230 text
Emulate device orientation
Slide 231
Slide 231 text
Emulate Geolocation
Slide 232
Slide 232 text
To learn more checkout our DevTools
docs at devtools.chrome.com
Slide 233
Slide 233 text
If you aren't using automation,
you are working too hard
Remember
Slide 234
Slide 234 text
Use tools. not rules.
Slide 235
Slide 235 text
Improve your developer
happiness
Slide 236
Slide 236 text
Thank you.