$30 off During Our Annual Pro Sale. View Details »

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. None
  2. #dotjs 3/35

  3. In-browser DevTools #dotjs Constantly evolving Use Canary channel for development

    Lots of juicy experimental features - - - 4/35
  4. 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
  5. 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
  6. A better authoring workflow #dotjs Live Edit Snippets Revision history

    AutoSave - - - - 7/35
  7. 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
  8. CoffeeScript + @sourceURL #dotjs Compile your Coffee sources Open up

    the DevTools Review your compiled file Whoa! sourceURL comments - - - - 9/35
  9. Mobile Debugging: Overrides Panel #dotjs User Agent Device Metrics Geolocation

    Orientation Emulate touch events - - - - - 10/35
  10. DevTools Console #dotjs Styled-console Multi-style support inspect() command - -

    - 11/35
  11. Learn to love the command line. It isn't scary. ~

    Stephen Hay #dotjs 12/35
  12. 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
  13. 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
  14. Finding missing semicolons should never be a manual process.

  15. Linting #dotjs On file save On source control commit At

    build time Anything better? - - - - 16/35
  16. Live feedback #dotjs Linting Reload Recompilation - - - 17/35

  17. 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
  18. 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
  19. 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.
  20. New hotness: Grunt.js #dotjs 21/35

  21. 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
  22. #dotjs so much choice! you want flexibility. how could we

    make this any easier? 23/35
  23. Introducing Yeoman #dotjs 24/35

  24. Go from idea to a rough prototype in 10 min

  25. Limit the time spent on writing boilerplate for your app

  26. Automate as much of your workflow as possible

  27. Yeoman #dotjs Authoring abstractions Scaffolds Linting LiveReload Testing Build tools

    and more. - - - - - - - - - 28/35
  28. Built on top of great tools like Grunt and Bower

    #dotjs 29/35
  29. Walkthrough #dotjs 1. Package management 2. Generators 3. Live Reload

    4. Testing 5. Build system 30/35
  30. What's next? #dotjs 31/35

  31. 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
  32. Yeoman 0.9.5 Just Launched! #dotjs Visit yeoman.io - 33/35

  33. Learn to love your workflow and tools #dotjs 34/35

  34. g+ addyosmani.com/+ twitter @addyosmani www addyosmani.com github github.com/addyosmani #dotjs Thank

    you! 35/35