JavaScript Toolkit


Published on

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 :)

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

JavaScript Toolkit

  1. 1. JavaScript toolkit 10 July 2012
  2. 2. Visual Studio Visual Studio 2012 has awesome JavaScript & HTML support Visual Studio 2010 Web Standards Update Web Essentials Extension Chirpy
  3. 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. 4. JSLint Static analysis tool for JavaScript Professional Subset Quality gate
  5. 5. JSONLint Check your JSON strings Make them pretty
  6. 6. jQuery THE library for JavaScript on the web Poly filler for JavaScript implementations
  7. 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. 8. YUI Compressor From Yahoo (home of Crockford) Uses a lot of tricks and smarts to shrink & obfuscate JavaScript Local & hosted versions exist
  9. 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. 10. CoffeeScript A more enforced language Uses current trends in programming language design Can stop you from shooting yourself in the foot
  11. 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. 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. 13. Questions?
  14. 14. Sources favorite-features-improved-tooling-in-visual-studio-11- for-javascript-developers.aspx
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.