Automating Front-end Workflow

Writing a modern web app these days can sometimes feel like a tedious process; frameworks, boilerplates, abstractions, dependency management, build processes..the list of requirements for a front-end workflow appears to grow each year.

What if however, you could automate a lot of this? This talk introduces you to a new workflow of tools to keep you productive on the front-end.

Learn about:
- Yeoman, Grunt and Bower
- Brand new features in Chrome DevTools
- Alfred workflows
- Tools for live editing and debugging CSS/JS/HTML with Chrome
- Productivity tools for Sublime
- Tools for synchronised cross-device mobile testing
- Network throttling tools
- Visual regression testing tools
and much more.

Keynote from FOWA 2013.

Transcript

1. AUTOMATING WORKFLOW IMPROVING FRONT-END HAPPINESS WITH BETTER TOOLING ❤ @addyosmani
2. Trying to develop for the web today is a little like..
4. Our tooling landscape is getting more complex.
5. Boilerplate Abstractions Frameworks Testing Docs Workflow Dependency management Performance optimization Build Continuous Integration Deployment Version control
6. OMG. WHAT IS THAT?
7. The first rule of tooling is “Thou shalt not make @paul_irish cry”
8. Choose tools you’ll use. The second is..
9. Time is a key factor in staying productive.
11. Automate repetitive tasks to stay effective.
13. Automation isn’t about being lazy. It’s about being efficient.
14. Steve Wozniak
15. The right tools make the difference between an artist and a craftsman.
17. The average front-end workflow today
18. Setup Scaffolding Download libraries Download templates Download frameworks
19. Develop Watch Sass / Less / Stylus Watch CoffeeScript Watch Jade / Haml LiveReload JS / CSS Linting
20. Code linting Running unit tests Compile everything Minify and concatenate Generate images / icons Optimize performance HTTP Server Deployment Build
21. Automate this workflow for simple projects
22. Workflow tools bit.ly/codekit
23. hammerformac.com
24. bit.ly/prepros Win/Mac
25. koala-app.com W/M/L
26. mixture.io Win/Mac
27. bit.ly/compassapp
28. bit.ly/scout-app Win/Mac
29. So happy. I may just cry.
30. Iterative improvement.
31. First do it. Then do it right. Then do it better.
33. better?
34. Automate workflow for all types of projects.
36. Scaffold, write less with Yo Build, preview and test with Grunt Manage dependencies with Bower
38. Flexibility to customize your setup as much as you desire.
39. Limit the time spent writing boilerplate.
40. Improve your productivity and delight during development.
42. Helps run repetitive tasks.
43. Linting Compiling Minification Testing Conversion Documentation Deployment And more
44. Alternative to Rake/Cake/Make/Ant
45. Huge ecosystem.
46. Fantastic for developers and designers. ♥
47. touch package.json Gruntfile.js
48. package.json
49. { ! "name": "awesome-app", ! "version": "0.0.1", ! "devDependencies": { ! ! "grunt": "~0.4.1", ! ! "grunt-contrib-jshint": "~0.6.3", ! ! "grunt-contrib-uglify": "~0.2.0" ! } } Specify Grunt plugins and metadata.
50. Gruntfile.js
51. module.exports = function(grunt){ ! grunt.initConfig({ ! ! uglify: { ! ! ! build: { src: 'app.js', dest: 'build/app.min.js'} ! ! }, ! ! jshint: { all: ['**/*.js']} ! }); ! grunt.loadNpmTasks('grunt-contrib-uglify'); ! grunt.loadNpmTasks('grunt-contrib-jshint'); ! grunt.registerTask('default', ['jshint', 'uglify']); }; Config tasks and load plugins
52. $ npm install -g grunt-cli
53. $ npm install
54. $ grunt Running “jshint:all” (jshint) task Running “uglify:build” (uglify) task Done.
55. Not bad!
56. $ npm install grunt-<taskname> --save-dev
57. task tip grunt-responsive-images Create multi-resolution images from a directory for src-set/srcN bit.ly/grunt-resp
58. task tip grunt-contrib-imageoptim Lower page-weight by applying optimizations to JPG/PNG/Gif bit.ly/grunt-image
59. speed tip grunt-concurrent Speed up build time by concurrently running tasks like Sass and Coffee. bit.ly/grunt-conc
60. speed tip grunt-newer Run tasks on only source files modified since the last run. bit.ly/grunt-newer
61. A first look at something new I’ve been hacking on
62. grunt-uncss Remove unused CSS across your project at build time. bit.ly/uncss
63. A few weeks ago..
65. Get audits for unused CSS in your page with DevTools
66. Chrome DevTools Audits
67. grunt-uncss can remove unused CSS at build time
69. Very early days, but 280KB down to 40KB of CSS.
70. 120KB 11KB What about Bootstrap alone?
72. A package manager for the web.
73. 1. That lib is 6 months old? Better 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 The old way of doing things.
74. New hotness.
75. $ npm install -g bower
76. $ bower search
77. $ bower search angular Search results: angular git://github.com/angular/bower-angular.git angular-mocks git://github.com/angular/bower-angular-mocks.git angular-resource git://github.com/angular/bower-angular- resource.git angular-cookies git://github.com/angular/bower-angular-cookies.git angular-sanitize git://github.com/angular/bower-angular- sanitize.git angular-bootstrap git://github.com/angular-ui/bootstrap-bower.git ........
78. $ bower install
79. $ bower install angular --save-dev bower install angular#1.0.8 angular#1.0.8 app/bower_components/angular
80. $ bower install $ bower install <package> $ bower install <package>#<version> $ bower install <name>=<package>#<version>
81. $ bower list
82. $ bower list bower check-new Checking for new versions of the project dependencies.. testapp#0.0.0 /Users/addyo/projects/testapp ᵓᴷᴷ angular#1.0.8 (latest is 1.2.0-rc.3) ᵓᴷᵣ bootstrap#3.0.0 ᴹ ᵋᴷᴷ jquery#1.9.1 (2.0.3 available) ᵓᴷᴷ jquery#1.9.1 (latest is 2.0.3) ᵋᴷᴷ modernizr#2.6.2
83. Runs over: Git HTTP(s) Zip npm
84. You can even wire up deps from the command-line!
86. grunt-bower-install bit.ly/grunt-bower
87. $ npm install grunt-bower install --save-dev $ bower install jquery --save $ grunt bower-install
88. No more worrying about script tags!
89. http:/ /bower.io
90. bit.ly/bowersearch
92. Yo is your gateway to this magical new world.
93. It scaffolds out boilerplate.
94. Can prescribe helpful Grunt tasks.
95. Can automatically install dependencies you need.
97. $ npm install -g yo
98. This installs yo, grunt and bower for you.
99. $ yo [?] What would you like to do? ›❯ Install a generator Run the Angular generator (0.4.0) Run the Backbone generator (0.1.9) Run the Blog generator (0.0.0) Run the jQuery generator (0.1.4) Run the Gruntfile generator (0.0.6) (Move up and down to reveal more choices)
100. $ yo [?] What would you like to do? Install a generator [?] Search NPM for generators: jquery [?] Here's what I found. Install one? ›❯ generator-jquery-boilerplate generator-jquery-mobile Search again Return home
101. $ yo jquery-boilerplate create .jshintrc create CONTRIBUTING.md create Gruntfile.js create HISTORY.md create boilerplate.jquery.json create demo/index.html create dist/jquery.boilerplate.js create dist/jquery.boilerplate.min.js create package.json create src/jquery.boilerplate.coffee create src/jquery.boilerplate.js
102. Boom. You just created a jQuery plugin.
103. Installing a custom generator.
104. $ npm install generator-bootstrap -g
105. $ yo bootstrap In what format would you like the Twitter Bootstrap stylesheets? (Use arrow keys) ›❯ css sass less stylus
106. $ npm install generator-webapp -g
107. $ yo webapp Out of the box I include H5BP and jQuery. [ ? ] What more would you like? ›❯ Bootstrap for Sass RequireJS Modernizr
109. Boilerplate - H5BP, Bootstrap, Modernizr Abstractions - optionally Sass, CoffeeScript, grunt- bower-install available by default. Performance optimization - optimize images, scripts, stylesheets, get lean Modernizr builds, concurrently run all of these tasks at build time. Testing and build process - Mocha, Jasmine, PhantomJS Boom. Just created a webapp!
111. $ grunt server
112. You can now edit and LiveReload!
113. Make changes. Save. Browser automatically refreshes.
114. Fantastic for getting a real-time view of application state.
115. Edits can also refresh all your devices. Instant real-device previews.
116. Cross-device live reload bit.ly/gruntsync
118. What about frameworks?
119. $ npm install generator-angular -g
120. $ yo angular [?] Would you like to include Bootstrap? (Y/n)
121. $ yo angular [?] Would you like to include Bootstrap? (Y/n) [?] Would you like to use the SCSS version?
122. $ yo angular [?] Would you like to include Bootstrap? (Y/n) [?] Would you like to use the SCSS version? [?] Which modules would you like to include? (Press <space> to select) ›❯ angular-resource.js angular-cookies.js angular-sanitize.js
124. $ yo angular:view user create app/views/user.html
125. $ yo angular:controller user create app/scripts/controllers/user.js create test/spec/controllers/user.js
126. $ yo angular:directive mydirective create app/scripts/directives/mydirective.js create test/spec/directives/mydirective.js
127. $ bower install angular-local-storage create app/scripts/directives/mydirective.js create test/spec/directives/mydirective.js
128. You just created an Angular app with dependencies
129. $ yo express-angular AngularJS + Express backend
130. Generators also available for: Backbone Ember Polymer Flight CanJS & many other frameworks.
131. $ yo jekyllrb Tell us a little about yourself. ☛ [?] Name: Addy Osmani [?] Email: addyosmani@gmail.com [?] GitHub username: addyosmani [?] Twitter username: @addyosmani Wire tools and preprocessors. ☛ [?] CSS preprocessor: Sass [?] Use Autoprefixer? Yes [?] Javascript preprocessor: Coffeescript ›❯ None
132. $ yo chrome-extension [?] What would you like to call this extension? [?] How would you describe it? [?] Would you like more UI Features? ›❯ Options Page Content Scripts Omnibox [?] Would you like to use permissions? (Press <space> to select) ›❯ Tabs Bookmarks Cookies History Management
133. $ yo mobile Bootstrap 3, TopCoat, Foundation, Pure Generates responsive images Generates site screenshots Removes 300ms delay on touch Boilerplate for Fullscreen API Integrated BrowserStack testing Polyfill for async localStorage and more. bit.ly/yomobile
134. http:/ /yeoman.io
135. Generator search
136. Demo apps built with Yeoman? http:/ /bit.ly/yeomandemo
137. Work less. Do more. Make awesome.
138. How can we improve the rest of your workflow?
139. Learn to love the command-line
140. It isn’t scary. You know how to use PhotoShop’s 3000 buttons. That’s scary!
141. Script common tasks bit.ly/mydotfiles
142. $ server python -m SimpleHTTPServer Start up a new local server
143. $ clone Clone a repo easily, cd into it, open up sublime
144. $ gitexport function gitexport(){ mkdir -p "$1" git archive master | tar -x -C "$1" } Copy a local checkout without the .git stuff
145. Terminal Replay (iTerm 2)
146. TotalTerminal A system-wide terminal available via a hot-key bit.ly/totalterminal
147. @climagic
148. Do things more quickly.
149. Alfred.app
150. Alfred Workflows Find apps, files Find packages on npm Build tasks bit.ly/alfredworkflows
151. Alfred Workflows bit.ly/alfredworkflows Browser compatibility search Find documentation on Dash Font awesome search
152. Windows? Try Launchy. launchy.net
153. Automator Point-and-click automation of repetitive tasks
154. bit.ly/macrorecorder
155. Next, let’s look at your editor.
156. Know yours inside out.
157. Shortcuts are incredibly powerful.
158. Sublime Autoprefixer Write CSS without the prefixes! bit.ly/autoprefixer
159. Emmet (Zen Coding) bit.ly/emmet-sublime
160. STProjectMaker Easily reuse your boilerplates bit.ly/stprojectmaker
161. Sublime TernJS Smarter code completion, contextual jump to definition. bit.ly/sublime-tern
162. Sublime Build System bit.ly/sublime-grunt Call tools from your editor. Get feedback in the console.
163. SublimeLinter bit.ly/sublime-linter Live linter feedback as you code
164. Develop and debug in the browser
165. Chrome DevTools An improved find and fix workflow. devtools.chrome.com
166. Workspaces Add and edit local projects. Breakpoints persist. Debug in-place.
167. New! Create New Files
168. Sass Source Maps
169. New! Less Source Maps
170. New! CSS Pretty-printing
171. New! Ignoring library code
172. New! DevTools Terminal npm, git and all your favorite cli tools with this extension
173. bit.ly/devtools-terminal
175. What about better integration between tools?
176. Sublime Web Inspector bit.ly/sublime-inspector Debugger. Breakpoints. Console. Evaluate call frames.
177. Emmet LiveStyle Edit CSS. See changes live in Chrome *without* a browser refresh. livestyle.emmet.io
178. Adobe Brackets Bi-directional HTML live editing with Chrome. brackets.io
179. bit.ly/webstormide
180. WebStorm: Live Edit
181. WebStorm: Debug with Chrome
182. WebStorm 7 npm search! built-in terminal web components & more.
183. LightTable lighttable.com
184. Sublime jsRun Run JS in Chrome from Sublime bit.ly/sublime-jsrun
185. Tailor Brackets + Git for ChromeOS
186. Synchronized cross-device testing
187. Re-checking your site on mobile is a pain
188. How does this fit into your workflow?
189. Navigate all devices to the same URL
190. A lo-fi, free option Remote Preview
191. Remote Preview ◦ [+] Free! ◦ [-] Loads page into iframe ◦ [-] Requires user to type url in page ◦ [+] Central place to change url to load into iframe after initial set-up bit.ly/remotepreview
192. Synchronize navigation & get screenshots.
193. Adobe Edge Inspect CC
195. Adobe Edge Inspect ◦ [-] One device at a time ◦ [-] Displays site in a WebView ◦ [+] Supports live reload ◦ [+] Extension to load any page you view in Chrome ◦ [-] Can’t account for localhost (i.e. switch to ip addr. of machine on local network) ◦ [+] Remote Inspect via Weinre bit.ly/edgeinspect
196. Refresh all devices on edit
197. Grunt + LiveReload
198. Grunt + LiveReload ◦ [+] Free! ◦ [+] Easily see how each change you save looks across devices ◦ [+] Works with any modern mobile browser ◦ [-] Requires you to use Grunt for your build process bit.ly/gruntsync
199. Synchronize scrolls, clicks, interactions as well as navigation
200. GhostLab
201. Sync desktop & mobile navigation
202. Sync navigation across *all* your devices
203. Sync clicks, scrolls and other interactions
204. Ghostlab ◦ [+] Creates server to folder contents ◦ [+] Syncs scrolls, clicks and reloads ◦ [-] Needs typing into browser on each device ◦ [+] Allows to match up scrolling and input ◦ [-] OS X Only ◦ [+] Debugging via Weinre bit.ly/ghostapp
205. Mobile Debugging
206. DevTools Remote Debugging
207. New! RAW USB Debugging
208. jsConsole bit.ly/jsconsole
209. js Hybugger jshybugger.com
210. iOS WebKit Debug Proxy bit.ly/webkitdebug
211. MIHTool bit.ly/mihtool
212. Visual regression testing
213. Wraith bit.ly/wraithapp
214. Huxley bit.ly/huxleyapp
215. PhantomCSS bit.ly/phantomcss
216. Simulate real-network conditions
217. charlesproxy.com
218. Network Link Conditioner
219. slowyapp.com
220. Fiddler fiddler2.com
221. Netwem, WANEm (Linux) bit.ly/linuxnetem
222. Simulators & Emulators
223. Open Device Labs
224. Screenshots or live testing?
225. Simulators bit.ly/simulatorlist Massive, well-maintained list of emulators & simulators available
226. Are emulators enough?
227. Do I even need an emulator? Chrome DevTools Overrides
228. Emulate touch events
229. Emulate screens
230. Emulate device orientation
231. Emulate Geolocation
232. To learn more checkout our DevTools docs at devtools.chrome.com
233. If you aren't using automation, you are working too hard Remember
234. Use tools. not rules.
235. Improve your developer happiness
236. Thank you.