.NET Interactive Preview 3: VS Code Insiders and .NET Polyglot Notebooks

Maria Naggaga

Maria

In .NET Interactive Preview 2, we announced that in addition to Jupyter Notebook and Jupyter Lab, users could use nteract as well. In this preview, users can add VS Code Insiders to that list. With the VS Code Insiders experience, users can get started with .NET notebooks without needing to install Jupyter. The VS Code experience is still a work in progress, and is only available in VS Code Insiders. We look forward to your feedback.

Getting started

To get started with .NET notebooks, please install the following:

Creating a new .NET notebook

Once you have the requirements listed above installed, you are ready to start creating .NET Notebooks in VS Code Insiders.

To create a new notebook, open the Command Palette(Ctrl+Shift+P), and select Create new blank notebook. You can also create a new notebook with Ctrl+Shift+Alt+N key combination. newnotebook

Every notebook has a default language. A new blank notebook starts with a C# cell, as noted in the lower right corner of the cell. If you click on C# (.NET Interactive), you can change the language of the cell. If you change the language of the cell, the next cell you create will continue with that language.

To add a cell, hover above or below an existing cell. Buttons appear allowing you to specify the type of cell to add, +Code or +Markdown. If you select +Code, you can change the language afterward.

cellabove-below

Opening an existing .NET notebook

To open an existing .NET notebook, bring up the Command Palette and select Open notebook. Now, navigate to a local .ipynb file.

opennotebook

With .NET notebooks in VS Code, you can take advantage of rich coding experiences like IntelliSense, and you can use all of your favorite VS Code extensions.

Polyglot Notebooks: Variable Sharing

.NET Interactive is a multi-language kernel that allows you to create notebooks that use different languages together. You switch languages from one cell to another, as appropriate to the task at hand. Pulling values into the notebook and moving values between languages are useful capabilities, which we’ve enabled with a pair of magic commands: #!share and #!value.

#!share

.NET Interactive provides subkernels for three languages (C#, F#, and PowerShell) within the same process. You can share variables between the .NET subkernels using the #!share magic command. Once a variable has been declared in one of these subkernels, it can be accessed from another. And because these kernels run in the same process, if the type of a variable is a reference type, changes to its state can be observed immediately from other kernels.

Example: In this GIF, I’ve declared a C# variable csharpVariable in one cell, which I then share with F# using #!share --from csharp csharpVariable.

basic-variable-sharing

#!value

Importing text into a notebook, whether from the clipboard or a JSON or CSV file or a URL, is a fairly common scenario. The #!value magic command makes it easier to get text into your notebook without having to explicitly declare a string variable and worry about correctly escaping it. When you execute a cell using #!value, the content is stored in memory. (It will also be stored in your .ipynb output, and displayed, if you use the --mime-type switch.) So how do you access the value once it’s stored? The #!value magic command actually refers to another subkernel. In the GIF above, you can see it in the IntelliSense list that’s shown when #!share is typed. Once a value has been stored using #!value, you can share it with another subkernel just like you can from C#, F#, or PowerShell.

There are a few ways to use #!value to store data in a notebook session. The example below shows you how to do it from the clipboard. For examples of other ways to use it, including reading from files and URLs, please check out Direct data entry with #!value.

value

Sharing kernel values with JavaScript

.NET Interactives has APIs available that simplify the process of directly writing HTML and JavaScript in the same notebook where you write .NET code. This enables you to create custom visualizations and access the broader ecosystem of JavaScript libraries without needing .NET wrappers.

In the example below, we are sharing code from the .NET kernel using JavaScript and using it to render HTML, all in a single notebook.

First, I build a collection of items in C# representing fruits with prices and quantities.

csharp

Next, since .NET Interactive is polyglot, I can switch to JavaScript. (While the VS Code experience has a language chooser, you can also switch languages using magic commands like #!javascript, so that you can use these features in Jupyter as well). In the JavaScript cell, I load the D3.js visualization library and when it’s loaded, I access the fruits variable from the C# kernel using interactive.csharp.getVariable("fruits"). This interactive object has properties corresponding to each of the .NET Interactive subkernels. The variable from the subkernel is serialized into JSON and then deserialized into a JavaScript object (basket) that I’ll use to render my bar chart with D3.js.

javascript

Final step: Let’s render the results. We are now going to use HTML to render our chart and JavaScript to call our function. The HTML has to be rendered first because that’s where the JavaScript will build the visualization. But we don’t have to put them in separate cells. Using magic commands, we can switch languages within the same cell so that the output renders at the bottom of the notebook.

#!html
<svg id = "fruit_display" width = "100%"></svg>

#!js
renderfruits("svg#fruit_display");

HTMLJS

And there you have it! A simple demonstration on how you can leverage .NET Interactive polyglot notebooks.

To learn more about variable sharing, sub-kernels, and HTML and JavaScript in .NET Interactive, please check out the linked documentation.

Documentation

We are also happy to share some progress on .NET Interactive documentation. You can now learn more about .NET Interactive’s architecture, variable sharing, visualization, and other features.

The documentation is still a work progress, so we look forward to hearing from you.

Resources

Happy interactive programming!

8 comments

Leave a comment