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

Front-end Tooling Workflows

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
Tweet

More Decks by Addy Osmani

Other Decks in Programming

Transcript

  1. FRONT-END TOOLING
    +AddyOsmani
    @addyosmani
    WORKFLOWS

    View Slide

  2. !
    Building for the web
    sometimes feels like…

    View Slide

  3. View Slide

  4. View Slide

  5. Time is a key factor in staying productive.
    Use yours efficiently.

    View Slide

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

    View Slide

  7. It can be as simple as opting for
    emulation when a real-device isn’t needed
    for testing.

    View Slide

  8. Throttle network speed
    Toggle between devices

    View Slide

  9. Having tools refresh device URLs for you
    BrowserSync
    Scrolls
    Clicks
    Refresh
    Forms
    Synchronise:

    View Slide

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

    View Slide

  11. or automating style guide conformance checking
    Highlight issues
    Fix to match the Style Guide
    JSCS for Sublime Text

    View Slide

  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
    Use Spotlight to search from command-line
    Tooling can be weird..and wonderful.

    View Slide

  13. React DevTools
    It can extend your debugging experience
    ES6 REPL
    Angular Batarang
    Gradient Inspector Tamper (modify requests before serving)

    View Slide

  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

    View Slide

  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

    View Slide

  16. Sip Color Picker
    Or just improve your workflow.
    Chrome DevTools Eye Dropper

    View Slide

  17. Automation is having tools do the
    tedious work, so you don’t have to.

    View Slide

  18. If you aren’t using productivity tools
    or task automation, you are working
    too hard

    View Slide

  19. Our tools are like onions.
    Peel back the layers to discover more functionality.

    View Slide

  20. View Slide

  21. Learn to love the command-line

    View Slide

  22. !
    !
    $ git clone ▌
    $ sublime .
    Improve your command-line skills

    View Slide

  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

    View Slide

  24. iTerm2.x for Mac
    Replay command history
    Autocomplete
    Paste history
    Open with a
    global shortcut

    View Slide

  25. Zsh
    Pure - minimal prompt
    Prezto - config framework for Zsh
    Customisable alternative to Bash
    See http://jilles.me/badassify-your-terminal-and-shell/

    View Slide

  26. cmder for Windows
    Slick console with enhancements spiced with Monokai colours and a custom prompt layout

    View Slide

  27. Many CLI apps to augment your workflow
    e.g PageRes for generating responsive screenshots from the command-line

    View Slide

  28. Learn to use dot files to alias common
    tasks in your workflow

    View Slide

  29. View Slide

  30. !
    addyo at addyo-macbook in ~/projects/ on master*
    !
    $ server ▌
    $ clone
    $ tree
    $ fs
    $ gz
    Customise Dotfiles (theme, .aliases, .functions)

    View Slide

  31. Learn to extend your tools

    View Slide

  32. CSS & Sass
    Color Highlighter

    View Slide

  33. Gutter Color ColorPicker

    View Slide

  34. AutoFilename

    View Slide

  35. JSHint Gutter Linter

    View Slide

  36. GitGutter

    View Slide

  37. Enforce code style with JSCS
    Code Style Configuration

    View Slide

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

    View Slide

  39. Navigate quickly to any file ⌘ P
    +

    View Slide

  40. Navigate to any symbol ⌘ R
    +

    View Slide

  41. Pick a theme that helps you focus

    View Slide

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

    View Slide

  43. which is a port of Seti UI Theme (for Atom Editor)
    Per-tool icons
    !
    (e.g Grunt, Gulp)

    View Slide

  44. Maybe someday write your tools

    View Slide

  45. Sublime
    FixMyJS

    View Slide

  46. View Slide

  47. Build Tools

    View Slide

  48. What do we build?

    View Slide

  49. Go!
    HTML
    .paper-button {
    background-color: red;
    }
    CSS
    document.querySelector('.paper-button')
    .addEventListener('click', function(e) {
    // your code here
    }, false);
    JavaScript

    View Slide

  50. sass input.scss output.css
    sass watch
    Pre-processors
    Sass CSS

    View Slide

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

    View Slide

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

    View Slide

  53. Why do we build?

    View Slide

  54. Productivity & performance

    View Slide

  55. soup.io
    The web

    View Slide

  56. HTTPArchive - October 2014 reports 1944KB
    Average page size
    1.9MB
    ~1.2MB images
    ~0.35MB scripts &
    styles

    View Slide

  57. TMI (Too Many Images)
    http://github.com/addyosmani/tmi

    View Slide

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

    View Slide

  59. View Slide

  60. Automating performance
    improvement

    View Slide

  61. When you want to be fast, you have to
    give up the things slowing you down.

    View Slide

  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

    View Slide

  63. JSConf.eu Old Speed Index
    2149

    View Slide

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

    View Slide

  65. How do we build?

    View Slide

  66. Boilerplate Abstractions Frameworks
    Testing Docs Workflow Dependency
    management Performance
    optimization Build Continuous
    Integration Deployment Version control

    View Slide

  67. Setup
    !
    Scaffolding
    HTML5 Boilerplate
    !
    Download libraries
    Twitter Bootstrap

    Download templates
    Layouts
    !
    Download frameworks
    Angular, Polymer, Ember.

    View Slide

  68. Develop
    !
    Watch
    Sass, Less, Stylus
    CoffeeScript, ECMAScript 6
    Jade, Haml
    !
    !
    LiveReload
    Refresh pages

    Linting
    JavaScript
    CSS
    Style linting

    View Slide

  69. Build
    !
    Code linting
    Running unit tests
    Compile everything
    Minify and concatenate
    Generate images / icons
    Optimize performance
    HTTP Server
    Deployment

    View Slide

  70. Automate workflow for
    simple projects

    View Slide

  71. CodeKit

    View Slide

  72. Hammer for Mac

    View Slide

  73. Prepros

    View Slide

  74. Automate workflow for
    all types of projects

    View Slide

  75. Build Tools
    Make

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  79. View Slide

  80. What are Gulp and Grunt?

    View Slide

  81. Grunt and Gulp
    Task runner Streaming build
    system

    View Slide

  82. How are they different?
    !
    Based on files
    Configuration over code
    !
    Based on streams
    Code over configuration

    View Slide

  83. Get files Modify
    them
    Make new
    ones
    Win
    Creating this workflow

    View Slide

  84. Typical Grunt task
    Read files Modify Write files
    !
    !
    File system
    !
    !
    Temp
    Read files Modify Write files
    !
    !
    Temp
    Read files Modify

    View Slide

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

    View Slide

  86. Task automation with Gulp

    View Slide

  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

    View Slide

  88. Gulp in a nutshell
    Install Gulp
    globally
    Create
    package
    file
    Install
    dependent
    packages
    Add tasks
    to your
    Gulp file
    Load
    tasks into
    Gulp

    View Slide

  89. Create your package.json file
    Prompts for your author, package
    name and the basics.
    $ npm init

    View Slide

  90. Install Gulp locally to the package.json file
    $ npm install gulp —save-dev
    —save-dev for
    development
    —save for
    production

    View Slide

  91. Gulp plugins use streams

    View Slide

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

    View Slide

  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

    View Slide

  94. package.json to manage dependencies

    View Slide

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

    View Slide

  96. Gulp’s API

    View Slide

  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

    View Slide

  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)

    View Slide

  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)

    View Slide

  100. e.g Minifying JavaScript

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  106. File System
    Uglify
    app.js
    dist/
    app.js
    gulp.src

    View Slide

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

    View Slide

  108. You’re a Gulp pro now!
    task
    src
    dest
    watch

    View Slide

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

    View Slide

  110. Gulpfile.js

    View Slide

  111. $ gulp
    Run from the terminal or
    command prompt
    Running Gulp

    View Slide

  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!

    View Slide

  113. Task dependency chains

    View Slide

  114. Task automation with Grunt

    View Slide

  115. How are they different?
    !
    Based on files
    Configuration over code
    !
    Based on streams
    Code over configuration

    View Slide

  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

    View Slide

  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

    View Slide

  118. Create your package.json file
    Prompts for your author, package
    name and the basics.
    $ npm init

    View Slide

  119. Install Grunt locally to the package.json file
    $ npm install grunt —save-dev
    —save-dev for
    development

    View Slide

  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.”

    View Slide

  121. Install package dependencies
    $ npm install grunt-contrib-jshint grunt-contrib-cssmin —save-dev
    Install one or more tasks
    contrib tasks are officially
    maintained

    View Slide

  122. package.json to manage dependencies

    View Slide

  123. Gruntfile.js
    • Your task configuration
    • JSON Style
    • Load the plugins
    Summary

    View Slide

  124. Grunt overview
    • Task configuration
    • Task loading
    • Register custom tasks
    • Grunt wrapper

    View Slide

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

    View Slide

  126. Task configuration

    View Slide

  127. Task configuration

    View Slide

  128. Gruntfile.js

    View Slide

  129. Load Tasks
    Load npm tasks into
    Grunt
    Task names

    View Slide

  130. Custom tasks
    Custom task name
    Tasks to run

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  135. npm as a front-end task runner?

    View Slide

  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

    View Slide

  137. Build tool helpers

    View Slide

  138. Gulp DevTools

    View Slide

  139. Gulp App

    View Slide

  140. Grunt DevTools

    View Slide

  141. Editors + Web Starter Kit

    View Slide

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

    View Slide

  143. Useful build tasks

    View Slide

  144. grunt-concurrent (concurrency is default in Gulp)
    !
    !
    !
    !
    Speed up build time by concurrently running
    tasks like Sass and Coffee.

    View Slide

  145. grunt-newer (or gulp-changed)
    !
    !
    !
    Only run tasks on source files that have been
    modified since the last run.

    View Slide

  146. View Slide

  147. View Slide

  148. View Slide

  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

    View Slide

  150. Optimize Critical Path CSS

    View Slide

  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!

    View Slide

  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

    View Slide

  153. View Slide

  154. Extract
    stylesheets
    !
    (Oust)
    Generate Critical
    path CSS for a
    viewport
    !
    (Penthouse)
    Inline styles in

    !
    (inline-critical) Output
    Source
    Critical’s workflow
    Inject loadCSS &
    async load
    site.css
    Wrap link tags in
    for
    users with JS
    disabled

    View Slide

  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

    View Slide

  156. Continuous performance
    benchmarking

    View Slide

  157. WebPageTest CLI
    $ npm install -g webpagetest
    Install
    $ webpagetest test
    $ webpagetest test -- wait
    8000
    Usage Jenkins

    View Slide

  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

    View Slide

  159. Smarter package
    management

    View Slide

  160. npm as a front-end package manager?

    View Slide

  161. Will we see a
    shift in 2015?

    View Slide

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

    View Slide

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

    View Slide

  164. Front-end package management for today
    Bower

    View Slide

  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

    View Slide

  166. $ bower install jquery
    Installing jQuery with Bower

    View Slide

  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

    View Slide

  168. View Slide

  169. Find packages
    • Find a library
    !
    !
    • Lists all the available libraries by that name
    Package manager for the web
    $ bower search

    View Slide

  170. Install packages
    • Install a library
    !
    Package manager for the web
    $ bower install

    View Slide

  171. Yeoman

    View Slide

  172. Yeoman kickstarts new projects,
    prescribing best practices and tools to
    help you stay productive
    yeoman.io

    View Slide

  173. View Slide

  174. Scaffolding a project quickly

    View Slide

  175. Subtitle

    View Slide

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

    View Slide

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

    View Slide

  178. Subtitle

    View Slide

  179. Subtitle

    View Slide

  180. Installation
    • Download and install NodeJS
    ·
    Available for all major operating systems
    • Install Yo as a global utility
    $ npm install -g yo

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  184. Subtitle

    View Slide

  185. Subtitle

    View Slide

  186. View Slide

  187. View Slide

  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

    View Slide


  189. View Slide

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

    View Slide

  191. View Slide

  192. View Slide

  193. View Slide

  194. View Slide

  195. > gulp pagespeed

    View Slide

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

    View Slide

  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

    View Slide

  198. !
    Create
    Consume
    Refine
    Relax
    #ToolsNotRules

    View Slide


  199. +AddyOsmani
    @addyosmani

    View Slide