Automating Front-end Workflow

Transcript

1. AUTOMATING WORKFLOW
   IMPROVING FRONT-END HAPPINESS WITH BETTER TOOLING
   ❤
   @addyosmani
   

   View Slide

2. Trying to develop for the
   web today is a little like..
   

   View Slide

3. View Slide

4. Our tooling landscape is
   getting more complex.
   

   View Slide

5. Boilerplate Abstractions
   Frameworks Testing Docs
   Workflow Dependency
   management Performance
   optimization Build
   Continuous Integration
   Deployment Version control
   

   View Slide

6. OMG. WHAT IS THAT?
   

   View Slide

7. The first rule of tooling is
   “Thou shalt not make @paul_irish cry”
   

   View Slide

8. Choose tools you’ll use.
   The second is..
   

   View Slide

9. Time is a key factor in
   staying productive.
   

   View Slide

10. View Slide

11. Automate repetitive tasks
    to stay effective.
    

    View Slide

12. View Slide

13. Automation isn’t about being
    lazy. It’s about being efficient.
    

    View Slide

14. Steve Wozniak
    

    View Slide

15. The right tools make the
    difference between an artist
    and a craftsman.
    

    View Slide

16. View Slide

17. The average front-end
    workflow today
    

    View Slide

18. Setup
    Scaffolding
    Download libraries
    Download templates
    Download frameworks
    

    View Slide

19. Develop
    Watch Sass / Less / Stylus
    Watch CoffeeScript
    Watch Jade / Haml
    LiveReload
    JS / CSS Linting
    

    View Slide

20. Code linting
    Running unit tests
    Compile everything
    Minify and concatenate
    Generate images / icons
    Optimize performance
    HTTP Server
    Deployment Build
    

    View Slide

21. Automate this workflow for
    simple projects
    

    View Slide

22. Workflow tools
    bit.ly/codekit
    

    View Slide

23. hammerformac.com
    

    View Slide

24. bit.ly/prepros Win/Mac
    

    View Slide

25. koala-app.com W/M/L
    

    View Slide

26. mixture.io Win/Mac
    

    View Slide

27. bit.ly/compassapp
    

    View Slide

28. bit.ly/scout-app Win/Mac
    

    View Slide

29. So happy.
    I may just cry.
    

    View Slide

30. Iterative
    improvement.
    

    View Slide

31. First do it.
    Then do it right.
    Then do it better.
    

    View Slide

32. View Slide

33. better?
    

    View Slide

34. Automate workflow for
    all types of projects.
    

    View Slide

35. View Slide

36. Scaffold, write less with Yo
    Build, preview and test with Grunt
    Manage dependencies with Bower
    

    View Slide

37. View Slide

38. Flexibility to customize your
    setup as much as you desire.
    

    View Slide

39. Limit the time spent
    writing boilerplate.
    

    View Slide

40. Improve your productivity and
    delight during development.
    

    View Slide

41. View Slide

42. Helps run repetitive tasks.
    

    View Slide

43. Linting
    Compiling
    Minification
    Testing
    Conversion
    Documentation
    Deployment
    And more
    

    View Slide

44. Alternative to
    Rake/Cake/Make/Ant
    

    View Slide

45. Huge ecosystem.
    

    View Slide

46. Fantastic for developers and designers.
    ♥
    

    View Slide

47. touch package.json Gruntfile.js
    

    View Slide

48. package.json
    

    View Slide

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.
    

    View Slide

50. Gruntfile.js
    

    View Slide

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
    

    View Slide

52. $ npm install -g grunt-cli
    

    View Slide

53. $ npm install
    

    View Slide

54. $ grunt
    Running “jshint:all” (jshint) task
    Running “uglify:build” (uglify) task
    Done.
    

    View Slide

55. Not bad!
    

    View Slide

56. $ npm install grunt- --save-dev
    

    View Slide

57. task tip
    grunt-responsive-images
    Create multi-resolution images from
    a directory for src-set/srcN
    bit.ly/grunt-resp
    

    View Slide

58. task tip
    grunt-contrib-imageoptim
    Lower page-weight by applying
    optimizations to JPG/PNG/Gif
    bit.ly/grunt-image
    

    View Slide

59. speed tip
    grunt-concurrent
    Speed up build time by concurrently
    running tasks like Sass and Coffee.
    bit.ly/grunt-conc
    

    View Slide

