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. It can be as simple as opting for emulation when

    a real-device isn’t needed for testing.
  2. $ 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.
  3. React DevTools It can extend your debugging experience ES6 REPL

    Angular Batarang Gradient Inspector Tamper (modify requests before serving)
  4. 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
  5. 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
  6. ! ! $ git clone ▌ $ sublime . Improve

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

    to the start of the line Ctrl E + Go to the end of the line
  8. Zsh Pure - minimal prompt Prezto - config framework for

    Zsh Customisable alternative to Bash See http://jilles.me/badassify-your-terminal-and-shell/
  9. Many CLI apps to augment your workflow e.g PageRes for

    generating responsive screenshots from the command-line
  10. ! addyo at addyo-macbook in ~/projects/ on master* ! $

    server ▌ $ clone $ tree $ fs $ gz Customise Dotfiles (theme, .aliases, .functions)
  11. which is a port of Seti UI Theme (for Atom

    Editor) Per-tool icons ! (e.g Grunt, Gulp)
  12. <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
  13. When you want to be fast, you have to give

    up the things slowing you down.
  14. (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
  15. Setup ! Scaffolding HTML5 Boilerplate ! Download libraries Twitter Bootstrap


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

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

    and concatenate Generate images / icons Optimize performance HTTP Server Deployment
  18. How are they different? ! Based on files Configuration over

    code ! Based on streams Code over configuration
  19. Typical Grunt task Read files Modify Write files ! !

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

    Modify Modify Modify Write files ! ! File system
  21. 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
  22. Gulp in a nutshell Install Gulp globally Create package file

    Install dependent packages Add tasks to your Gulp file Load tasks into Gulp
  23. Install Gulp locally to the package.json file $ npm install

    gulp —save-dev —save-dev for development —save for production
  24. 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
  25. ! ! ! 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
  26. ! ! ! 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)
  27. ! ! ! 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)
  28. ! 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
  29. ! 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
  30. ! 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
  31. ! 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
  32. ! 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
  33. 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!
  34. How are they different? ! Based on files Configuration over

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

    dependent packages Config tasks in Gruntfile.js Load tasks into Grunt Register custom tasks
  37. Install Grunt locally to the package.json file $ npm install

    grunt —save-dev —save-dev for development
  38. 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.”
  39. 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
  40. "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
  41. grunt-concurrent (concurrency is default in Gulp) ! ! ! !

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

    source files that have been modified since the last run.
  43. 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
  44. 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!
  45. 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
  46. 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
  47. 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
  48. WebPageTest CLI $ npm install -g webpagetest Install $ webpagetest

    test <url> $ webpagetest test <url> -- wait 8000 Usage Jenkins
  49. 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
  50. 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
  51. 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
  52. Find packages • Find a library ! ! • Lists

    all the available libraries by that name Package manager for the web $ bower search <thing>
  53. Installation • Download and install NodeJS · Available for all

    major operating systems • Install Yo as a global utility $ npm install -g yo
  54. ! $ 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
  55. 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