Tooling For The Modern WebApp Developer

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

The Breakpoint:
http://www.youtube.com/playlist?list=PLVUliVBcvz1n_DOgB4lb06G_Dc5fQVRRv&feature=view_all

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.

Transcript

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