Front End Tooling and Performance - Codeaholics HK 2015
2 likes1,494 views
The document discusses front-end development, emphasizing that it is more complex than it seems, akin to a buffet requiring various tools and techniques. It highlights the importance of using toolkits like Grunt to manage CSS, JavaScript, and performance optimization for web development. Additionally, it covers methods to reduce file sizes, remove unused CSS rules, and enhance page load speeds through performance testing tools.
![uncss:
{
dist:
{
options:
{
//
ignore:
['.active',
'.alert-‐box']
},
files:
{
'css/app.un.css':
['index.html',
'readpost.php',
'uncss.html']
}
}
}](https://image.slidesharecdn.com/frontendtoolingforperf-codeaholics2015-150410032714-conversion-gate01/85/Front-End-Tooling-and-Performance-Codeaholics-HK-2015-29-320.jpg)
![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']
}
}
}](https://image.slidesharecdn.com/frontendtoolingforperf-codeaholics2015-150410032714-conversion-gate01/85/Front-End-Tooling-and-Performance-Codeaholics-HK-2015-34-320.jpg)
!['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>'
}
]
}
}
}](https://image.slidesharecdn.com/frontendtoolingforperf-codeaholics2015-150410032714-conversion-gate01/85/Front-End-Tooling-and-Performance-Codeaholics-HK-2015-36-320.jpg)
Front End Tooling and Performance - Codeaholics HK 2015
- 1. Holger Bartel | @foobartel | CodeaholicsHK April 2015 Meetup FRONT END TOOLING PERFORMANCE 🚀 FOR/AND
- 2. FRONT END DEVELOPMENT IS EASY! http://en.wikipedia.org/wiki/Tightrope_walking FRONT END DEVELOPMENT IS EASY!
- 3. OK, MAYBE LOOKS EASY… OK, MAYBE LOOKS EASY…
- 4. MAN ON WIRE
- 5. “It’s Damn Hard!” – Charis Rooda TURNS OUT…
- 6. 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
- 7. TODAY, FRONT END DEVELOPMENT SEEMS MORE LIKE A HUGE BUFFET TODAY, FRONT END DEVELOPMENT SEEMS MORE LIKE A HUGE BUFFET
- 9. SF BAY GUARDIAN, 2003
- 11. DELIVERING THE GOODS IN UNDER 1000MS https://www.youtube.com/watch?v=E5lZ12Z889k 🚀
- 14. Built with Foundation 5 Uses jQuery, jQuery UI, Vanilla JS & Grunt MISSEDIN-HKG.COM
- 15. 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
- 17. USING FRAMEWORKS IS OK B
- 18. KILL THE LAZY DEVELOPER IN YOU…
- 20. YOU WANT TO AVOID THIS: 15.689 UNUSED RULES
- 21. BETTER: 811 UNUSED RULES
- 22. HAPPY: 55 UNUSED RULES
- 25. SO, HOW DO WE GET THERE?
- 26. TOOLING
- 28. GRUNT-UNCSS Remove unused CSS rules
- 29. uncss: { dist: { options: { // ignore: ['.active', '.alert-‐box'] }, files: { 'css/app.un.css': ['index.html', 'readpost.php', 'uncss.html'] } } }
- 30. GRUNT-PROCESSHTML Modify HTML files at build time
- 31. <!-‐-‐ 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 -‐-‐>
- 33. GRUNT-CONTRIB-CSSMIN Minify CSS files This task needs to run a er UnCSS, otherwise it will un-minify the CSS again.
- 34. 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'] } } }
- 35. GRUNT-STRING-REPLACE Find & Replace Text
- 36. '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>' } ] } } }
- 37. GRUNT-IMAGEOPTIM
- 38. <img alt="Missed in HKG" src=“data:image/svg +xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3 dy53My5vcmcvMjAwMC9z… 41IDEuMiA4LjcgMjIuNCAyMi40LTguNyAxLjItMC 41QzQ5MC43IDkwLjYgNDkzLjggODMuNyA0OTEuNC A3Ny41eiIvPjwvc3ZnPg==“> SAVINGS OVER PNG: 15KB
- 39. GRUNT-CRITICALCSS Extract the Above the Fold CSS for your page
- 41. ENABLE GZIP IN .HTACCESS https://h5bp.github.io
- 43. THANKS! Holger Bartel | @foobartel | CodeaholicsHK April 2015 Meetup @foobartel h@foobartel.com