KEMBAR78
Front End Tooling and Performance - Codeaholics HK 2015 | PDF
Holger Bartel | @foobartel | CodeaholicsHK April 2015 Meetup
FRONT END TOOLING



PERFORMANCE
🚀
FOR/AND
FRONT END
DEVELOPMENT IS
EASY!
http://en.wikipedia.org/wiki/Tightrope_walking
FRONT END
DEVELOPMENT IS
EASY!
OK, MAYBE LOOKS
EASY…
OK, MAYBE LOOKS
EASY…
MAN ON WIRE
“It’s Damn Hard!”
– Charis Rooda
TURNS OUT…
MOST OF THE TIME YOU’LL NEED
MORE THAN JUST 3 INGREDIENTS
TO COOK A GREAT MEAL
MOST OF THE TIME YOU’LL NEED
MORE THAN JUST 3 INGREDIENTS
TO COOK A GREAT MEAL
TODAY, FRONT END
DEVELOPMENT SEEMS MORE LIKE
A HUGE BUFFET
TODAY, FRONT END
DEVELOPMENT SEEMS MORE LIKE
A HUGE BUFFET
THE BACKSTORY
SF BAY GUARDIAN, 2003
DELIVERING THE GOODS
IN UNDER 1000MS
https://www.youtube.com/watch?v=E5lZ12Z889k
🚀
Built with Foundation 5
Uses jQuery, jQuery UI, Vanilla JS

& Grunt
MISSEDIN-HKG.COM
CSS File Size: 88Kb
JS File Size: 213Kb
Total Size: 559Kb
DEVELOPMENT
CSS File Size: 3.8Kb
JS File Size: 54.3Kb
Total Size: 132Kb
PRODUCTION
TAMING FRAMEWORK
OVERHEAD
USING FRAMEWORKS IS OK
B
KILL THE LAZY
DEVELOPER IN YOU…
CSS SPRING CLEANING
YOU WANT TO AVOID THIS: 

15.689 UNUSED RULES
BETTER: 811 UNUSED RULES
HAPPY: 55 UNUSED RULES
SO, HOW DO WE GET
THERE?
TOOLING
GRUNT
JAVASCRIPT TASK
RUNNER
http://www.gruntjs.com
GRUNT-UNCSS
Remove unused CSS rules
 	
  uncss:	
  {	
  
	
  	
  	
  	
  	
  	
  dist:	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  options:	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  //	
  ignore:	
  ['.active',	
  '.alert-­‐box']	
  
	
  	
  	
  	
  	
  	
  	
  	
  },	
  
	
  	
  	
  	
  	
  	
  	
  	
  files:	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  'css/app.un.css':	
  ['index.html',	
  'readpost.php',	
  'uncss.html']	
  
	
  	
  	
  	
  	
  	
  	
  	
  }	
  
	
  	
  	
  	
  	
  	
  }	
  
	
  	
  	
  	
  }
GRUNT-PROCESSHTML
Modify HTML files at build time
 	
  <!-­‐-­‐	
  build:js	
  js/app.min.js	
  -­‐-­‐>	
  
	
  	
  	
  	
  <script	
  src="bower_components/jquery/dist/jquery.min.js"></script>	
  
	
  	
  	
  	
  <script	
  src="js/jquery.validate.js"></script>	
  
	
  	
  	
  	
  <script	
  src="js/fastclick.js"></script>	
  
	
  	
  	
  	
  <script	
  src="js/app.js"	
  async></script>	
  
	
  	
  	
  	
  <script	
  src="js/main.js"></script>	
  
	
  	
  <!-­‐-­‐	
  /build	
  -­‐-­‐>
GRUNT-CONTRIB-UGLIFY
Minify files
GRUNT-CONTRIB-CSSMIN
Minify CSS files
This task needs to run a er UnCSS,
otherwise it will un-minify the CSS again.
 	
  cssmin:	
  {	
  
	
  	
  	
  	
  	
  	
  add_banner:	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  options:	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  banner:	
  '/*	
  Minified	
  CSS	
  for	
  a	
  happy	
  day!	
  */'	
  
	
  	
  	
  	
  	
  	
  	
  	
  },	
  
	
  	
  	
  	
  	
  	
  	
  	
  files:	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  'dist/css/app.min.css':	
  ['css/app.un.css'],	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  'css/app.min.css':	
  ['css/app.un.css']	
  
	
  	
  	
  	
  	
  	
  	
  	
  }	
  
	
  	
  	
  	
  	
  	
  }	
  
	
  	
  	
  	
  }
GRUNT-STRING-REPLACE
Find & Replace Text
 	
  'string-­‐replace':	
  {	
  
	
  	
  	
  	
  	
  	
  inline:	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  files:	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  'dist/index.html':	
  'dist/index.html',	
  
	
  	
  	
  	
  	
  	
  	
  	
  },	
  
	
  	
  	
  	
  	
  	
  	
  	
  options:	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  replacements:	
  [	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  pattern:	
  '<script	
  src="js/app.min.js"></script>',	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  replacement:	
  '<script	
  src="js/app.min.js"	
  async></script>'	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  }	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  ]	
  
	
  	
  	
  	
  	
  	
  	
  	
  }	
  
	
  	
  	
  	
  	
  	
  }	
  
	
  	
  	
  	
  }
GRUNT-IMAGEOPTIM
<img	
  alt="Missed	
  in	
  HKG"	
  
src=“data:image/svg
+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3
dy53My5vcmcvMjAwMC9z…
41IDEuMiA4LjcgMjIuNCAyMi40LTguNyAxLjItMC
41QzQ5MC43IDkwLjYgNDkzLjggODMuNyA0OTEuNC
A3Ny41eiIvPjwvc3ZnPg==“>
SAVINGS OVER PNG: 15KB
GRUNT-CRITICALCSS
Extract the Above the Fold CSS for your page
http://www.perf.rocks
ENABLE GZIP IN .HTACCESS
https://h5bp.github.io
PERFORMANCE TESTING
http://www.webpagetest.org
http://tools.pingdom.com/fpt/
https://developers.google.com/speed/pagespeed/
https://developer.yahoo.com/yslow/
THANKS!
Holger Bartel | @foobartel | CodeaholicsHK April 2015 Meetup
@foobartel
h@foobartel.com

Front End Tooling and Performance - Codeaholics HK 2015