60. speed tip
    grunt-newer
    Run tasks on only source files
    modified since the last run.
    bit.ly/grunt-newer
    

    View Slide

61. A first look at something new I’ve
    been hacking on
    

    View Slide

62. grunt-uncss
    Remove unused CSS across your
    project at build time.
    bit.ly/uncss
    

    View Slide

63. A few weeks ago..
    

    View Slide

64. View Slide

65. Get audits for unused CSS in
    your page with DevTools
    

    View Slide

66. Chrome DevTools Audits
    

    View Slide

67. grunt-uncss can remove
    unused CSS at build time
    

    View Slide

68. View Slide

69. Very early days, but 280KB
    down to 40KB of CSS.
    

    View Slide

70. 120KB
    11KB
    What about Bootstrap alone?
    

    View Slide

71. View Slide

72. A package manager for the web.
    

    View Slide

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.
    

    View Slide

74. New hotness.
    

    View Slide

75. $ npm install -g bower
    

    View Slide

76. $ bower search
    

    View Slide

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
    ........
    

    View Slide

78. $ bower install
    

    View Slide

79. $ bower install angular --save-dev
    bower install angular#1.0.8
    angular#1.0.8 app/bower_components/angular
    

    View Slide

80. $ bower install
    $ bower install
    $ bower install #
    $ bower install =#
    

    View Slide

81. $ bower list
    

    View Slide

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
    

    View Slide

83. Runs over:
    Git
    HTTP(s)
    Zip
    npm
    

    View Slide

84. You can even wire up deps
    from the command-line!
    

    View Slide

85. View Slide

86. grunt-bower-install
    bit.ly/grunt-bower
    

    View Slide

87. $ npm install grunt-bower install --save-dev
    $ bower install jquery --save
    $ grunt bower-install
    

    View Slide

88. No more worrying about
    script tags!
    

    View Slide

89. http:/
    /bower.io
    

    View Slide

90. bit.ly/bowersearch
    

    View Slide

91. View Slide

92. Yo is your gateway to this
    magical new world.
    

    View Slide

93. It scaffolds out boilerplate.
    

    View Slide

94. Can prescribe helpful Grunt tasks.
    

    View Slide

95. Can automatically install
    dependencies you need.
    

    View Slide

96. View Slide

97. $ npm install -g yo
    

    View Slide

98. This installs yo, grunt and bower
    for you.
    

    View Slide

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)
    

    View Slide

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
     

     View Slide

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
     

     View Slide

102. Boom. You just created a jQuery
     plugin.
     

     View Slide

103. Installing a custom generator.
     

     View Slide

104. $ npm install generator-bootstrap -g
     

     View Slide

105. $ yo bootstrap
     In what format would you like the Twitter
     Bootstrap stylesheets? (Use arrow keys)
     ›❯ css
     sass
     less
     stylus
     

     View Slide

106. $ npm install generator-webapp -g
     

     View Slide

107. $ yo webapp
     Out of the box I include H5BP and jQuery.
     [ ? ] What more would you like?
     ›❯ Bootstrap for Sass
     RequireJS
     Modernizr
     

     View Slide

108. View Slide

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!
     

     View Slide

110. View Slide

111. $ grunt server
     

     View Slide

112. You can now edit and LiveReload!
     

     View Slide

113. Make changes. Save. Browser automatically refreshes.
     

     View Slide

114. Fantastic for getting a real-time
     view of application state.
     

     View Slide

115. Edits can also refresh all your
     devices. Instant real-device previews.
     

     View Slide

116. Cross-device live reload
     bit.ly/gruntsync
     

     View Slide

117. View Slide

118. What about frameworks?
     

     View Slide

119. $ npm install generator-angular -g
     

     View Slide

120. $ yo angular
     [?] Would you like to include Bootstrap? (Y/n)
     

     View Slide

121. $ yo angular
     [?] Would you like to include Bootstrap? (Y/n)
     [?] Would you like to use the SCSS version?
     

     View Slide

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 to select)
     ›❯ angular-resource.js
     angular-cookies.js
     angular-sanitize.js
     

     View Slide

123. View Slide

124. $ yo angular:view user
     create app/views/user.html
     

     View Slide

125. $ yo angular:controller user
     create app/scripts/controllers/user.js
     create test/spec/controllers/user.js
     

     View Slide

