front end tooling and performance - codeaholics hk 2015
TRANSCRIPT
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-UNCSSRemove unused CSS rules
uncss: { dist: { options: { // ignore: ['.active', '.alert-‐box'] }, files: { 'css/app.un.css': ['index.html', 'readpost.php', 'uncss.html'] } } }
GRUNT-PROCESSHTMLModify 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-UGLIFYMinify files
GRUNT-CONTRIB-CSSMINMinify 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-REPLACEFind & 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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9z…41IDEuMiA4LjcgMjIuNCAyMi40LTguNyAxLjItMC41QzQ5MC43IDkwLjYgNDkzLjggODMuNyA0OTEuNCA3Ny41eiIvPjwvc3ZnPg==“>
SAVINGS OVER PNG: 15KB
GRUNT-CRITICALCSSExtract the Above the Fold CSS for your page
PERFORMANCE TESTING
http://www.webpagetest.org
http://tools.pingdom.com/fpt/
https://developers.google.com/speed/pagespeed/
https://developer.yahoo.com/yslow/
