automating front-end workflow by addy osmani

7/21/2019 Automating Front-End Workflow by Addy Osmani

1/236

AUTOMATING WORKFLOWIMPROVING FRONT-END HAPPINESS WITH BETTER TOOLING

!@addyosmani


2/236


3/236


4/236

Our tooling landscape isgetting more complex.


5/236

BoilerplateAbstractions

Frameworks Testing DocsWorkflowDependency

managementPerformance

optimizationBuildContinuous Integration

DeploymentVersion control


6/236

OMG. WHAT IS THAT?


7/236

The first rule of tooling is

Thou shalt not make @paul_irish cry


8/236

Choose tools youll use.The second is..


9/236

Time is a key factor instaying productive.


10/236


11/236

Automate repetitive tasksto stay effective.


12/236


13/236

Automation isnt about beinglazy. Its about being efficient.


14/236

Steve Wozniak


15/236

The right tools make the

difference between an artist

and a craftsman.


16/236


17/236

The average front-endworkflow today


18/236

SetupScaffolding

Download librariesDownload templatesDownload frameworks


19/236

DevelopWatch Sass/ Less/ Stylus

Watch CoffeeScriptWatch Jade/ HamlLiveReload

JS/ CSSLinting


20/236

Code linting

Running unit tests

Compile everything

Minify and concatenate

Generate images / iconsOptimize performance

HTTP ServerDeployment

Build


21/236

Automate this workflow forsimpleprojects


22/236

Workflow tools
http://bower.io/http://bower.io/http://bower.io/


23/236


24/236
http://bower.io/http://bower.io/


25/236

koala-app.com
http://bower.io/http://bower.io/http://bower.io/http://bower.io/


26/236

mixture.io Win/Mac


27/236

bit.ly/compassapp


28/236

bit.ly/scout-appWin/Mac


29/236

So happy.I may just cry.


30/236

Iterative

improvement.


31/236

First do it.

Then do it right.

Then do it better.


32/236


33/236

better?


34/236

Automate workflow forall typesof projects.


35/236


36/236

Scaffold, write less with Yo

Build, preview and test with Grunt

Manage dependencies with Bower


37/236


38/236

Flexibility to customize yoursetup as much as you desire.


39/236

Limit the time spentwriting boilerplate.


40/236

Improve your productivity anddelight during development.


41/236


42/236

Helps run repetitivetasks.


43/236

Linting

CompilingMinificationTesting

ConversionDocumentationDeployment

And more


44/236

Alternative toRake/Cake/Make/Ant


45/236

Huge ecosystem.


46/236

Fantastic for developers and designers.

!


47/236

touch package.json Gruntfile.js


48/236

package.json


49/236

{ "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.


50/236

Gruntfile.js


51/236

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


52/236

$ npm install -g grunt-cli


53/236

$ npm install


54/236

$ grunt

Running jshint:all (jshint) task

Running uglify:build (uglify) task

Done.


55/236

Not bad!


56/236

$ npm install grunt- --save-dev


57/236

task tip

grunt-responsive-images

Create multi-resolution images from

a directory for src-set/srcN

bit.ly/grunt-resp
http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/


58/236

task tip

grunt-contrib-imageoptim

Lower page-weight by applying

optimizations to JPG/PNG/Gif

bit.ly/grunt-image


59/236

speed tip

grunt-concurrent

Speed up build time by concurrently

running tasks like Sass and Coffee.

bit.ly/grunt-conc


60/236


61/236

A first lookat something new Ivebeen hacking on


62/236

grunt-uncss

Remove unused CSS across your

project at build time.

bit.ly/uncss
http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/


63/236

A few weeks ago..


64/236


65/236

Get audits for unused CSS inyour page with DevTools


66/236

Chrome DevTools Audits


67/236

grunt-uncss can removeunused CSS at build time


68/236


69/236

Very early days, but 280KBdown to 40KBof CSS.

What about Bootstrap alone?


70/236

120KB

11KB


71/236


72/236

A package manager for the web.


73/236

1. That lib is 6 months old? Better update.2. Open up the site

3. Download the lib4. Copy from ~/Downloads5. Paste to app folder

6. Wire in with script tags

The old way of doing things.


74/236

New hotness.


75/236

$ npm install -g bower


76/236

$ bower search


77/236

$ bower search angular

Search results:

angular git://github.com/angular/bower-angular.git

angular-mocks git://github.com/angular/bower-angular-mocks.git

angular-resourcegit://github.com/angular/bower-angular-

resource.git

angular-cookies git://github.com/angular/bower-angular-cookies.git

angular-sanitizegit://github.com/angular/bower-angular-

sanitize.git

angular-bootstrap git://github.com/angular-ui/bootstrap-bower.git

........


78/236

$ bower install


79/236

$ bower install angular --save-dev

bower install angular#1.0.8

angular#1.0.8 app/bower_components/angular


80/236

$ bower install

$ bower install

$ bower install #

$ bower install =#


81/236

$ bower list


82/236

$ 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


83/236

Runs over:Git

HTTP(s)Zip

npm


84/236

You can even wire updeps

from the command-line!


85/236


86/236

grunt-bower-install

bit.ly/grunt-bower
http://bower.io/http://bower.io/http://bower.io/http://bower.io/http://bower.io/


87/236

$ npm install grunt-bower install --save-dev

$ bower install jquery --save$ grunt bower-install


88/236

No more worrying aboutscript tags!


89/236


90/236


91/236


92/236

Yo is yourgatewayto this

magical new world.


93/236

It scaffolds out boilerplate.


94/236

Can prescribe helpful Grunt tasks.


95/236

Can automatically install

dependencies you need.


96/236


97/236

$ npm install -g yo


98/236

This installs yo, grunt and bowerfor you.


99/236

$ 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)


