JLPDevs - Optimization Tooling for Modern Web App Development
-
Upload
jlp-community -
Category
Software
-
view
182 -
download
2
Transcript of JLPDevs - Optimization Tooling for Modern Web App Development
☑ Optimize Code Development☑ Optimize Development Operation☑ Optimize Production Site
☒ Conversion Optimization☒ Search Engine Optimization☒ User Experience Optimization☒ Browser Rendering Optimization☒ Website Performance Optimization
M Haidar HanifKnowledge Connector,Technology Generalist,
Technical Lead of Agnium
@mhaidarh | mhaidarhanif.com
“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
1. Baseline on trivial assetsa. Image optimizationb. Code minificationc. File concatenationd. Compression (gzip/Zopfli)e. Async scriptsf. Leverage caching
g. Light font format (WOFF2)h. Image spritesi. Avoid redirection
Structure
2. Further on assets processinga. Inline critical CSSb. Remove unused CSSc. Remove duplicated or combine similar
attributes (selector, color, size, font family)d. Offline with service workere. Set performance budgetf. etc
Structure
PageSpeedby Google
https://developers.google.com/speed/pagespeed
Speed
Application Performance Management & Monitoring
http://newrelic.com
JPEG
http://larahogan.me/design
The Right Image Assets at The Right Condition
PNG
GIF
PNG-8
PNG-24
WebP
SVG
CSS
Image Compression Tools
JPEG ⇒ jpegoptim, jpegmini, etcPNG ⇒ PNGOptim, OptiPNG, TinyPNGSVG ⇒ SVGO / SVGOMG!
All in one ⇒ Trimage or ImageOptimSuper Magic ⇒ ImageMagick (mogrify)
Language, Platform, Packages
http://javascript.com | https://nodejs.org | http://npmjs.com | http://bower.io
Bower
nvm
Automated System/Process/Runner for Build/Task
http://gulpjs.com | http://gruntjs.com
Gulp(stream code)
Grunt(configuration)
gulp-grunt
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']);};
Code Style, Syntax, and Potential Error Checking:Linting / Hinting
http://eslint.org | http://standardjs.com
A. JSLintB. JSHintC. ESLintD. JSCSE. standard
Automated Generator
http://slushjs.github.io
Slush
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
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
http://jade-lang.com | http://haml.info
HTML Preprocessing (Template Engine)
Jade v Haml
doctype htmlhtml(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.
http://lesscss.org | http://sass-lang.com | https://github.com/postcss/postcss
CSS Preprocessing
Autoprefixer PostCSS
Less/Scss v Stylus
.opacity(@opacity) { opacity: @opacity / 100;}
a { &:hover { .opacity(70); }}
.opacity(@opacity) opacity @opacity / 100
a &:hover .opacity(70)
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
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
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
# 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
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
https://developers.google.com/web/fundamentals
Web Fundamentals
http://developers.google.com/web/starter-kit
Web Starter Kit
https://www.udacity.com/course/web-tooling-automation--ud892
Web Tooling & Automation
● 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
★ 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 ★