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

JLPDevs - Optimization Tooling for Modern Web App Development

JLPDevs - Optimization Tooling for Modern Web App Development

JLP Community

December 05, 2015
Tweet

More Decks by JLP Community

Other Decks in Programming

Transcript

  1. ☑ Optimize Code Development ☑ Optimize Development Operation ☑ Optimize

    Production Site ☒ Conversion Optimization ☒ Search Engine Optimization ☒ User Experience Optimization ☒ Browser Rendering Optimization ☒ Website Performance Optimization
  2. “The Hacker Way is an approach to building that involves

    continuous improvement and iteration. Hackers believe that something can always be better, and that nothing is ever complete.” ―Mark Zuckerberg
  3. 1. Baseline on trivial assets a. Image optimization b. Code

    minification c. File concatenation d. Compression (gzip/Zopfli) e. Async scripts f. Leverage caching g. Light font format (WOFF2) h. Image sprites i. Avoid redirection Structure
  4. 2. Further on assets processing a. Inline critical CSS b.

    Remove unused CSS c. Remove duplicated or combine similar attributes (selector, color, size, font family) d. Offline with service worker e. Set performance budget f. etc Structure
  5. Image Compression Tools JPEG ⇒ jpegoptim, jpegmini, etc PNG ⇒

    PNGOptim, OptiPNG, TinyPNG SVG ⇒ SVGO / SVGOMG! All in one ⇒ Trimage or ImageOptim Super Magic ⇒ ImageMagick (mogrify)
  6. Gulp v Grunt var gulp = require('gulp'); var rename =

    require('gulp-rename'); gulp.task('default', function() { gulp.src('*.htm') .pipe(rename({ extname: '.html'})) .pipe(gulp.dest('./folder')); }); module.exports = function(grunt) { grunt.initConfig({ rename: { main: { files: [ {src: ['*.htm'], dest: './folder/*.html'}, ] } } }); grunt.loadNpmTasks('grunt-contrib-rename'); grunt.registerTask('default', ['rename']); };
  7. Code Style, Syntax, and Potential Error Checking: Linting / Hinting

    http://eslint.org | http://standardjs.com A. JSLint B. JSHint C. ESLint D. JSCS E. standard
  8. Generators http://yeoman.io/generators $ npm install -g generator-* # generator-generator #

    generator-webapp # generator-angular # generator-backbone # generator-ember # generator-mobile # generator-ionic # generator-wordpress # generator-express # etc
  9. JavaScript v CoffeeScript var listen; listen = function(el, event, handler)

    { if (el.addEventListener) { return el.addEventListener(event, handler); } else { return el.attachEvent('on' + event, function() { return handler.call(el); }); } }; listen = (el, event, handler) -> if el.addEventListener el.addEventListener event, handler else el.attachEvent 'on' + event, -> handler.call el
  10. Jade v Haml doctype html html(lang="en") head title= pageTitle body

    h1 Heading #container.col p. Jade is a terse and simple templating language with a strong focus on performance and powerful features. !!! %html{:lang => "en"} %head %title Page Title %body %h1 Heading #container.col %p Haml is a beautiful, DRY, well-indented, clear markup: templating haiku.
  11. Less/Scss v Stylus .opacity(@opacity) { opacity: @opacity / 100; }

    a { &:hover { .opacity(70); } } .opacity(@opacity) opacity @opacity / 100 a &:hover .opacity(70)
  12. Gulp and Grunt Plugins for Preprocessing http://browsersync.io | http://imagemagick.org $

    npm install --save-dev gulp-* $ npm install --save-dev grunt-contrib-* # gulp-coffee # grunt-contrib-coffee # gulp-jade # grunt-contrib-jade # gulp-haml # grunt-haml # gulp-less # grunt-contrib-less # gulp-sass # grunt-contrib-sass # gulp-stylus # grunt-contrib-stylus # gulp-autoprefixer # grunt-autoprefixer
  13. Gotta Install Them All! # Install Node.js from OS package

    manager or nvm $ sudo apt-get install nodejs # or brew install node $ nvm install v4 # Install tools globally as a CLI app $ npm install -g bower gulp grunt yo # Initialize npm and Bower config file $ cd path/to/repo $ npm init && bower init # Install npm and Bower dependencies $ npm install && bower install
  14. Getting Started with Gulp/Grunt # Install Gulp/Grunt $ npm install

    -g gulp grunt # Install in repo development dependencies $ npm install --save-dev gulp grunt # Create a gulpfile.js or Gruntfile at the root of repo $ vim gulpfile.js $ vim Gruntfile
  15. # Install Yeoman and Slush $ npm install -g yo

    slush # Install a generator $ npm install -g generator-* $ npm install -g slush-* # Using a generator $ cd path/to/repo $ yo <generator-name> $ slush <generator-name> Getting Started with Yeoman/Slush
  16. Run Them # Check out our installed Node.js $ node

    -v # Run Gulp/Grunt to do something $ gulp <command> $ grunt <command> # Serve our web app for development $ gulp serve $ grunt serve # Build our web app for production $ gulp build $ grunt build
  17. • IDE and/or code editor choice and plugins • Unit,

    integration, functional, acceptance, e2e testing • Continuous Integration with Jenkins, Travis, Drone • Browser tweaks, extensions, or plugins • Splitting environments (dev, staging, production) • JS transpilation to CoffeeScript, TypeScript, ES6, JSX • JS source maps for debugging • Responsive web design What I couldn’t cover today
  18. ★ https://javascript.com ★ http://jankfree.org ★ http://singlepageappbook.com ★ http://yeoman.io/blog/performance-optimization.html ★ http://addyosmani.com/blog/performance-optimisation-with-timeline-profiles

    ★ https://speakerdeck.com/addyosmani/css-performance-tooling ★ https://css-tricks.com/the-difference-between-minification-and-gzipping ★ http://automateyourworkflow.com ★ http://wesbos.com/modern-javascript-workflow-tooling ★ http://engineroom.teamwork.com/10-things-to-know-about-gulp ★ https://developers.google.com/cloud-test-lab ★ https://github.com/addyosmani/critical ★ EXTRA BOOKMARK LINKS ★