Professional Documents
Culture Documents
WORKFLOWS
+AddyOsmani
@addyosmani
Synchronise:
Scrolls
Clicks
Refresh
Forms
Highlight issues
Copy to clipboard
$ echo 'Hello World!' | pbcopy
Angular Batarang
Gradient Inspector
ES6 REPL
fixmyjs
jsinspect
$ git clone
$ sublime .
Autocomplete
Paste history
Open with a
global shortcut
Zsh
See http://jilles.me/badassify-your-terminal-and-shell/
$
$
$
$
$
server
clone
tree
fs
gz
Color Highlighter
Gutter Color
ColorPicker
AutoFilename
GitGutter
Type a one-liner
HTML generated
just hit tab!
Icons per
extension
Crisp
colors
Per-tool icons
!
Sublime
FixMyJS
Build Tools
What do we build?
HTML
<div class=paper-button id="go" disabled>Go!</div>
CSS
.paper-button {
background-color: red;
}
JavaScript
document.querySelector('.paper-button')
.addEventListener('click', function(e) {
// your code here
}, false);
Pre-processors
CSS
Bundle dependencies
Modules
Bundle
Language transpilers
coffee --compile
coffee --watch
Coffee
JavaScript
Why do we build?
b
e
w
e
Th
soup.io
1.9MB
~1.2MB images
~0.35MB scripts &
styles
HTTPArchive - October 2014 reports 1944KB
300-1000ms
1 second +
10 seconds +
Later.
Automating performance
improvement
+
(1) Client renders page, custom JS beacons back ATF CSS styles
!ModPagespeedEnableFilters!prioritize_critical_css!!!!#!Apache
!
!pagespeed!EnableFilters!!!prioritize_critical_css!!!!#!Nginx!
modpagespeed.com
ngxpagespeed.com
https://developers.google.com/speed/pagespeed/module/filter-prioritize-critical-css
JSConf.eu
2149
2149
1310
How do we build?
Setup
!
Scaffolding
!
HTML5 Boilerplate
Download libraries
Twitter Bootstrap
Download templates
!
Layouts
Download frameworks
Develop
!
Watch
LiveReload
Refresh pages
Linting
JavaScript
CSS
Style linting
Build
!
Code linting
Running unit tests
Compile everything
Minify and concatenate
Generate images / icons
Optimize performance
HTTP Server
Deployment
CodeKit
Prepros
Build Tools
Make
Improve quality
Its easily
repeatable
Task runner
Streaming build
system
Based on files
Configuration over code
Based on streams
Code over configuration
Get files
Modify
them
Make new
ones
Win
!
!
File system
Read files
Modify
Temp
Temp
Write files
Read files
Modify
Write files
Read files
Modify
!
!
File system
File system
Read files
Write
files
Modify
Modify
Modify
Modify
Gulp in a nutshell
Install Gulp
globally
Create
package
file
Install
dependent
packages
Add tasks
to your
Gulp file
Load
tasks into
Gulp
$ npm init
save for
production
Streams
!
!
gulp.src(app/vendor/*.js);
gulp.src(app/**/*.js);
gulp.src(never/gonna/give/you/up.js);
gulp.src([**/*.js,*.cs]);
Concatenate files
Minify files
Lint your
JavaScript
Gulps API
!
!
!
gulp.src(glob)
!
!
!
gulp.dest(folder)
!
!
!
Gulpfile.js
!
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
!
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
!
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
!
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
!
var gulp
= require('gulp');
var uglify = require('gulp-uglify');
!
gulp.task('minify', function() {
gulp.src('app.js')
.pipe(uglify())
.pipe(gulp.dest('out'));
});
Uglify
dist/
app.js
app.js
gulp.src
File System
gulp.watch(glob, fn);
!
!
gulp.task(lint-watcher, function() {
gulp.watch('js/**/*.js', [jshint]);
});
task
src
dest
watch
Gulpfile.js
Running Gulp
$ gulp <mytask>
Based on files
Configuration over code
Based on streams
Code over configuration
Grunt in a nutshell
Install CLI
Create
package
file
Install
dependent
packages
Config
tasks in
Gruntfile.js
Load
tasks into
Grunt
Register
custom
tasks
$ npm init
grunt vs grunt-cli
!
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.
Gruntfile.js
Summary
Grunt overview
Task configuration
Task loading
Register custom tasks
Grunt wrapper
Grunt overview
Grunt wrapper
Task configuration
Task loading
Register custom tasks
Task configuration
Task configuration
Gruntfile.js
Load Tasks
Task names
Custom tasks
Tasks to run
Custom task name
$ grunt task
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
Start a server
Watch task
http://substack.net/task_automation_with_npm_run
Gulp DevTools
Gulp App
Grunt DevTools
Gulp Recipes
!
https://github.com/gulpjs/gulp/tree/master/docs/recipes
MINIFIED
UNCSS + MINIFICATION
Just render
visible content!
Dont render
the whole
page!
Criticals workflow
Source
Extract
stylesheets
!
(Oust)
Generate Critical
path CSS for a
viewport
Inline styles in
<head>
(Penthouse)
(inline-critical)
Output
Vulcanize
Working with Web Components? Concatenates HTML Imports into a single file
grunt-vulcanize
gulp-vulcanize
https://www.polymer-project.org/articles/concatenating-web-components.html
Continuous performance
benchmarking
WebPageTest CLI
Install
$ npm install -g webpagetest
Usage
$ webpagetest test <url>
$ webpagetest test <url> -- wait
8000
Jenkins
Grunt-PerfBudget
Install
Budget in ms for render, KB for page weight
2
3
Smarter package
management
Will we see a
shift in 2015?
package.json
"dependencies": {
"bootstrap": "^3.3.0",
"jquery": "^2.1.1",
"underscore": "^1.7.0"
},
BrowserifySearch.org
Find packages that work
in both the client and
server-side easily
Bower
Newer hotness
Find packages
Find a library
Install packages
Package manager for the web
Install a library
Yeoman
Subtitle
Yo
Grunt / Gulp
Bower
Scaffolding
Build system
Package
manager
Generators
Over 1000 available today
Anyone can write them
Subtitle
Subtitle
Installation
Download and install NodeJS
$ npm install -g yo
Install a generator
!
!
Install a generator
!
!
Usage
!
!
$ yo webapp
Yo!
Subtitle
Subtitle
$ 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)
github.com/google/web-starter-kit
Trends?
2015
2014
LibSass, PostCSS
* If were able to address outstanding issues making Bower a better choice for today
#ToolsNotRules
!
Create
Consume
Refine
Relax
<thank-you>
+AddyOsmani
@addyosmani