Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Front-end Tooling Workflows

96270e4c3e5e9806cf7245475c00b275?s=47 Addy Osmani
November 09, 2014

Front-end Tooling Workflows

~ 198 slides on tools to help you stay productive on the front-end.


Addy Osmani

November 09, 2014

More Decks by Addy Osmani

Other Decks in Programming


  1. FRONT-END TOOLING +AddyOsmani @addyosmani WORKFLOWS

  2. ! Building for the web sometimes feels like…

  3. None
  4. None
  5. Time is a key factor in staying productive. Use yours

  6. Better tooling can be simple. Can DevTools help us emulate

    real devices?
  7. It can be as simple as opting for emulation when

    a real-device isn’t needed for testing.
  8. Throttle network speed Toggle between devices

  9. Having tools refresh device URLs for you BrowserSync Scrolls Clicks

    Refresh Forms Synchronise:
  10. Previewing all your breakpoints at once Emmett Re:View

  11. or automating style guide conformance checking Highlight issues Fix to

    match the Style Guide JSCS for Sublime Text
  12. $ 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 <keyword> Use Spotlight to search from command-line Tooling can be weird..and wonderful.
  13. React DevTools It can extend your debugging experience ES6 REPL

    Angular Batarang Gradient Inspector Tamper (modify requests before serving)
  14. 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
  15. 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
  16. Sip Color Picker Or just improve your workflow. Chrome DevTools

    Eye Dropper
  17. Automation is having tools do the tedious work, so you

    don’t have to.
  18. If you aren’t using productivity tools or task automation, you

    are working too hard
  19. Our tools are like onions. Peel back the layers to

    discover more functionality.
  20. None
  21. Learn to love the command-line

  22. ! ! $ git clone ▌ $ sublime . Improve

    your command-line skills
  23. Learn to love and use shortcuts. Ctrl A + Go

    to the start of the line Ctrl E + Go to the end of the line
  24. iTerm2.x for Mac Replay command history Autocomplete Paste history Open

    with a global shortcut
  25. Zsh Pure - minimal prompt Prezto - config framework for

    Zsh Customisable alternative to Bash See http://jilles.me/badassify-your-terminal-and-shell/
  26. cmder for Windows Slick console with enhancements spiced with Monokai

    colours and a custom prompt layout
  27. Many CLI apps to augment your workflow e.g PageRes for

    generating responsive screenshots from the command-line
  28. Learn to use dot files to alias common tasks in

    your workflow
  29. None
  30. ! addyo at addyo-macbook in ~/projects/ on master* ! $

    server ▌ $ clone $ tree $ fs $ gz Customise Dotfiles (theme, .aliases, .functions)
  31. Learn to extend your tools

  32. CSS & Sass Color Highlighter

  33. Gutter Color ColorPicker

  34. AutoFilename

  35. JSHint Gutter Linter

  36. GitGutter

  37. Enforce code style with JSCS Code Style Configuration

  38. Emmett for HTML Type a one-liner HTML generated just hit

  39. Navigate quickly to any file ⌘ P +

  40. Navigate to any symbol ⌘ R +

  41. Pick a theme that helps you focus

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

  43. which is a port of Seti UI Theme (for Atom

    Editor) Per-tool icons ! (e.g Grunt, Gulp)
  44. Maybe someday write your tools

  45. Sublime FixMyJS

  46. None
  47. Build Tools

  48. What do we build?

  49. <div class=“paper-button” id="go" disabled>Go!</div> HTML .paper-button { background-color: red; }

    CSS document.querySelector('.paper-button') .addEventListener('click', function(e) { // your code here }, false); JavaScript
  50. sass input.scss output.css sass watch Pre-processors Sass CSS

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

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

  53. Why do we build?

  54. Productivity & performance

  55. soup.io The web

  56. HTTPArchive - October 2014 reports 1944KB Average page size 1.9MB

    ~1.2MB images ~0.35MB scripts & styles
  57. TMI (Too Many Images) http://github.com/addyosmani/tmi

  58. 300-1000ms 1 second + 10 seconds + Later. 0-100ms Human

    Perception in 2014
  59. None
  60. Automating performance improvement

  61. When you want to be fast, you have to give

    up the things slowing you down.
  62. (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
  63. JSConf.eu Old Speed Index 2149

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

    Index 1310
  65. How do we build?

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

    Build Continuous Integration Deployment Version control
  67. Setup ! Scaffolding HTML5 Boilerplate ! Download libraries Twitter Bootstrap

    Download templates Layouts ! Download frameworks Angular, Polymer, Ember.
  68. Develop ! Watch Sass, Less, Stylus CoffeeScript, ECMAScript 6 Jade,

    Haml ! ! LiveReload Refresh pages
 Linting JavaScript CSS Style linting
  69. Build ! Code linting Running unit tests Compile everything Minify

    and concatenate Generate images / icons Optimize performance HTTP Server Deployment
  70. Automate workflow for simple projects

  71. CodeKit

  72. Hammer for Mac

  73. Prepros

  74. Automate workflow for all types of projects

  75. Build Tools Make

  76. Why use a task runner or build system? Automation

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

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

  79. None
  80. What are Gulp and Grunt?

  81. Grunt and Gulp Task runner Streaming build system

  82. How are they different? ! Based on files Configuration over

    code ! Based on streams Code over configuration
  83. Get files Modify them Make new ones Win Creating this

  84. Typical Grunt task Read files Modify Write files ! !

    File system ! ! Temp Read files Modify Write files ! ! Temp Read files Modify
  85. Gulp uses streams Read files Modify ! ! File system

    Modify Modify Modify Write files ! ! File system
  86. Task automation with Gulp

  87. 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
  88. Gulp in a nutshell Install Gulp globally Create package file

    Install dependent packages Add tasks to your Gulp file Load tasks into Gulp
  89. Create your package.json file Prompts for your author, package name

    and the basics. $ npm init
  90. Install Gulp locally to the package.json file $ npm install

    gulp —save-dev —save-dev for development —save for production
  91. Gulp plugins use streams

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

  93. 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
  94. package.json to manage dependencies

  95. Good news! There’s only 4 API methods

  96. Gulp’s API

  97. ! ! ! 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
  98. ! ! ! 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)
  99. ! ! ! 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)
  100. e.g Minifying JavaScript

  101. ! 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
  102. ! 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
  103. ! 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
  104. ! 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
  105. ! 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
  106. File System Uglify app.js dist/ app.js gulp.src

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

    function when the glob changes gulp.watch(glob, fn);
  108. You’re a Gulp pro now! task src dest watch

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

  110. Gulpfile.js

  111. $ gulp <mytask> Run from the terminal or command prompt

    Running Gulp
  112. 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!
  113. Task dependency chains

  114. Task automation with Grunt

  115. How are they different? ! Based on files Configuration over

    code ! Based on streams Code over configuration
  116. 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
  117. Grunt in a nutshell Install CLI Create package file Install

    dependent packages Config tasks in Gruntfile.js Load tasks into Grunt Register custom tasks
  118. Create your package.json file Prompts for your author, package name

    and the basics. $ npm init
  119. Install Grunt locally to the package.json file $ npm install

    grunt —save-dev —save-dev for development
  120. 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.”
  121. Install package dependencies $ npm install grunt-contrib-jshint grunt-contrib-cssmin —save-dev Install

    one or more tasks contrib tasks are officially maintained
  122. package.json to manage dependencies

  123. Gruntfile.js • Your task configuration • JSON Style • Load

    the plugins Summary
  124. Grunt overview • Task configuration • Task loading • Register

    custom tasks • Grunt wrapper
  125. Grunt overview • Grunt wrapper • Task configuration • Task

    loading • Register custom tasks
  126. Task configuration

  127. Task configuration

  128. Gruntfile.js

  129. Load Tasks Load npm tasks into Grunt Task names

  130. Custom tasks Custom task name Tasks to run

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

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

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

  134. 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
  135. npm as a front-end task runner?

  136. "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
  137. Build tool helpers

  138. Gulp DevTools

  139. Gulp App

  140. Grunt DevTools

  141. Editors + Web Starter Kit

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

  143. Useful build tasks

  144. grunt-concurrent (concurrency is default in Gulp) ! ! ! !

    Speed up build time by concurrently running tasks like Sass and Coffee.
  145. grunt-newer (or gulp-changed) ! ! ! Only run tasks on

    source files that have been modified since the last run.
  146. None
  147. None
  148. None
  149. 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
  150. Optimize Critical Path CSS

  151. 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!
  152. 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
  153. None
  154. Extract stylesheets ! (Oust) Generate Critical path CSS for a

    viewport ! (Penthouse) Inline styles in <head> ! (inline-critical) Output Source Critical’s workflow Inject loadCSS & async load site.css Wrap link tags in <noscript> for users with JS disabled
  155. 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
  156. Continuous performance benchmarking

  157. WebPageTest CLI $ npm install -g webpagetest Install $ webpagetest

    test <url> $ webpagetest test <url> -- wait 8000 Usage Jenkins
  158. 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
  159. Smarter package management

  160. npm as a front-end package manager?

  161. Will we see a shift in 2015?

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

  163. Find packages that work in both the client and server-side

    easily BrowserifySearch.org
  164. Front-end package management for today Bower

  165. 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
  166. $ bower install jquery Installing jQuery with Bower

  167. 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
  168. None
  169. Find packages • Find a library ! ! • Lists

    all the available libraries by that name Package manager for the web $ bower search <thing>
  170. Install packages • Install a library ! Package manager for

    the web $ bower install <thing>
  171. Yeoman

  172. Yeoman kickstarts new projects, prescribing best practices and tools to

    help you stay productive yeoman.io
  173. None
  174. Scaffolding a project quickly

  175. Subtitle

  176. Yo Grunt / Gulp Bower Scaffolding Build system Package manager

  177. Generators • Over 1000 available today • Anyone can write

  178. Subtitle

  179. Subtitle

  180. Installation • Download and install NodeJS · Available for all

    major operating systems • Install Yo as a global utility $ npm install -g yo
  181. ! ! $ npm install -g generator-webapp ▌ ! Install

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

    a generator
  183. ! ! $ yo webapp ▌ Usage ! Yo!

  184. Subtitle

  185. Subtitle

  186. None
  187. None
  188. ! $ 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
  189. <Web Starter Kit>

  190. github.com/google/web-starter-kit

  191. None
  192. None
  193. None
  194. None
  195. > gulp pagespeed

  196. Choose tools you’ll use. Add tools & abstractions when they

    improve your productivity.
  197. 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
  198. ! Create Consume Refine Relax #ToolsNotRules

  199. <thank-you> +AddyOsmani @addyosmani