126. $ yo angular:directive mydirective
     create app/scripts/directives/mydirective.js
     create test/spec/directives/mydirective.js
     

     View Slide

127. $ bower install angular-local-storage
     create app/scripts/directives/mydirective.js
     create test/spec/directives/mydirective.js
     

     View Slide

128. You just created an Angular
     app with dependencies
     

     View Slide

129. $ yo express-angular
     AngularJS + Express
     backend
     

     View Slide

130. Generators also available for:
     Backbone
     Ember
     Polymer
     Flight
     CanJS
     & many other frameworks.
     

     View Slide

131. $ yo jekyllrb
     Tell us a little about yourself. ☛
     [?] Name: Addy Osmani
     [?] Email: [email protected]
     [?] GitHub username: addyosmani
     [?] Twitter username: @addyosmani
     Wire tools and preprocessors. ☛
     [?] CSS preprocessor: Sass
     [?] Use Autoprefixer? Yes
     [?] Javascript preprocessor:
     Coffeescript
     ›❯ None
     

     View Slide

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 to select)
     ›❯ Tabs
     Bookmarks
     Cookies
     History
     Management
     

     View Slide

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
     

     View Slide

134. http:/
     /yeoman.io
     

     View Slide

135. Generator search
     

     View Slide

136. Demo apps built with Yeoman?
     http:/
     /bit.ly/yeomandemo
     

     View Slide

137. Work less. Do more.
     Make awesome.
     

     View Slide

138. How can we improve the
     rest of your workflow?
     

     View Slide

139. Learn to love the command-line
     

     View Slide

140. It isn’t scary. You know how to
     use PhotoShop’s 3000 buttons.
     That’s scary!
     

     View Slide

141. Script common tasks
     bit.ly/mydotfiles
     

     View Slide

142. $ server
     python -m SimpleHTTPServer
     Start up a new local server
     

     View Slide

143. $ clone
     Clone a repo easily, cd into it, open up sublime
     

     View Slide

144. $ gitexport
     function gitexport(){
     mkdir -p "$1"
     git archive master | tar -x -C "$1"
     }
     Copy a local checkout without the .git stuff
     

     View Slide

145. Terminal Replay (iTerm 2)
     

     View Slide

146. TotalTerminal
     A system-wide terminal available via a hot-key
     bit.ly/totalterminal
     

     View Slide

147. @climagic
     

     View Slide

148. Do things more quickly.
     

     View Slide

149. Alfred.app
     

     View Slide

150. Alfred Workflows
     Find apps, files
     Find packages on npm
     Build tasks
     bit.ly/alfredworkflows
     

     View Slide

151. Alfred Workflows
     bit.ly/alfredworkflows
     Browser compatibility search
     Find documentation on Dash
     Font awesome search
     

     View Slide

152. Windows? Try Launchy.
     launchy.net
     

     View Slide

153. Automator
     Point-and-click automation of repetitive tasks
     

     View Slide

154. bit.ly/macrorecorder
     

     View Slide

155. Next, let’s look at your editor.
     

     View Slide

156. Know yours inside out.
     

     View Slide

157. Shortcuts are incredibly powerful.
     

     View Slide

158. Sublime Autoprefixer
     Write CSS without the prefixes!
     bit.ly/autoprefixer
     

     View Slide

159. Emmet (Zen Coding)
     bit.ly/emmet-sublime
     

     View Slide

160. STProjectMaker
     Easily reuse your boilerplates
     bit.ly/stprojectmaker
     

     View Slide

161. Sublime TernJS
     Smarter code completion, contextual jump to definition.
     bit.ly/sublime-tern
     

     View Slide

162. Sublime Build System
     bit.ly/sublime-grunt
     Call tools from your editor. Get feedback in the console.
     

     View Slide

163. SublimeLinter
     bit.ly/sublime-linter
     Live linter feedback as you code
     

     View Slide

164. Develop and debug in the
     browser
     

     View Slide

165. Chrome DevTools
     An improved find and fix workflow.
     devtools.chrome.com
     

     View Slide

166. Workspaces
     Add and edit local projects. Breakpoints persist. Debug in-place.
     

     View Slide

167. New! Create New Files
     

     View Slide

168. Sass Source Maps
     

     View Slide

169. New! Less Source Maps
     

     View Slide

