1. www.JLP.community

2. Early December 2015

3. Optimization Tooling for
Modern Web App
Development

4. ☑ Optimize Code Development
☑ Optimize Development Operation
☑ Optimize Production Site
☒ Conversion Optimization
☒ Search Engine Optimization
☒ User Experience Optimization
☒ Browser Rendering Optimization
☒ Website Performance Optimization

5. ANYTHING

6. But before we continue,
let’s introduce
ourselves first

7. M Haidar Hanif
Knowledge Connector,
Technology Generalist,
Technical Lead of Agnium
@mhaidarh | mhaidarhanif.com

8. As usual,
please CMIIW

9. First,
why?

10. Optimize our
work and result

11. Always be careful on
your options

12. Pertamax!
Maybe you like
a case study

13. Hackathon Merdeka 3.0
Website
(Even though it's not a web app)

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

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

16. How much request and
data transferred?
(for each homepage load)

18. 85 requests
10.5 MB
(Even on mobile)

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

20. “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

21. Let’s start from
the ground up

24. Optimization Level of
Step and Structure

25. Test
Step
Measure
Optimize
Repeat

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

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

28. We will talk just
the essentials
(Everything else can be googled)

29. 3 Worlds

30. Global | Automation | Preprocessing

31. The global world
(Quick and simple)

32. http://w3.org
Final Landscape

33. PageSpeed
by Google
https://developers.google.com/speed/pagespeed
Speed

34. https://cloudflare.com
Network

35. Application Performance Management & Monitoring
http://newrelic.com

36. Chrome DevTools
by Google
https://developers.google.com/chrome-developer-tools
Developer Tools Suite

37. JPEG
http://larahogan.me/design
The Right Image Assets at The Right Condition
PNG
GIF
PNG-8
PNG-24
WebP
SVG
CSS

38. Image Compression Tools
JPEG ⇒ jpegoptim, jpegmini, etc
PNG ⇒ PNGOptim, OptiPNG,
TinyPNG
SVG ⇒ SVGO / SVGOMG!
All in one ⇒ Trimage or ImageOptim
Super Magic ⇒ ImageMagick (mogrify)

39. The world of
Node.js, Modularity,
and Automation

40. Language, Platform, Packages
http://javascript.com | https://nodejs.org | http://npmjs.com | http://bower.io
Bower
nvm

41. Automated System/Process/Runner for Build/Task
http://gulpjs.com | http://gruntjs.com
Gulp
(stream code)
Grunt
(configuration)
gulp-grunt

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

43. Live Editing
http://browsersync.io

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

45. Reducement of Assets
A. Concatenation
B. Minification/Uglification
C. Compression and gzipping

46. Automated Generator
http://yeoman.io
Yeoman
(scaffold)

47. Automated Generator
http://slushjs.github.io
Slush

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

49. The world of
preprocessing

50. http://coffeescript.org
JavaScript Preprocessing

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

52. http://jade-lang.com | http://haml.info
HTML Preprocessing (Template Engine)

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

54. http://lesscss.org | http://sass-lang.com | https://github.com/postcss/postcss
CSS Preprocessing
Autoprefixer
PostCSS

55. Less/Scss v Stylus
.opacity(@opacity) {
opacity: @opacity / 100;
}
a {
&:hover {
.opacity(70);
}
}
.opacity(@opacity)
opacity @opacity / 100
a
&:hover
.opacity(70)

56. We can also add those
preprocessors into our
build process

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

58. Let's install them

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

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

62. # 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

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

64. The result should
be what we expected:
a web app

65. Is it too much?
Google Developers and Udacity
have you covered

66. https://developers.google.com/web/fundamentals
Web Fundamentals

67. http://developers.google.com/web/starter-kit
Web Starter Kit

68. https://www.udacity.com/course/web-tooling-automation--ud892
Web Tooling & Automation

69. Now,
are you ready for
some action?

70. Let’s try them all
in a single
live action demo!

72. That’s a wrap!

73. Final advice:
Search, try, and
experiment

74. ● 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

75. Something like...

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

77. Congratulations!
We just finished
a supposedly
18-24 hours of learning

78. https://speakerdeck.com/JLPcommunity

79. Any question or
more ideas?
www.JLP.community