JavaScript Toolkit

JavaScript Toolkit

• 1.
  JavaScript toolkit 10 July 2012
• 2.
  Visual Studio Visual Studio2012 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 toolfor JavaScript Professional Subset Quality gate
• 5.
  JSONLint www.jsonlint.com Check your JSONstrings Make them pretty http://bit.ly/chromejsonview
• 6.
  jQuery THE library forJavaScript on the web Poly filler for JavaScript implementations
• 7.
  Unit Testing qUnit Needs justa 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 thinkingin 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 enforcedlanguage Uses current trends in programming language design Can stop you from shooting yourself in the foot
• 11.
  Is CoffeeScript good? Ratherwrite 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