This presentation provides a quick glance at a number of tools that make development with JavaScript easy, quick & bug free. Loads of tools & ideas in it :)

1. JavaScript
toolkit
10 July 2012

2. Visual Studio
Visual Studio 2012 has awesome JavaScript & HTML
support
Visual Studio 2010
Web Standards Update
Web Essentials Extension
Chirpy

3. F12, Firebug & PageSpeed
Developer Tools
F12: Chrome & IE
FireBug: Firefox
Key tools are console & network
Google PageSpeed (Firebug & Chrome Add-in)
Make it a quality gate

4. JSLint
www.jslint.com
Static analysis tool for JavaScript
Professional Subset
Quality gate

5. JSONLint
www.jsonlint.com
Check your JSON strings
Make them pretty
http://bit.ly/chromejsonview

6. jQuery
THE library for JavaScript on the web
Poly filler for JavaScript implementations

7. Unit Testing
qUnit
Needs just a JS, CSS & HTML file
Simple syntax
Chutzpah
JS Unit Test runner
Can run headless, i.e. no HTML

8. YUI Compressor
From Yahoo (home of Crockford)
Uses a lot of tricks and smarts to shrink & obfuscate
JavaScript
Local & hosted versions exist

9. Trend: Stop thinking in
JavaScriptJavaScript is assembly language for the web
Scott Hanselman, 6 July 2011
JS is the x86 of the web
Brenden Eich, a couple of years ago
JavaScript is the VM of the web
Douglas Crockford, 19 July 2011
The JavaScript we've got now is the assembly language of
the client-side. We can't easily change it, but we have to
start building better tools on top of it.
Jonnycat, Hacker News, 2010

10. CoffeeScript
A more enforced language
Uses current trends in programming language design
Can stop you from shooting yourself in the foot

11. Is CoffeeScript good?
Rather write CoffeeScript than bad JavaScript
Why write bad JavaScript in the first place?
Learn good JavaScript
Realise that it is a prototype language & not an OO language
Use static analysis tooling to learn & improve your JavaScript

12. Other interesting libraries
• Backbone.js – MVVM for JavaScript
• Require.js – Makes sure the JavaScript is loaded &
only loaded when needed
• Underscore.js – Poly fill for backbone & jQuery
• SignalR – A library for the communication between
client, client & service.
• Modernizr – Library for the poly filling of HTML 5 &
CSS

13. Questions?

14. Sources
http://www.hanselman.com
http://blogs.msdn.com/b/jasonz/archive/2012/05/10/my-
favorite-features-improved-tooling-in-visual-studio-11-
for-javascript-developers.aspx