www.JLP.community

Early December 2015

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

ANYTHING

But before we continue,

let’s introduce ourselves first

M Haidar HanifKnowledge Connector,Technology Generalist,

Technical Lead of Agnium

@mhaidarh | mhaidarhanif.com

As usual,

please CMIIW

First,

why?

Optimize ourwork and result

Always be careful onyour options

Pertamax!Maybe you likea case study

Hackathon Merdeka 3.0 Website

(Even though it's not a web app)

github.com/Code4Nation/hackathon → code4nation.github.io/hackathon → hackathonmerdeka.id

github.com/Code4Nation/hackathon → code4nation.github.io/hackathon → hackathonmerdeka.id

How much request and data transferred?

(for each homepage load)

85 requests10.5 MB

(Even on mobile)

Let’s have some ideas to fix those kind of things(Especially yours if you have)

“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

Let’s start from the ground up

Optimization Level of Step and Structure

TestStep

Measure

Optimize

Repeat

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

We will talk justthe essentials

(Everything else can be googled)

3 Worlds

Global | Automation | Preprocessing

The global world(Quick and simple)

http://w3.org

Final Landscape

PageSpeedby Google

https://developers.google.com/speed/pagespeed

Speed

https://cloudflare.com

Network

Application Performance Management & Monitoring

http://newrelic.com

Chrome DevToolsby Google

https://developers.google.com/chrome-developer-tools

Developer Tools Suite

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)

The world ofNode.js, Modularity,and Automation

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']);};

Live Editing

http://browsersync.io

Code Style, Syntax, and Potential Error Checking:Linting / Hinting

http://eslint.org | http://standardjs.com

A. JSLintB. JSHintC. ESLintD. JSCSE. standard

Reducement of Assets

A. ConcatenationB. Minification/UglificationC. Compression and gzipping

Automated Generator

http://yeoman.io

Yeoman(scaffold)

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

The world ofpreprocessing

http://coffeescript.org

JavaScript Preprocessing

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)

We can also add thosepreprocessors into ourbuild process

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

Let's install them

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

The result shouldbe what we expected:

a web app

Is it too much?Google Developers and Udacityhave you covered

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

Now,

are you ready for

some action?

Let’s try them allin a singlelive action demo!

That’s a wrap!

Final advice:Search, try, and experiment

● 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

Something like...

★ 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 ★

Congratulations!We just finisheda supposedly

18-24 hours of learning

https://speakerdeck.com/JLPcommunity

Any question or more ideas?

www.JLP.community