Save 37% off PRO during our Black Friday Sale! »

Automating Front-end Workflow

Automating Front-end Workflow

Writing a modern web app these days can sometimes feel like a tedious process; frameworks, boilerplates, abstractions, dependency management, build processes..the list of requirements for a front-end workflow appears to grow each year.

What if however, you could automate a lot of this? This talk introduces you to a new workflow of tools to keep you productive on the front-end.

Learn about:
- Yeoman, Grunt and Bower
- Brand new features in Chrome DevTools
- Alfred workflows
- Tools for live editing and debugging CSS/JS/HTML with Chrome
- Productivity tools for Sublime
- Tools for synchronised cross-device mobile testing
- Network throttling tools
- Visual regression testing tools
and much more.

Keynote from FOWA 2013.


Addy Osmani

October 25, 2013



  2. Trying to develop for the web today is a little

  3. None
  4. Our tooling landscape is getting more complex.

  5. Boilerplate Abstractions Frameworks Testing Docs Workflow Dependency management Performance optimization

    Build Continuous Integration Deployment Version control

  7. The first rule of tooling is “Thou shalt not make

    @paul_irish cry”
  8. Choose tools you’ll use. The second is..

  9. Time is a key factor in staying productive.

  10. None
  11. Automate repetitive tasks to stay effective.

  12. None
  13. Automation isn’t about being lazy. It’s about being efficient.

  14. Steve Wozniak

  15. The right tools make the difference between an artist and

    a craftsman.
  16. None
  17. The average front-end workflow today

  18. Setup Scaffolding Download libraries Download templates Download frameworks

  19. Develop Watch Sass / Less / Stylus Watch CoffeeScript Watch

    Jade / Haml LiveReload JS / CSS Linting
  20. Code linting Running unit tests Compile everything Minify and concatenate

    Generate images / icons Optimize performance HTTP Server Deployment Build
  21. Automate this workflow for simple projects

  22. Workflow tools


  24. Win/Mac

  25. W/M/L

  26. Win/Mac


  28. Win/Mac

  29. So happy. I may just cry.

  30. Iterative improvement.

  31. First do it. Then do it right. Then do it

  32. None
  33. better?

  34. Automate workflow for all types of projects.

  35. None
  36. Scaffold, write less with Yo Build, preview and test with

    Grunt Manage dependencies with Bower
  37. None
  38. Flexibility to customize your setup as much as you desire.

  39. Limit the time spent writing boilerplate.

  40. Improve your productivity and delight during development.

  41. None
  42. Helps run repetitive tasks.

  43. Linting Compiling Minification Testing Conversion Documentation Deployment And more

  44. Alternative to Rake/Cake/Make/Ant

  45. Huge ecosystem.

  46. Fantastic for developers and designers. ♥

  47. touch package.json Gruntfile.js

  48. package.json

  49. { ! "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. Gruntfile.js

  51. 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. $ npm install -g grunt-cli

  53. $ npm install

  54. $ grunt Running “jshint:all” (jshint) task Running “uglify:build” (uglify) task

  55. Not bad!

  56. $ npm install grunt-<taskname> --save-dev

  57. task tip grunt-responsive-images Create multi-resolution images from a directory for

  58. task tip grunt-contrib-imageoptim Lower page-weight by applying optimizations to JPG/PNG/Gif
  59. speed tip grunt-concurrent Speed up build time by concurrently running

    tasks like Sass and Coffee.
  60. speed tip grunt-newer Run tasks on only source files modified

    since the last run.
  61. A first look at something new I’ve been hacking on

  62. grunt-uncss Remove unused CSS across your project at build time.
  63. A few weeks ago..

  64. None
  65. Get audits for unused CSS in your page with DevTools

  66. Chrome DevTools Audits

  67. grunt-uncss can remove unused CSS at build time

  68. None
  69. Very early days, but 280KB down to 40KB of CSS.

  70. 120KB 11KB What about Bootstrap alone?

  71. None
  72. A package manager for the web.

  73. 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.
  74. New hotness.

  75. $ npm install -g bower

  76. $ bower search

  77. $ bower search angular Search results: angular git:// angular-mocks git://

    angular-resource git:// resource.git angular-cookies git:// angular-sanitize git:// sanitize.git angular-bootstrap git:// ........
  78. $ bower install

  79. $ bower install angular --save-dev bower install angular#1.0.8 angular#1.0.8 app/bower_components/angular

  80. $ bower install $ bower install <package> $ bower install

    <package>#<version> $ bower install <name>=<package>#<version>
  81. $ bower list

  82. $ 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. Runs over: Git HTTP(s) Zip npm

  84. You can even wire up deps from the command-line!

  85. None
  86. grunt-bower-install

  87. $ npm install grunt-bower install --save-dev $ bower install jquery

    --save $ grunt bower-install
  88. No more worrying about script tags!

  89. http:/ /


  91. None
  92. Yo is your gateway to this magical new world.

  93. It scaffolds out boilerplate.

  94. Can prescribe helpful Grunt tasks.

  95. Can automatically install dependencies you need.

  96. None
  97. $ npm install -g yo

  98. This installs yo, grunt and bower for you.

  99. $ 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. $ 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. $ yo jquery-boilerplate create .jshintrc create create Gruntfile.js create create boilerplate.jquery.json create demo/index.html create dist/jquery.boilerplate.js create dist/jquery.boilerplate.min.js create package.json create src/ create src/jquery.boilerplate.js
  102. Boom. You just created a jQuery plugin.

  103. Installing a custom generator.

  104. $ npm install generator-bootstrap -g

  105. $ yo bootstrap In what format would you like the

    Twitter Bootstrap stylesheets? (Use arrow keys) ›❯ css sass less stylus
  106. $ npm install generator-webapp -g

  107. $ yo webapp Out of the box I include H5BP

    and jQuery. [ ? ] What more would you like? ›❯ Bootstrap for Sass RequireJS Modernizr
  108. None
  109. 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!
  110. None
  111. $ grunt server

  112. You can now edit and LiveReload!

  113. Make changes. Save. Browser automatically refreshes.

  114. Fantastic for getting a real-time view of application state.

  115. Edits can also refresh all your devices. Instant real-device previews.

  116. Cross-device live reload

  117. None
  118. What about frameworks?

  119. $ npm install generator-angular -g

  120. $ yo angular [?] Would you like to include Bootstrap?

  121. $ yo angular [?] Would you like to include Bootstrap?

    (Y/n) [?] Would you like to use the SCSS version?
  122. $ 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 <space> to select) ›❯ angular-resource.js angular-cookies.js angular-sanitize.js
  123. None
  124. $ yo angular:view user create app/views/user.html

  125. $ yo angular:controller user create app/scripts/controllers/user.js create test/spec/controllers/user.js

  126. $ yo angular:directive mydirective create app/scripts/directives/mydirective.js create test/spec/directives/mydirective.js

  127. $ bower install angular-local-storage create app/scripts/directives/mydirective.js create test/spec/directives/mydirective.js

  128. You just created an Angular app with dependencies

  129. $ yo express-angular AngularJS + Express backend

  130. Generators also available for: Backbone Ember Polymer Flight CanJS &

    many other frameworks.
  131. $ yo jekyllrb Tell us a little about yourself. ☛

    [?] Name: Addy Osmani [?] Email: [?] GitHub username: addyosmani [?] Twitter username: @addyosmani Wire tools and preprocessors. ☛ [?] CSS preprocessor: Sass [?] Use Autoprefixer? Yes [?] Javascript preprocessor: Coffeescript ›❯ None
  132. $ 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 <space> to select) ›❯ Tabs Bookmarks Cookies History Management
  133. $ 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.
  134. http:/ /

  135. Generator search

  136. Demo apps built with Yeoman? http:/ /

  137. Work less. Do more. Make awesome.

  138. How can we improve the rest of your workflow?

  139. Learn to love the command-line

  140. It isn’t scary. You know how to use PhotoShop’s 3000

    buttons. That’s scary!
  141. Script common tasks

  142. $ server python -m SimpleHTTPServer Start up a new local

  143. $ clone Clone a repo easily, cd into it, open

    up sublime
  144. $ gitexport function gitexport(){ mkdir -p "$1" git archive master

    | tar -x -C "$1" } Copy a local checkout without the .git stuff
  145. Terminal Replay (iTerm 2)

  146. TotalTerminal A system-wide terminal available via a hot-key

  147. @climagic

  148. Do things more quickly.


  150. Alfred Workflows Find apps, files Find packages on npm Build

  151. Alfred Workflows Browser compatibility search Find documentation on Dash

    Font awesome search
  152. Windows? Try Launchy.

  153. Automator Point-and-click automation of repetitive tasks


  155. Next, let’s look at your editor.

  156. Know yours inside out.

  157. Shortcuts are incredibly powerful.

  158. Sublime Autoprefixer Write CSS without the prefixes!

  159. Emmet (Zen Coding)

  160. STProjectMaker Easily reuse your boilerplates

  161. Sublime TernJS Smarter code completion, contextual jump to definition.

  162. Sublime Build System Call tools from your editor. Get

    feedback in the console.
  163. SublimeLinter Live linter feedback as you code

  164. Develop and debug in the browser

  165. Chrome DevTools An improved find and fix workflow.

  166. Workspaces Add and edit local projects. Breakpoints persist. Debug in-place.

  167. New! Create New Files

  168. Sass Source Maps

  169. New! Less Source Maps

  170. New! CSS Pretty-printing

  171. New! Ignoring library code

  172. New! DevTools Terminal npm, git and all your favorite cli

    tools with this extension

  174. None
  175. What about better integration between tools?

  176. Sublime Web Inspector Debugger. Breakpoints. Console. Evaluate call frames.

  177. Emmet LiveStyle Edit CSS. See changes live in Chrome *without*

    a browser refresh.
  178. Adobe Brackets Bi-directional HTML live editing with Chrome.


  180. WebStorm: Live Edit

  181. WebStorm: Debug with Chrome

  182. WebStorm 7 npm search! built-in terminal web components & more.

  183. LightTable

  184. Sublime jsRun Run JS in Chrome from Sublime

  185. Tailor Brackets + Git for ChromeOS

  186. Synchronized cross-device testing

  187. Re-checking your site on mobile is a pain

  188. How does this fit into your workflow?

  189. Navigate all devices to the same URL

  190. A lo-fi, free option Remote Preview

  191. 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
  192. Synchronize navigation & get screenshots.

  193. Adobe Edge Inspect CC

  194. None
  195. 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
  196. Refresh all devices on edit

  197. Grunt + LiveReload

  198. 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
  199. Synchronize scrolls, clicks, interactions as well as navigation

  200. GhostLab

  201. Sync desktop & mobile navigation

  202. Sync navigation across *all* your devices

  203. Sync clicks, scrolls and other interactions

  204. 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
  205. Mobile Debugging

  206. DevTools Remote Debugging

  207. New! RAW USB Debugging

  208. jsConsole

  209. js Hybugger

  210. iOS WebKit Debug Proxy

  211. MIHTool

  212. Visual regression testing

  213. Wraith

  214. Huxley

  215. PhantomCSS

  216. Simulate real-network conditions


  218. Network Link Conditioner


  220. Fiddler

  221. Netwem, WANEm (Linux)

  222. Simulators & Emulators

  223. Open Device Labs

  224. Screenshots or live testing?

  225. Simulators Massive, well-maintained list of emulators & simulators available

  226. Are emulators enough?

  227. Do I even need an emulator? Chrome DevTools Overrides

  228. Emulate touch events

  229. Emulate screens

  230. Emulate device orientation

  231. Emulate Geolocation

  232. To learn more checkout our DevTools docs at

  233. If you aren't using automation, you are working too hard

  234. Use tools. not rules.

  235. Improve your developer happiness

  236. Thank you.