100/236

$ 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


101/236

$ yo jquery-boilerplate

create.jshintrc

createCONTRIBUTING.md

createGruntfile.js

createHISTORY.md createboilerplate.jquery.json

createdemo/index.html

createdist/jquery.boilerplate.js

createdist/jquery.boilerplate.min.js createpackage.json

createsrc/jquery.boilerplate.coffee

createsrc/jquery.boilerplate.js


102/236

Boom. You just created a jQueryplugin.


103/236

Installing a custom generator.


104/236

$ npm install generator-bootstrap-g


105/236

$ yo bootstrap

In what format would you like the Twitter

Bootstrap stylesheets? (Use arrow keys)

!css sass

less

stylus


106/236

$ npm install generator-webapp-g


107/236

$ yo webapp

Out of the box I include H5BP and jQuery.

[ ? ] What more would you like?

!Bootstrap for Sass

RequireJS

Modernizr


108/236

Boom. Just created a webapp!


109/236

Boilerplate- H5BP, Bootstrap, ModernizrAbstractions- 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!


110/236


111/236

$ grunt server


112/236

You can now edit and LiveReload!

Make changes. Save. Browser automatically refreshes.


113/236


114/236

Fantastic for getting a real-timeview of application state.


115/236

Edits can also refresh all your

devices. Instant real-devicepreviews.

Cross-device live reload
http://bower.io/


116/236

bit ly/gruntsync


117/236


118/236

What about frameworks?

i t ll t l


119/236

$ npm install generator-angular-g

l


120/236

$ yo angular

[?] Would you like to include Bootstrap? (Y/n)

$ l


121/236

$ yo angular


[?] Would you like to use the SCSS version?

$ l


122/236

$ yo angular


[?] 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


123/236

$ o ang lar: ie ser


124/236

$ yo angular:view user

createapp/views/user.html

$ yo angular:controller user


125/236

$ yo angular:controller user

createapp/scripts/controllers/user.js

createtest/spec/controllers/user.js

$ yo angular:directive mydirective


126/236

$ yo angular:directive mydirective

createapp/scripts/directives/mydirective.js

createtest/spec/directives/mydirective.js

$ bower install angular local storage


127/236

$ bower install angular-local-storage

createapp/scripts/directives/mydirective.js

createtest/spec/directives/mydirective.js


128/236

You just created an Angularapp with dependencies

$ yo express angular


129/236

$ yo express-angular

AngularJS + Expressbackend


130/236

Generators also available for:

BackboneEmberPolymerFlightCanJS& many other frameworks.

$ yo jekyllrb


131/236

$ 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

$ yo chrome extension
mailto:[email protected]:[email protected]:[email protected]


132/236

$ 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


133/236


134/236


135/236

Demo apps built with Yeoman?


136/236

http://bit.ly/yeomandemo
http://bit.ly/yeomandemohttp://bit.ly/yeomandemo


137/236

Work less. Do more.

Make awesome.


138/236

How can we improve the

rest of your workflow?

Learn to love the command line


139/236

Learn to love the command-line


140/236

It isnt scary. You know how to

use PhotoShops 3000 buttons.Thats scary!


141/236

$ server


142/236

$server

python -m SimpleHTTPServer

Start up a new local server


143/236

$ gitexport


144/236

$gitexport

function gitexport(){ mkdir -p "$1" git archive master | tar -x -C "$1"}

Copy a local checkout without the .git stuff

Terminal Replay (iTerm 2)


145/236

TotalTerminalA system-wide terminal available via a hot-key


146/236

A system wide terminal available via a hot key

bit.ly/totalterminal

@climagic


147/236


148/236

Do things more quickly.


149/236

Alfred.app

Alfred Workflowsbitl / lf d kfl
https://github.com/zenorocha/alfred-workflows


150/236

Find apps, filesFind packages on npm

Build tasks

bit.ly/alfredworkflows

Alfred Workflowsbitl / lf d kfl
https://github.com/zenorocha/alfred-workflowshttps://github.com/zenorocha/alfred-workflowshttps://github.com/zenorocha/alfred-workflows


151/236

bit.ly/alfredworkflows

Browser compatibility searchFind documentation on Dash

Font awesome search

Windows? Try Launchy.
https://github.com/zenorocha/alfred-workflowshttps://github.com/zenorocha/alfred-workflowshttp://bower.io/


