JLPDevs - Optimization Tooling for Modern Web App Development
•
0 likes•243 views
The document discusses optimization techniques for modern web app development. It recommends optimizing code development, operations, and production sites through techniques like image optimization, code minification, file concatenation, compression, and leveraging caching. It outlines a process of testing, measuring, optimizing, and repeating optimizations. The document also discusses preprocessing tools, automation tools, and global optimization services that can help with performance optimization.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to JLPDevs - Optimization Tooling for Modern Web App Development
Similar to JLPDevs - Optimization Tooling for Modern Web App Development (20)
Recently uploaded
Recently uploaded (20)
JLPDevs - Optimization Tooling for Modern Web App Development
- 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
- 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
- 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)
- 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']); };
- 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
- 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
- 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
- 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
- 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
- 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
- 79. Any question or more ideas? www.JLP.community