170. New! CSS Pretty-printing
     

     View Slide

171. New! Ignoring library code
     

     View Slide

172. New! DevTools Terminal
     npm, git and all your favorite cli tools with this extension
     

     View Slide

173. bit.ly/devtools-terminal
     

     View Slide

174. View Slide

175. What about better integration
     between tools?
     

     View Slide

176. Sublime Web Inspector
     bit.ly/sublime-inspector
     Debugger. Breakpoints. Console. Evaluate call frames.
     

     View Slide

177. Emmet LiveStyle
     Edit CSS. See changes live in Chrome *without* a browser refresh.
     livestyle.emmet.io
     

     View Slide

178. Adobe Brackets
     Bi-directional HTML live editing with Chrome.
     brackets.io
     

     View Slide

179. bit.ly/webstormide
     

     View Slide

180. WebStorm: Live Edit
     

     View Slide

181. WebStorm: Debug with Chrome
     

     View Slide

182. WebStorm 7
     npm search! built-in terminal
     web components & more.
     

     View Slide

183. LightTable
     lighttable.com
     

     View Slide

184. Sublime jsRun
     Run JS in Chrome from Sublime
     bit.ly/sublime-jsrun
     

     View Slide

185. Tailor
     Brackets + Git for ChromeOS
     

     View Slide

186. Synchronized cross-device
     testing
     

     View Slide

187. Re-checking your site on mobile is a pain
     

     View Slide

188. How does this fit into your workflow?
     

     View Slide

189. Navigate all devices to the
     same URL
     

     View Slide

190. A lo-fi, free option
     Remote Preview
     

     View Slide

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
     

     View Slide

192. Synchronize navigation &
     get screenshots.
     

     View Slide

193. Adobe Edge Inspect CC
     

     View Slide

194. View Slide

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
     

     View Slide

196. Refresh all devices on edit
     

     View Slide

197. Grunt + LiveReload
     

     View Slide

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
     

     View Slide

199. Synchronize scrolls, clicks,
     interactions as well as navigation
     

     View Slide

200. GhostLab
     

     View Slide

201. Sync desktop & mobile navigation
     

     View Slide

202. Sync navigation across *all* your devices
     

     View Slide

203. Sync clicks, scrolls and other interactions
     

     View Slide

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
     

     View Slide

205. Mobile Debugging
     

     View Slide

206. DevTools Remote Debugging
     

     View Slide

207. New! RAW USB Debugging
     

     View Slide

208. jsConsole
     bit.ly/jsconsole
     

     View Slide

209. js Hybugger
     jshybugger.com
     

     View Slide

210. iOS WebKit Debug Proxy
     bit.ly/webkitdebug
     

     View Slide

211. MIHTool
     bit.ly/mihtool
     

     View Slide

212. Visual regression testing
     

     View Slide

213. Wraith
     bit.ly/wraithapp
     

     View Slide

214. Huxley
     bit.ly/huxleyapp
     

     View Slide

215. PhantomCSS
     bit.ly/phantomcss
     

     View Slide

216. Simulate real-network
     conditions
     

     View Slide

217. charlesproxy.com
     

     View Slide

218. Network Link Conditioner
     

     View Slide

219. slowyapp.com
     

     View Slide

220. Fiddler
     fiddler2.com
     

     View Slide

221. Netwem, WANEm (Linux)
     bit.ly/linuxnetem
     

     View Slide

222. Simulators & Emulators
     

     View Slide

223. Open Device Labs
     

     View Slide

224. Screenshots or live testing?
     

     View Slide

225. Simulators
     bit.ly/simulatorlist
     Massive, well-maintained list of emulators & simulators available
     

     View Slide

226. Are emulators enough?
     

     View Slide

227. Do I even need an emulator?
     Chrome DevTools Overrides
     

     View Slide

228. Emulate touch events
     

     View Slide

229. Emulate screens
     

     View Slide

230. Emulate device orientation
     

     View Slide

231. Emulate Geolocation
     

     View Slide

232. To learn more checkout our DevTools
     docs at devtools.chrome.com
     

     View Slide

233. If you aren't using automation,
     you are working too hard
     Remember
     

     View Slide

234. Use tools. not rules.
     

     View Slide

235. Improve your developer
     happiness
     

     View Slide

236. Thank you.
     

     View Slide