Front-end Tooling Workflows

~ 198 slides on tools to help you stay productive on the front-end.

Transcript

1. FRONT-END TOOLING +AddyOsmani @addyosmani WORKFLOWS
2. ! Building for the web sometimes feels like…
5. Time is a key factor in staying productive. Use yours efficiently.
6. Better tooling can be simple. Can DevTools help us emulate real devices?
7. It can be as simple as opting for emulation when a real-device isn’t needed for testing.
8. Throttle network speed Toggle between devices
9. Having tools refresh device URLs for you BrowserSync Scrolls Clicks Refresh Forms Synchronise:
10. Previewing all your breakpoints at once Emmett Re:View
11. or automating style guide conformance checking Highlight issues Fix to match the Style Guide JSCS for Sublime Text
12. $ history | grep ‘querySelector’ Search your command-line history $ echo 'Hello World!' | pbcopy Copy to clipboard $ sudo !! Run the last command with sudo $ top -o vsize Discover what’s eating your memory $ unzip -l images.zip Unzip an archive to the current directory $ mdfind <keyword> Use Spotlight to search from command-line Tooling can be weird..and wonderful.
13. React DevTools It can extend your debugging experience ES6 REPL Angular Batarang Gradient Inspector Tamper (modify requests before serving)
14. ImageOptim (Mac) or PNGGauntlet (Windows) Optimise sites with little to no configuration..* Ngx PageSpeed / Mod PageSpeed Smaller for CSS/JS/HTML (Mac) * we’ll talk about Grunt, Gulp and npm soon
15. Beautify and “fix” issues in your source Format, search and re-write JS jsfmt $ jsfmt -w=true source.js Non-destructively fix linting errors fixmyjs $ fixmyjs source.js Detect structural similarities in code jsinspect $ jsinspect -t 30 -i ./scripts
16. Sip Color Picker Or just improve your workflow. Chrome DevTools Eye Dropper
17. Automation is having tools do the tedious work, so you don’t have to.
18. If you aren’t using productivity tools or task automation, you are working too hard
19. Our tools are like onions. Peel back the layers to discover more functionality.
21. Learn to love the command-line
22. ! ! $ git clone ▌ $ sublime . Improve your command-line skills
23. Learn to love and use shortcuts. Ctrl A + Go to the start of the line Ctrl E + Go to the end of the line
24. iTerm2.x for Mac Replay command history Autocomplete Paste history Open with a global shortcut
25. Zsh Pure - minimal prompt Prezto - config framework for Zsh Customisable alternative to Bash See http://jilles.me/badassify-your-terminal-and-shell/
26. cmder for Windows Slick console with enhancements spiced with Monokai colours and a custom prompt layout
27. Many CLI apps to augment your workflow e.g PageRes for generating responsive screenshots from the command-line
28. Learn to use dot files to alias common tasks in your workflow
30. ! addyo at addyo-macbook in ~/projects/ on master* ! $ server ▌ $ clone $ tree $ fs $ gz Customise Dotfiles (theme, .aliases, .functions)
31. Learn to extend your tools
32. CSS & Sass Color Highlighter
33. Gutter Color ColorPicker
34. AutoFilename
35. JSHint Gutter Linter
36. GitGutter
37. Enforce code style with JSCS Code Style Configuration
38. Emmett for HTML Type a one-liner HTML generated just hit tab!
39. Navigate quickly to any file ⌘ P +
40. Navigate to any symbol ⌘ R +
41. Pick a theme that helps you focus
42. Seti UI Theme (for Sublime Text) Icons per extension Crisp colors
43. which is a port of Seti UI Theme (for Atom Editor) Per-tool icons ! (e.g Grunt, Gulp)
44. Maybe someday write your tools
45. Sublime FixMyJS
47. Build Tools
48. What do we build?
49. <div class=“paper-button” id="go" disabled>Go!</div> HTML .paper-button { background-color: red; } CSS document.querySelector('.paper-button') .addEventListener('click', function(e) { // your code here }, false); JavaScript
50. sass input.scss output.css sass watch Pre-processors Sass CSS
51. browserify app.js -o bundle.js Bundle dependencies Modules Bundle
52. coffee --compile coffee --watch Language transpilers Coffee JavaScript
53. Why do we build?
54. Productivity & performance
55. soup.io The web
56. HTTPArchive - October 2014 reports 1944KB Average page size 1.9MB ~1.2MB images ~0.35MB scripts & styles
57. TMI (Too Many Images) http://github.com/addyosmani/tmi
58. 300-1000ms 1 second + 10 seconds + Later. 0-100ms Human Perception in 2014
60. Automating performance improvement
61. When you want to be fast, you have to give up the things slowing you down.
62. (1) Client renders page, custom JS beacons back ATF CSS styles ▪ PageSpeed gathers critical CSS beacons from visitors (2) Critical CSS is inlined... ▪ Remaining CSS loaded after first paint + https://developers.google.com/speed/pagespeed/module/filter-prioritize-critical-css  ModPagespeedEnableFilters  prioritize_critical_css        #  Apache !  pagespeed  EnableFilters      prioritize_critical_css        #  Nginx   • modpagespeed.com • ngxpagespeed.com
63. JSConf.eu Old Speed Index 2149
64. Optimized: JSConf.eu + mod_pagespeed Old Speed Index 2149 New Speed Index 1310
65. How do we build?
66. Boilerplate Abstractions Frameworks Testing Docs Workflow Dependency management Performance optimization Build Continuous Integration Deployment Version control
67. Setup ! Scaffolding HTML5 Boilerplate ! Download libraries Twitter Bootstrap
 Download templates Layouts ! Download frameworks Angular, Polymer, Ember.
68. Develop ! Watch Sass, Less, Stylus CoffeeScript, ECMAScript 6 Jade, Haml ! ! LiveReload Refresh pages
 Linting JavaScript CSS Style linting
69. Build ! Code linting
    Running unit tests
    Compile everything
    Minify and concatenate
    Generate images / icons
    Optimize performance
    HTTP Server
    Deployment
70. Automate workflow for simple projects
71. CodeKit
72. Hammer for Mac
73. Prepros
74. Automate workflow for all types of projects
75. Build Tools Make
76. Why use a task runner or build system? Automation
77. Improve quality Ship the goods to users faster It’s easily repeatable
78. Automation isn’t about being lazy. It’s about being efficient
80. What are Gulp and Grunt?
81. Grunt and Gulp Task runner Streaming build system
82. How are they different? ! Based on files Configuration over code ! Based on streams Code over configuration
83. Get files Modify them Make new ones Win Creating this workflow
84. Typical Grunt task Read files Modify Write files ! ! File system ! ! Temp Read files Modify Write files ! ! Temp Read files Modify
85. Gulp uses streams Read files Modify ! ! File system Modify Modify Modify Write files ! ! File system
86. Task automation with Gulp
87. Before you get started • Download and install NodeJS · Available for all major operating systems • Install Gulp as a global utility Prerequisites $ npm install -g gulp
88. Gulp in a nutshell Install Gulp globally Create package file Install dependent packages Add tasks to your Gulp file Load tasks into Gulp
89. Create your package.json file Prompts for your author, package name and the basics. $ npm init
90. Install Gulp locally to the package.json file $ npm install gulp —save-dev —save-dev for development —save for production
91. Gulp plugins use streams
92. ! ! gulp.src(‘app/vendor/*.js’); gulp.src(‘app/**/*.js’); gulp.src(‘never/gonna/give/you/up.js’); gulp.src([‘**/*.js’,’*.cs’]); Streams
93. Install Gulp locally to the package.json file $ npm install gulp-concat gulp-uglify gulp-jshint —save-dev Concatenate files Minify files Lint your JavaScript
94. package.json to manage dependencies
95. Good news! There’s only 4 API methods
96. Gulp’s API
97. ! ! ! gulp.task(‘scripts’, [‘lint’], function () { return gulp.src('js/*.js') .pipe(uglify()) .pipe(gulp.dest(‘dist’)); }); Optionally declare dependencies gulp.task(name, [dep], fn) Registers a task name with a function
98. ! ! ! gulp.task(‘scripts’, [‘lint’], function () { return gulp.src('js/*.js') .pipe(uglify()) .pipe(gulp.dest(‘dist’)); }); Take a file system glob (set of files) and emit files that match gulp.src(glob)
99. ! ! ! gulp.task(‘scripts’, [‘lint’], function () { return gulp.src('js/*.js') .pipe(uglify()) .pipe(gulp.dest(‘dist’)); }); Piped files are written to the file system gulp.dest(folder)
100. e.g Minifying JavaScript
101. ! var gulp = require('gulp'); var uglify = require('gulp-uglify'); ! gulp.task('minify', function() { gulp.src('app.js') .pipe(uglify()) .pipe(gulp.dest('out')); }); Gulpfile.js
102. ! var gulp = require('gulp'); var uglify = require('gulp-uglify'); ! gulp.task('minify', function() { gulp.src('app.js') .pipe(uglify()) .pipe(gulp.dest('out')); }); Gulpfile.js
103. ! var gulp = require('gulp'); var uglify = require('gulp-uglify'); ! gulp.task('minify', function() { gulp.src('app.js') .pipe(uglify()) .pipe(gulp.dest('out')); }); Gulpfile.js
104. ! var gulp = require('gulp'); var uglify = require('gulp-uglify'); ! gulp.task('minify', function() { gulp.src('app.js') .pipe(uglify()) .pipe(gulp.dest('out')); }); Gulpfile.js
105. ! var gulp = require('gulp'); var uglify = require('gulp-uglify'); ! gulp.task('minify', function() { gulp.src('app.js') .pipe(uglify()) .pipe(gulp.dest('out')); }); Gulpfile.js
106. File System Uglify app.js dist/ app.js gulp.src
107. ! ! gulp.task(‘lint-watcher’, function() { gulp.watch('js/**/*.js', [‘jshint’]); }); Run a function when the glob changes gulp.watch(glob, fn);
108. You’re a Gulp pro now! task src dest watch
109. Code defining your tasks, which loads & uses plugins Gulpfile.js
110. Gulpfile.js
111. $ gulp <mytask> Run from the terminal or command prompt Running Gulp
112. Task dependencies run in parallel We need to be careful. If a clean task was running here, it might finish last, deleting all the output. Whoops!
113. Task dependency chains
114. Task automation with Grunt
115. How are they different? ! Based on files Configuration over code ! Based on streams Code over configuration
116. Before you get started • Download and install NodeJS · Available for all major operating systems • Install Grunt CLI as a global utility, run from any path. Prerequisites $ npm install -g grunt-cli
117. Grunt in a nutshell Install CLI Create package file Install dependent packages Config tasks in Gruntfile.js Load tasks into Grunt Register custom tasks
118. Create your package.json file Prompts for your author, package name and the basics. $ npm init
119. Install Grunt locally to the package.json file $ npm install grunt —save-dev —save-dev for development
120. grunt vs grunt-cli ! “In a typical Grunt-based dev workflow, the CLI is installed once per system, while the lib is installed once per project.” ! “The relatively high proportion of CLI installs implies that many devs are using Continuous Integration, where both the CLI and core lib get installed every time.”
121. Install package dependencies $ npm install grunt-contrib-jshint grunt-contrib-cssmin —save-dev Install one or more tasks contrib tasks are officially maintained
122. package.json to manage dependencies
123. Gruntfile.js • Your task configuration • JSON Style • Load the plugins Summary
124. Grunt overview • Task configuration • Task loading • Register custom tasks • Grunt wrapper
125. Grunt overview • Grunt wrapper • Task configuration • Task loading • Register custom tasks
126. Task configuration
127. Task configuration
128. Gruntfile.js
129. Load Tasks Load npm tasks into Grunt Task names
130. Custom tasks Custom task name Tasks to run
131. Running individual Grunt tasks: Sample output from generator-webapp $ grunt task
132. Evaluate. Choose the tool you’re most comfortable with.
133. Evaluate. Choose the tool you’re most comfortable with.
134. How are they different? ! Based on files Configuration over code Independent tasks, strong I/O connection 3600 packages > 2 years old Widely used ! Based on streams Code over configuration Tasks run a sequence of methods. Less I/O 800 plugins > 1 year old Increasingly used
135. npm as a front-end task runner?
136. "scripts": { "build-js": "browserify browser/main.js | uglifyjs -mc > static/bundle.js", "build-css": "cat static/pages/*.css tabs/*/*.css", "build": "npm run build-js && npm run build-css", "watch-js": "watchify browser/main.js -o static/bundle.js -dv", "watch-css": "catw static/pages/*.css tabs/*/*.css -o static/bundle.css -v", "watch": "npm run watch-js & npm run watch-css", "start": "node server.js", } package.json http://substack.net/task_automation_with_npm_run Start a server Watch task Build & minify JS npm run scripts
137. Build tool helpers
138. Gulp DevTools
139. Gulp App
140. Grunt DevTools
141. Editors + Web Starter Kit
142. Gulp Recipes ! https://github.com/gulpjs/gulp/tree/master/docs/recipes
143. Useful build tasks
144. grunt-concurrent (concurrency is default in Gulp) ! ! ! ! Speed up build time by concurrently running tasks like Sass and Coffee.
     
145. grunt-newer (or gulp-changed) ! ! ! Only run tasks on source files that have been modified since the last run.
     
149. Sizing up the average Bootstrap page MINIFIED ORIGINAL STYLES UNCSS + MINIFICATION 120KB 110KB 11KB (1) ~ 90% improvement (2) Based on average improvements reported by UnCSS users
150. Optimize Critical Path CSS
151. Just render visible content! 1. One RTT render for above the fold 2. Fast server response. No redirects 3. Must optimize critical rendering path a. Inline critical CSS b. Remove any blocking JavaScript Don’t render the whole page!
152. New Critical-path CSS tools which builds on Penthouse <333 $ npm install --save-dev penthouse CriticalCSS by FilamentGroup is also solid $ npm install --save-dev criticalcss Critical $ npm install --save-dev critical
154. Extract stylesheets ! (Oust) Generate Critical path CSS for a viewport ! (Penthouse) Inline styles in <head> ! (inline-critical) Output Source Critical’s workflow Inject loadCSS & async load site.css Wrap link tags in <noscript> for users with JS disabled
155. Working with Web Components? Concatenates HTML Imports into a single file Vulcanize https://www.polymer-project.org/articles/concatenating-web-components.html grunt-vulcanize gulp-vulcanize
156. Continuous performance benchmarking
157. WebPageTest CLI $ npm install -g webpagetest Install $ webpagetest test <url> $ webpagetest test <url> -- wait 8000 Usage Jenkins
158. Grunt-PerfBudget http://cognition.happycog.com/article/grunt-plugins-reviewed $ npm install grunt-perfbudget Install 1 2 3 Budget in ms for render, KB for page weight Over budget? Task fails and reports an error. GitHub PRs will show the build failed
159. Smarter package management
160. npm as a front-end package manager?
161. Will we see a shift in 2015?
162. "dependencies": { "bootstrap": "^3.3.0", "jquery": "^2.1.1", "underscore": "^1.7.0" }, package.json
163. Find packages that work in both the client and server-side easily BrowserifySearch.org
164. Front-end package management for today Bower
165. Old way of doing things ! 1. jQuery is out of date. Let’s update!
     2. Open up the site
     3. Download the lib
     4. Copy from ~/Downloads
     5. Paste to app folder
     6. Wire in with script tags
166. $ bower install jquery Installing jQuery with Bower
167. Newer hotness • Download and install NodeJS · Available for all major operating systems • Install Bower as a global utility Package manager for the web $ npm install -g bower
169. Find packages • Find a library ! ! • Lists all the available libraries by that name Package manager for the web $ bower search <thing>
170. Install packages • Install a library ! Package manager for the web $ bower install <thing>
171. Yeoman
172. Yeoman kickstarts new projects, prescribing best practices and tools to help you stay productive yeoman.io
174. Scaffolding a project quickly
175. Subtitle
176. Yo Grunt / Gulp Bower Scaffolding Build system Package manager
177. Generators • Over 1000 available today • Anyone can write them
178. Subtitle
179. Subtitle
180. Installation • Download and install NodeJS · Available for all major operating systems • Install Yo as a global utility $ npm install -g yo
181. ! ! $ npm install -g generator-webapp ▌ ! Install a generator
182. ! ! $ npm install -g generator-gulp-webapp ▌ ! Install a generator
183. ! ! $ yo webapp ▌ Usage ! Yo!
184. Subtitle
185. Subtitle
188. ! $ yo ! [?]  What  would  you  like  to  do?    ›❯    Install  a  generator      Run  the  Angular  generator      Run  the  Backbone  generator        Run  the  Blog  generator      Run  the  jQuery  generator      Run  the  Gruntfile  generator   (Move  up  and  down  to  reveal  more  choices) Remembers what you like to use
189. <Web Starter Kit>
190. github.com/google/web-starter-kit
195. > gulp pagespeed
196. Choose tools you’ll use. Add tools & abstractions when they improve your productivity.
197. LibSass, PostCSS 2014 Trends? 2015 ES6 Modules (transpiled) npm for front-end package management * Web Components, virtual-dom / React Angular 2.0, Ember * If we’re able to address outstanding issues making Bower a better choice for today + Browserify Custom Elements & HTML Imports will be big. + persistent data structures
198. ! Create Consume Refine Relax #ToolsNotRules
199. <thank-you> +AddyOsmani @addyosmani