JustCode for JavaScript Developers

Telerik’s JustCode is an agile development add-in for Visual Studio 2005, Visual Studio 2008 and Visual Studio 2010 that boosts development productivity. It provides blazing fast solution wide on-the-fly code analysis and error checking, smart code navigation and refactoring features. With its cross-language engine, JustCode provides features for C#, VB.NET, ASP.NET, XAML, JavaScript and HTML and supports multi-language solutions.

In this blog post, I’ll highlight how JustCode helps JavaScript developers write better code.

On-the-Fly Code Analysis for JavaScript

Along with the inspections done by Visual Studio, JustCode conducts code analysis, which provides a list of errors and warnings found in your JavaScript. It does so by applying a list of custom inspections of your solution on-the-fly, without interrupting your work.

In the Code Analysis settings, you’ll find options to control how JustCode inspects your JavaScript. By default, JustCode will mark all syntax errors along with non-optimal statements (i.e. empty statements). These errors/warnings are displayed to the developer in the editor and document well:

In the image (above), items marked in yellow are warnings. Items marked in red are errors. A more detailed list is provided in the JustCode Errors window:

This list can be filtered across all columns, allowing you to quickly find a particular class of error/warning:

JustCode is highly configurable. The errors/warnings discovered during the on-the-fly code analysis can be configured through the Code Analysis options of JustCode:

Once an error or warning has been discovered, the next step is to fix it. Once JustCode has inspected your JavaScript, it will provide you with Quick Fixes to fix any non-optimal statement:

In addition to Quick Fixes, JustCode also provides a feature called Quick Hints. These are code inspections that recommend ways for improving your code. While Quick Fixes warns you about code that won’t compile, Quick Hints will provide suggestions on how to improve it:

Quick Hints – along with many other aspects of JustCode – is highly configurable:

Code Navigation and Search

Go To Definition command navigates you to the definition of a selected identifier:

You can invoke this command by simply right-clicking a variable and selecting “Go To Definition” or press F12.

Go To Member is a useful feature of JustCode that’s provided in the editor window. It allows you to quickly jump to members by supporting statement completion:

The Find Usages command helps locate where a variable is used in the solution:

This view can be expanded to show all instances of the variable being searched for:

You can also modify this view by specifying a group criteria:

Code Templates

Code Templates are reusable code snippets that allow you to quickly insert commonly used code fragments or surround given code fragment with a meaningful code block (example: try-catch statement). With this feature you just type the abbreviation for the template, press “Shift+Space” and the template expands:

When JustCode expands a template, it will search for all variables in scope that can help complete the code template. In addition, it will suggest appropriate variable names where necessary:

The list of available code templates can be easily expanded to include ones that embody common patterns or conventions that you leverage within your JavaScript.

Rename

It’s useful to know what the impact of renaming a variable before committing it to your source. The Rename operation in JustCode allows you to see the changes you’ll make ahead-of-time beforehand:

You can see the code that’s impacted along with the locations where these changes will occur.

At this point, we’ve only scratched the surface of what JustCode can do. There are many useful features that will help JavaScript developers write better code. If you’d like to try JustCode for yourself, you can download a free, 60-day trial by visiting http://www.telerik.com/products/justcode.aspx and clicking the DOWNLOAD button on the page.

Fiddler: A Must-Have Tool for Web Developers

One of the great things about being a web developer today is the large amount of tools available to help troubleshoot and optimize applications. Over the past number of years, my team and I have shared information about these tools through the Canadian Developer Connection blog and events like the realDEVELOPMENT_07 tour. Some examples include Firebug, YSlow, YUI Compressor, the Internet Explorer Developer Toolbar and others. In fact, I wrote about a great episode of Hanselminutes where Jeff Atwood provided the audience with a list of some tools that he uses.

Of all the tools available for web developers, there’s one that I particularly like and that tool is Fiddler:

A Screenshot of Fiddler

Fiddler is a freeware utility written by Eric Lawrence that logs all of the HTTP(S) traffic occurring on your machine. Recently, Eric delivered a presentation at Microsoft PDC 2009 entitled, "Become a Web Debugging Virtuoso with Fiddler", which you download from here. For the uninitiated, this session provides a great primer to Fiddler. Highly recommended.

I like Fiddler a lot because it gives me an ability to watch all HTTP(S) traffic that occurs on my machine and inspect the underlying aspects of this traffic on a request-by-request basis. This is important when building a web application where you want to have a clear understanding of what it's doing underneath the user interface.

Fiddler's Architecture

Another aspect of Fiddler that I like is the ability to get a better sense of the HTTP(S) traffic itself. For example, with Fiddler I can examine the HTTP headers (including cookies). This is useful when you want to see how your web server utilizes caching via content expiration or compression via GZIP encoding. These aspects turn out to be quite important, especially when trying to reduce the frequency and size of your client requests.

Extensibility in the form of add-ons is the probably the best feature of Fiddler. With this capability, developers are free to extend the functionality of Fiddler to provide more meaningful information around the HTTP(S) traffic that occurs on a machine. There are many add-ons available for Fiddler. For a full listing, check out the extensions page here.

In conclusion, many tools exist for web developers. However, if there's one tool that's an absolute must, it's Fiddler. Download it today!

This article also appears on the Canadian Developer Connection blog here.