Web Development

Play with code in the .NET Fiddle sandbox

C# and VB.NET developers can use .NET Fiddle to play with code within a browser window and to share code via URL.

jsFiddle is one of my favorite online tools, because it allows you to easily test and prototype JavaScript, HTML, and CSS within your browser. I had never dreamed of such a tool for .NET developers, but .NET Fiddle brings the same features to C# and VB.NET developers.

Basically, it allows you to fiddle around with code snippets within a browser window negating the need to load Visual Studio, which is overkill when you just want to work with a small amount of code. One of .NET Fiddle's biggest selling points is that it's free.

Test code

The basic .NET Fiddle interface is shown in Figure A. The left portion of the interface contains options for Language (C# or VB.NET), Project Type (Console or Interactive), NuGet Packages, and whether Auto Run is enabled. Interactive mode allows you to type lines of code without structure, while Console mode includes the Program class and Main method. The Auto Run option allows you to determine if code typed via Interactive mode executes as it is typed.

Figure A

 

FiddleFigA_010614.jpg
The basic .NET Fiddle interface loaded for the first time.

The NuGet Packages option allows you to use various packages within your code. You're restricted to the packages made available by the .NET Fiddle team; the list shown in Figure B is displayed when the exclamation mark (adjacent to the NuGet Packages option) is selected. The .NET Fiddle team promises to continually update this list, so check frequently for what is available.

Figure B

 

FiddleFigB_010614.jpg
.NET Fiddle NuGet package options that are currently available.

The middle area of Figure A is the most important part of the tool -- it's where code is entered. The bottom middle window shows the output/results of running a code block (or errors) with code statistics in the lower right window.

Figure C shows the results of executing C# code that deals with basic arrays. The output of the Console statements is displayed in the output area of the window while code statistics appear in the lower right. The statistics include when the code executed; how long it took to compile and execute; memory consumed and CPU execution time. The statistics are not overwhelming in this example, but they can be useful when tracking or debugging code execution.

Figure C

 

FiddleFigC_010614.jpg
 

Executing sample C# array code in .NET Fiddle.

A full-featured editor

I expected a rudimentary editor with .NET Fiddle (basically, a text editor within the browser), but it brings much more to the table. It provides code validation as well as IntelliSense, which is a godsend since I don't know anybody that remembers syntax for the overwhelming number of objects and methods available. In addition, it will validate code on the fly and offer a visual clue when there are problems.

Figure D shows IntelliSense and validation in action for sample Structs code. IntelliSense offers valid methods and properties when the object name and period is typed, while validation shows that the one line (SS.Y) includes an invalid property name. I chose to use custom code to demonstrate that IntelliSense works for custom as well as built-in .NET objects.

Figure D

 

FiddleFigD_010614.jpg
 

.NET Fiddle code editor offers both Intellisense and validation.

Collaboration options

While the ability to test code within the browser is great, the collaboration features available in .NET Fiddle are icing on the cake. Like its jsFiddle counterpart, .NET Fiddle provides the ability to share code via URL, but it goes further by providing real-time collaboration. Clicking the Collaborate button at the top of the .NET Fiddle interface opens the window shown in Figure E.

.NET Fiddle uses TogetherJS to facilitate collaboration; Figure F shows the interface once collaboration is initialized (click it again to close or stop collaboration). You can invite others to work on the code or chat (via IM or audio) with the link provided (Figure F). You can share code the old-fashioned way via the Share button (at the top of the interface), which allows you to let others view code via URL or by embedding on a web page (Figure G).

Figure E

 

FiddleFigE_010614.jpg
 

Collaborating with .NET Fiddle utilizes TogetherJS.

Figure F

 

FiddleFigF_010614.jpg
 

Collaboration initiated within .NET Fiddle.

Figure G

 

FiddleFigG2_010614.png
   

.NET Fiddle code sharing options.

A fun and useful tool

Visual Studio is a great tool for application development, but it's overkill when you just want to play around with code that may or may not result in a full blown project. The .NET Fiddle project provides an impressive cross-browser interface; I tested it in the latest version of Chrome, Firefox, and Internet Explorer with no problems.

I often develop code solo, but the collaboration options are full of opportunity. It will be interesting to see if it's used in discussion forums where code is often posted for analysis.

Have you used .NET Fiddle? If not, do you think you'll give it a try? Let us know in the discussion.

 

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

2 comments
iswayn
iswayn

Very enlightening. Awareness enhanced.....