JLPDevs - Optimization Tooling for Modern Web App Development

Transcript

1. Optimization Tooling for Modern Web App Development
2. ☑ Optimize Code Development ☑ Optimize Development Operation ☑ Optimize Production Site ☒ Conversion Optimization ☒ Search Engine Optimization ☒ User Experience Optimization ☒ Browser Rendering Optimization ☒ Website Performance Optimization
3. ANYTHING
4. But before we continue, let’s introduce ourselves first
5. M Haidar Hanif Knowledge Connector, Technology Generalist, Technical Lead of Agnium @mhaidarh | mhaidarhanif.com
6. As usual, please CMIIW
7. First, why?
8. Optimize our work and result
9. Always be careful on your options
10. Pertamax! Maybe you like a case study
11. Hackathon Merdeka 3.0 Website (Even though it's not a web app)
12. github.com/Code4Nation/hackathon → code4nation.github.io/hackathon → hackathonmerdeka.id
13. github.com/Code4Nation/hackathon → code4nation.github.io/hackathon → hackathonmerdeka.id
14. How much request and data transferred? (for each homepage load)
16. 85 requests 10.5 MB (Even on mobile)
17. Let’s have some ideas to fix those kind of things (Especially yours if you have)
18. “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
19. Let’s start from the ground up
22. Optimization Level of Step and Structure
23. Test Step Measure Optimize Repeat
24. 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
25. 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
26. We will talk just the essentials (Everything else can be googled)
27. 3 Worlds
28. Global | Automation | Preprocessing
29. The global world (Quick and simple)
30. http://w3.org Final Landscape
31. PageSpeed by Google https://developers.google.com/speed/pagespeed Speed
32. https://cloudflare.com Network
33. Application Performance Management & Monitoring http://newrelic.com
34. Chrome DevTools by Google https://developers.google.com/chrome-developer-tools Developer Tools Suite
35. JPEG http://larahogan.me/design The Right Image Assets at The Right Condition PNG GIF PNG-8 PNG-24 WebP SVG CSS
36. Image Compression Tools JPEG ⇒ jpegoptim, jpegmini, etc PNG ⇒ PNGOptim, OptiPNG, TinyPNG SVG ⇒ SVGO / SVGOMG! All in one ⇒ Trimage or ImageOptim Super Magic ⇒ ImageMagick (mogrify)
37. The world of Node.js, Modularity, and Automation
38. Language, Platform, Packages http://javascript.com | https://nodejs.org | http://npmjs.com | http://bower.io Bower nvm
39. Automated System/Process/Runner for Build/Task http://gulpjs.com | http://gruntjs.com Gulp (stream code) Grunt (configuration) gulp-grunt
40. 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']); };
41. Live Editing http://browsersync.io
42. 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
43. Reducement of Assets A. Concatenation B. Minification/Uglification C. Compression and gzipping
44. Automated Generator http://yeoman.io Yeoman (scaffold)
45. Automated Generator http://slushjs.github.io Slush
46. 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
47. The world of preprocessing
48. http://coffeescript.org JavaScript Preprocessing
49. 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
50. http://jade-lang.com | http://haml.info HTML Preprocessing (Template Engine)
51. 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.
52. http://lesscss.org | http://sass-lang.com | https://github.com/postcss/postcss CSS Preprocessing Autoprefixer PostCSS
53. Less/Scss v Stylus .opacity(@opacity) { opacity: @opacity / 100; } a { &:hover { .opacity(70); } } .opacity(@opacity) opacity @opacity / 100 a &:hover .opacity(70)
54. We can also add those preprocessors into our build process
55. 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
56. Let's install them
58. 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
59. 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
60. # 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
61. 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
62. The result should be what we expected: a web app
63. Is it too much? Google Developers and Udacity have you covered
64. https://developers.google.com/web/fundamentals Web Fundamentals
65. http://developers.google.com/web/starter-kit Web Starter Kit
66. https://www.udacity.com/course/web-tooling-automation--ud892 Web Tooling & Automation
67. Now, are you ready for some action?
68. Let’s try them all in a single live action demo!
70. That’s a wrap!
71. Final advice: Search, try, and experiment
72. • 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
73. Something like...
74. ★ 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 ★
75. Congratulations! We just finished a supposedly 18-24 hours of learning
76. https://speakerdeck.com/JLPcommunity
77. Any question or more ideas? www.JLP.community