Tag Archives: Tools

Javascript: The Good Parts, Web Programming and Tools

Javascript: The Good PartsJavascript: The Good Parts, is the name of the one of the greatest book written on modern Javascript. Author Douglas Crockford who invented his own JSON spec and also invented JSLint explains why Javascript is not an inadequate language of the web after all. It’s good parts make up for anything that’s wrong or inconsistent. You just have to learn to know it.

If you skip the book, don’t miss this video of a presentation he gave at Google.

My first stint with Javascript was when I started my career in web development back in 1999, writing HTML, CSS and Javascript with Classic ASP on the server side. We worked through hoops to make things work on Netscape and IE (we had to worry about only two browsers back then, but more later on), then there were elaborate, error-prone hacky javascript files (document.getElementById all over the place) we included in pages to take care of client side validation, UI manipulation and XHR. Yes, all the good things of the web today were available to be used back then in the 1990s, especially with the MSIE browser. We just had to know to use it. AJAX was already there.

Since the arrival of modern javascript libraries like jQuery, made the life of a Javascript programmer so much easier. Letting you focus on “What to accomplish” more than “How to accomplish and bring it all together”. Which is great. It also provided a better separation of concerns, getting rid of inline event handling hooks and styling. The MV-VM Javascript library KnockoutJS is yet another tool in the kit, that has brought goodies like observable properties and arrays, viewmodels etc to the web programming arena. With appropriate use of jQuery Templates, you can get Silverlight/WPF like data-template and control-template like capabilities. This morning I discovered d3, this helps dealing with both DOM and SVG way easier.

I am excited how things are getting more and more standardized and easier to use with all the excitement around HTML5, CSS3 etc.

Now on to Tools. One of the areas where ‘Web Development’ lags behind compared to Desktop/Client development is Tools. Tools that are transparent, easy to use, provide context, help and do not stand between the developer and the end result. Historically all these deficiencies have scared away the transition of a VB developer in to the pure web programmer, and thus ASP.Net came in to prominence making the developers not think about javascript, html at all and live in the land of Server Controls, View States and Magical unicorns, in the name of productivity, RAD or whatever you want to call it. While I completely agree ASP.Net filled a void and served well it’s real purpose at the time, it also delayed the emergence of frameworks like ASP.Net MVC. I am speaking in the context of a Enterprise .Net developer here.

ASP.Net MVC brought the shine back to web development on the MS .Net stack. When you have complete control over your markup, scripting, styling, URLs, routing, views, controllers and models, you can have greater transparency and focus on “What you want to create”. Yet built on top of the same ASP.Net’s core foundation, which is solid and evolving with each new version.

Coming back to Tools, I am crazy about ‘Chrome Developer Tools’. It’s brilliant. Simply love the way Chrome is supporting developers by providing context based, transparent and easy to use information about what got rendered on the client and moving away from just relying on “view source”. All though IE-9 is trying to catch up, when you compare, Chrome is years ahead of IE-9.

Chrome Dev Tools Tabs

Learn more about ‘Chrome Developer Tools’ and dont’ miss the video to get a quick look at it.

JSFiddle

You might also want to use pure web-based tools like the awesome JSFiddle. For a full introduction and how-to guide for JSFiddle.Net, read this blog post by Ryan. I am using it on regular basis, when there is a need to create any client side UI development. Prototype it there, once it’s functional, bring the source code back to your application.

To sum it up, you always get good support from Visual Studio debugger and the VS tools to troubleshoot and inspect server side code, and VS does a splendid job of it. In VS2010, the Javascript intellisense and debugging support is great. However without an accompanying browser based Developer toolset your client side development is open to lost productivity, too many trial and error fixing sessions and frustration. This frustration eventually leads to a statement like “Ohh I hate javascript, html and this web development, Windows Forms/WPF/Silverlight development is so much better”. The important thing to note here is that it’s not the web development model that is difficult to deal with, it’s the tools, and the stateless nature of the web. So, you do need things like ‘Chrome Developer Tools’ to fill the gaps and make things happen quickly and efficiently. It’s not perfect, yet, but it will get there, if you use it, you’ll know what I mean.

I wish Visual Studio can provide all three in one place. The Browser Developer Tools, a playground to prototype client side features like JSFiddle and then great, easy to use, built-in Javascript debugging.

Happy web programming folks!