Introducing Deck.NET

When Bridge.NET first launched in 2015, we included a basic online editor for running and sharing C# code samples compiled into JavaScript. The initial version of this online editor was named Live Bridge.

The ability to quickly test code samples within an online editor, and easily share that sample with others proved to be a huge success. With the first version we got a taste of what was possible, and it didn’t take us long to start wanting more. Before the first version was even publicly released, planning began for a major update.

We came up a long list of new features for an online Bridge based C# code sharing tool and kicked off an internal project to make it happen. Once again, we quickly came to another realisation; this was turning into a bigger project than just an improved code sharing tool for Bridge. It needed to be its own thing.

From there, Deck.NET was initiated.

Deck.NET is an online C# to JavaScript playground powered by Bridge.NET.

Deck.NET - Write C#. Run JavaScript

Deck itself is built in C# and compiled into JavaScript using Bridge. The online C# code editor communicates with the Bridge Compiler running on the server.

There were some obvious annoyances with the old online tool, such as having to click the Run button to view the actual working sample, which forced the sample to open in a new browser window. As well, having to open the browser developer tools to view messages logged to the console added manual steps that could easily be avoided.

We knew the user experience could be better, so we got to work.

Result Panel

The first problem to solve was removing of the old school annoying Run button. We wanted to code and test our results immediately without being linked off to another page.

A third Result panel was added which automatically syncs with your freshly compiled C# and JavaScript.

Deck with auto compilation

This new feature allows for rapid cycles of code, compile, and testing. All from within a desktop browser or mobile device, without opening an IDE such as Visual Studio or Visual Studio Code.

Two simple buttons were included in the upper right of the Result panel for forcing a refresh or to open a new browser window which then allows for a cleaner use of the built-in browser developer tools.

Bridge Console

A new Console tool is integrated with Bridge. Calling Console.WriteLine will automatically open the Bridge Console and log your message.

Bridge Console

Deck combines the new Result panel with Bridge Console so you get instant message logging and quick iterating of your code without having to open the browser developer tools.

Intellisense

It’s tough to work efficiently without Intellisense, especially when stepping through those rarely explored corners of the C# API. With Deck, we wanted to provide the same rich Intellisense experience expected by C# developers but within an online C# editor.

Deck Intellisense

It took a few iterations to tweak the user experience, but once working the way we wanted, it’s an amazingly helpful and fun feature to use.

CTRL + S Compile

Over time hitting CTRL + S has just become a subliminal action for us. You do it without thinking.

Trouble is, if you’re in a web browser, hitting CTRL + S will pop up the browser Save Page As… dialog.

Super annoying.

With Deck, we hooked into this key combination, and now this specific key combo will trigger a re-compile of your Deck, instead of interrupting to save the page.

A simple refinement which makes a positive difference to the user experience with Deck.

Change Layouts

By default Deck loads with the standard 3 Column layout by rendering the C#, JavaScript and HTML Result panels. Generally, this panel configuration works fine, but there are certainly scenarios where an optimised panel layout better suited to the code sample is desired.

The new Layout button (upper-right of top menu) includes six new layout options in various combinations.

Deck Layouts

You can now also share a direct link to your Deck with only the Result panel loaded. Several community members have been getting to know Bridge by recreating classic games and sharing with the new Full layout.

Try Bridge Pong built by @DanTup and also check out his related blog post.

Then @AurelienBoudoux expanded on Pong by making Bridge Breakout, and related blog post.

Error Highlighting

With Deck, we needed to clean up how compilation Error and Warning messages were being displayed to the user. Now the messages are cleanly rendered into the C# using sidebar icons and squiggly inline code highlighting.

Moving your pointer over the error displays the compiler message and automatically disappear once the syntax error is corrected.

Deck Compiler Messages

C# 6 Support

This first release of Deck was built with Bridge 15 and includes the Microsoft Roslyn compiler with full C#6 syntax support. A few highlight C#6 features include:

Auto-Property Initializers and String Interpolation (Deck)

C#Auto-Property Initializers and String Interpolation
public class Person
{
    public string First { get; set; } = “Jane”;
    public string Last { get; set; } = “Doe”;
}

class App
{
    static void Main()
    {
        var p = new Person();

        Console.WriteLine($”{p.First} {p.Last}”);
    }
} 

Using Static (Deck)

C#Using Static
using static System.Console;
using static System.Math;
using static System.DayOfWeek;

class Program
{
    static void Main()
    {
        WriteLine(Sqrt(3 * 3 + 4 * 4));
        WriteLine(Friday – Monday);
    }
} 

Index Initializers (Deck)

C#Index Initializers
class App
{
    static void Main()
    {
        var numbers = new Dictionary<int, string> {
            [7] = “seven”,
            [9] = “nine”,
            [13] = “thirteen”
        };

        Console.WriteLine(numbers[7]);
        Console.WriteLine(numbers[9]);
        Console.WriteLine(numbers[13]);
    }
} 

Take the Tour

The first time visiting Deck.NET you’ll be taken on a quick tour to discover the features. You can restart the tour anytime by clicking on the Lifebuoy icon in the bottom-left corner.

Deck Tour

The Future

Deck has been a fun project for us to build, and the exciting part is this is just the beginning for Deck. We consider the current release just a small step towards our initial vision. There’s a lot more to come.

We hope you find Deck.NET as useful as we have. Please let us know what you think. Get out there and #buildsomething.

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Markdown and code formatting supported in comments, including use of code formatting shortcodes ([cs], [js], [code], [html])