152/236

launchy.net

AutomatorPoint-and-clickautomationof repetitive tasks
http://bower.io/http://bower.io/http://bower.io/


153/236

Point and click automation of repetitive tasks


154/236

bit.ly/macrorecorder


155/236

Next, lets look at your editor.

Know yours inside out.


156/236

Shortcuts are incredibly powerful.


157/236

Sublime AutoprefixerWrite CSS without the prefixes!


158/236

p

bit.ly/autoprefixer

Emmet (Zen Coding)


159/236

bit.ly/emmet-sublime


160/236

Sublime TernJSSmarter code completion, contextual jump to definition.


161/236

bit.ly/sublime-tern

Sublime Build SystemCall tools from your editor. Get feedback in the console.


162/236

bit.ly/sublime-grunt

SublimeLinterLive linterfeedback as you code


163/236

bit.ly/sublime-linter


164/236

Develop and debug in thebrowser

Chrome DevToolsAn improved find and fix workflow.


165/236

devtools.chrome.com

WorkspacesAdd and edit local projects. Breakpoints persist. Debug in-place.


166/236

New!Create New Files


167/236

Sass Source Maps


168/236

New!Less Source Maps


169/236


170/236

New!Ignoring library code


171/236

New!DevTools Terminalnpm, git and all your favorite cli tools with this extension


172/236


173/236

bit.ly/devtools-terminal
http://bit.ly/devtools-terminalhttp://bit.ly/devtools-terminalhttp://bit.ly/devtools-terminalhttp://bit.ly/devtools-terminal


174/236


175/236

What about better integrationbetween tools?

Sublime Web InspectorDebugger. Breakpoints. Console. Evaluate call frames.


176/236

bit.ly/sublime-inspector

Emmet LiveStyleEdit CSS. See changes live in Chrome *without* a browser refresh.


177/236

livestyle.emmet.io

Adobe BracketsBi-directional HTML live editing with Chrome.


178/236

brackets.io


179/236

bit.ly/webstormide

WebStorm: Live Edit


180/236

WebStorm: Debug with Chrome


181/236


182/236

LightTable
http://bower.io/


183/236

lighttable.com

Sublime jsRunR JS i Ch f S bli


184/236

Run JSin Chrome from Sublime

bit.ly/sublime-jsrun

TailorBrackets + Git for ChromeOS


185/236

Synchronized cross-device


186/236

testing

Re-checking your site on mobile is a pain


187/236

How does this fit into your workflow?


188/236


189/236

Navigate all devices to the

same URL

A lo-fi, free option

Remote Preview


190/236

, p

Remote Preview


191/236

! [+] 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


192/236

Synchronize navigation &

get screenshots.

Adobe Edge Inspect CC


193/236


194/236

Adobe Edge Inspect


195/236

! [-] One device at a time

! [-] Displays site in a WebView

! [+] Supports live reload

! [+] Extension to load any page you view in Chrome

! [-] Cant account for localhost (i.e. switch to ip addr. ofmachine on local network)

! [+] Remote Inspect via Weinre

bit.ly/edgeinspect


196/236

Refresh all devices on edit

Grunt + LiveReload


197/236

Grunt + LiveReload


198/236

! [+] 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


199/236

Synchronize scrolls, clicks,

interactions as well as navigation

GhostLab


200/236

Sync desktop & mobile navigation


201/236

Sync navigation across *all* your devices


202/236

Sync clicks, scrolls and other interactions


203/236

Ghostlab


204/236

! [+] 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

Mobile Debugging


205/236

DevTools Remote Debugging


206/236

New!RAW USB Debugging


207/236

jsConsole


208/236

bit.ly/jsconsole

js Hybugger


209/236

jshybugger.com

iOS WebKit Debug Proxy


210/236

bit.ly/webkitdebug


211/236

MIHTool

bit.ly/mihtool

Visual regression testing


212/236

Wraith


213/236

bit.ly/wraithapp

Huxley


214/236

bit.ly/huxleyapp

PhantomCSS


215/236

bit.ly/phantomcss

Simulate real-networkconditions


216/236

conditions


217/236

charlesproxy.com

Network Link Conditioner


218/236


219/236

slowyapp.com

Fiddler


220/236

fiddler2.com

Netwem, WANEm (Linux)


221/236

bit.ly/linuxnetem


222/236

Simulators & Emulators

Open Device Labs


223/236

Screenshots or live testing?


224/236

SimulatorsMassive, well-maintained list of emulators & simulators available


225/236

bit.ly/simulatorlist

Are emulators enough?


226/236

Do I even need an emulator?Chrome DevTools Overrides


227/236

Emulate touch events


228/236

Emulate screens


229/236

Emulate device orientation


230/236

Emulate Geolocation


231/236


232/236

To learn more checkout our DevTools

docs at devtools.chrome.com


233/236

If you aren't using automation,

you are working too hard

Remember


234/236

Use tools. not rules.


235/236

Improveyourdeveloper

happiness


236/236

Thank you.

automating front-end workflow by addy osmani

Documents