Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Tooling For The Modern WebApp Developer

Tooling For The Modern WebApp Developer

HTML version: http://dl.dropbox.com/u/70775642/talks/tooling/dotjs/index.html

The Breakpoint:

A talk about improving developer workflow. Learn about new experimental features in the Chrome Developer Tools, brand new features in text editors, command line tools, live reload, Yeoman and more.

Addy Osmani

November 30, 2012

More Decks by Addy Osmani

Other Decks in Programming


  1. Performance: Timeline + Frames view #dotjs Timeline gives you an

    overview of memory usage over time Summary and detailed views Helps remove jank. Layout or scripts - who triggered what? Frames view helps achieve that snappy 60fps you ideally want - - - - 5/35
  2. Finding memory leaks and DOM leaks #dotjs JavaScript, CSS, Heap

    snapshot Profiles What is using memory at a given point in time? Not being GC'd? Use comparison view to identify potential memory leaks Use summary view to identify DOM leaks - - - - 6/35
  3. Live reloading + SASS Source Maps #dotjs Editing compiled CSS

    has little value Enable new SASS hotness BOOM! You can edit SASS source files Changes automatically reload - - - - 8/35
  4. CoffeeScript + @sourceURL #dotjs Compile your Coffee sources Open up

    the DevTools Review your compiled file Whoa! sourceURL comments - - - - 9/35
  5. Command-line #dotjs Make it look hot fi. Capture and replay

    your command line history DOTFILE EVERYTHING (mine) Aliases are awesome Our faves: g z , s e r v e r alias and n y Some for Browserstack: win7ie8, win8ie10, ios3 - - - - - - 13/35
  6. Sublime Text #protips #dotjs Run JavaScript From Your Editor In

    The Browser Use the built-in Build System! Zen coding with Emmet Stack Overflow code search Snippets for frameworks - - - - - 14/35
  7. Linting #dotjs On file save On source control commit At

    build time Anything better? - - - - 16/35
  8. WebStorm #dotjs Live Edit + Chrome JS Language version based

    suggestions Code inspection and zen coding Suggestions for DRYer code Built in code linting and more - - - - - - 18/35
  9. Unit Testing In The Cloud Testing approaches you already know:

    New hotness: #dotjs In the browser In a headless browser on-demand via cmd line: g r u n t q u n i t In a headless browser post-push - - - In multiple browsers in the cloud via cmd line: - b u n y i p - f M o d e r n i z r / t e s t / i n d e x . h t m l - c ~ / b u n y i p / c o n f i g . j s - b i o s b u n y i p - f i n d e x . h t m l l o c a l - l " f i r e f o x | c h r o m e | s a f a r i | p h a n t o m j s " 19/35
  10. Build system Lint. Resolve depenencies. concatenate modules. compile. Flatten your

    CSS @ i m p o r t s. Remove debugging statements. Compress images. Precompile templates. Run tests in a variety of environments. Revs asset paths for caching. Affirm code quality.
  11. Grunt.js: #dotjs Task based command line build tool Alternative to

    Rake/Cake/Make/Jake Rich community of build tasks Generates simple skeleton for new projects Lint, test, concat, watch and min out of the box. however..you're still responsible for workflow - - - - - - 22/35
  12. Yeoman in 2013 #dotjs 1. Improved flexibility with tools (Grunt,

    Bower) 2. Better editor integration 3. Support for backends (Rails, PHP) 4. Better mobile helpers and remote debugging 5. Support for all of JS.next (Traceur) 6. Deployment (Heroku, AppEngine) 7. ..plans for a little more 32/35