{"id":30133,"date":"2020-09-30T09:01:43","date_gmt":"2020-09-30T16:01:43","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/dotnet\/?p=30133"},"modified":"2023-02-06T19:33:38","modified_gmt":"2023-02-07T03:33:38","slug":"net-interactive-preview-3-vs-code-insiders-and-polyglot-notebooks","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/net-interactive-preview-3-vs-code-insiders-and-polyglot-notebooks\/","title":{"rendered":".NET Interactive Preview 3: VS Code Insiders and .NET Polyglot Notebooks"},"content":{"rendered":"<p><strong>***Please note this post is outdated. The .NET Interactive Notebooks Extension is now named Polyglot Notebooks. See here to learn more: <a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/dotnet-interactive-notebooks-is-now-polyglot-notebooks\/\">https:\/\/devblogs.microsoft.com\/dotnet\/dotnet-interactive-notebooks-is-now-polyglot-notebooks\/<\/a> ***<\/strong><\/p>\n<p>In <a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/net-interactive-is-here-net-notebooks-preview-2\/\" rel=\"nofollow\">.NET Interactive Preview 2<\/a>, 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 <a href=\"https:\/\/github.com\/dotnet\/interactive\/issues\">feedback<\/a>.<\/p>\n<h3><a id=\"user-content-getting-started\" class=\"anchor\" href=\"#getting-started\" aria-hidden=\"true\"><\/a>Getting started<\/h3>\n<p>To get started with .NET notebooks, please install the following:<\/p>\n<ul>\n<li>The latest version of <a href=\"https:\/\/code.visualstudio.com\/insiders\/\" rel=\"nofollow\">VS Code Insiders<\/a>.<\/li>\n<li>The latest <a href=\"https:\/\/dotnet.microsoft.com\/download\/dotnet-core\/3.1\" rel=\"nofollow\">.NET Core 3.1 SDK<\/a>.<\/li>\n<li>The <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ms-dotnettools.dotnet-interactive-vscode\" rel=\"nofollow\">.NET Interactive Notebooks extension<\/a>.<\/li>\n<\/ul>\n<h3><a id=\"user-content-creating-a-new-net-notebook\" class=\"anchor\" href=\"#creating-a-new-net-notebook\" aria-hidden=\"true\"><\/a>Creating a new .NET notebook<\/h3>\n<p>Once you have the requirements listed above installed, you are ready to start creating .NET Notebooks in VS Code Insiders.<\/p>\n<p>To create a new notebook, open the Command Palette(<code>Ctrl+Shift+P<\/code>), and select <strong>Create new blank notebook<\/strong>. You can also create a new notebook with <code>Ctrl+Shift+Alt+N<\/code> key combination.\n<img decoding=\"async\" src=\"https:\/\/user-images.githubusercontent.com\/2546640\/94438730-833fed80-016d-11eb-94e6-da7b51abf58a.gif\" alt=\"newnotebook\" \/><\/p>\n<p>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 <strong>C# (.NET Interactive)<\/strong>, 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.<\/p>\n<p>To add a cell, hover above or below an existing cell. Buttons appear allowing you to specify the type of cell to add, <strong>+Code<\/strong> or <strong>+Markdown<\/strong>. If you select <strong>+Code<\/strong>, you can change the language afterward.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/user-images.githubusercontent.com\/2546640\/94440263-77552b00-016f-11eb-8a1b-f08bb24dd1c1.gif\" alt=\"cellabove-below\" \/><\/p>\n<h3><a id=\"user-content-opening-an-existing-net-notebook\" class=\"anchor\" href=\"#opening-an-existing-net-notebook\" aria-hidden=\"true\"><\/a>Opening an existing .NET notebook<\/h3>\n<p>To open an existing .NET notebook, bring up the Command Palette and select <strong>Open notebook<\/strong>. Now, navigate to a local <code>.ipynb<\/code> file.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/user-images.githubusercontent.com\/2546640\/94441970-67d6e180-0171-11eb-8319-c12ba82c3d30.gif\" alt=\"opennotebook\" \/><\/p>\n<p>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.<\/p>\n<h2><a id=\"user-content-polyglot-notebooks-variable-sharing\" class=\"anchor\" href=\"#polyglot-notebooks-variable-sharing\" aria-hidden=\"true\"><\/a>Polyglot Notebooks: Variable Sharing<\/h2>\n<p>.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&#8217;ve enabled with a pair of magic commands: <code>#!share<\/code> and <code>#!value<\/code>.<\/p>\n<h3><a id=\"user-content-share\" class=\"anchor\" href=\"#share\" aria-hidden=\"true\"><\/a><code>#!share<\/code><\/h3>\n<p>.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 <code>#!share<\/code> 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.<\/p>\n<p><strong>Example<\/strong>: In this GIF, I&#8217;ve declared a C# variable <code>csharpVariable<\/code> in one cell, which I then share with F# using <code>#!share --from csharp csharpVariable<\/code>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/user-images.githubusercontent.com\/547415\/94644861-3d834200-029f-11eb-9cc1-198d13ee634d.gif\" alt=\"basic-variable-sharing\" \/><\/p>\n<h3><a id=\"user-content-value\" class=\"anchor\" href=\"#value\" aria-hidden=\"true\"><\/a><code>#!value<\/code><\/h3>\n<p>Importing text into a notebook, whether from the clipboard or a JSON or CSV file or a URL, is a fairly common scenario. The <code>#!value<\/code> 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 <code>#!value<\/code>, the content is stored in memory. (It will also be stored in your <code>.ipynb<\/code> output, and displayed, if you use the <code>--mime-type<\/code> switch.) So how do you access the value once it&#8217;s stored? The <code>#!value<\/code> magic command actually refers to another subkernel. In the GIF above, you can see it in the IntelliSense list that&#8217;s shown when <code>#!share<\/code> is typed. Once a value has been stored using <code>#!value<\/code>, you can share it with another subkernel just like you can from C#, F#, or PowerShell.<\/p>\n<p>There are a few ways to use <code>#!value<\/code> 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 <a href=\"https:\/\/github.com\/dotnet\/interactive\/blob\/main\/docs\/variable-sharing.md#direct-data-entry-with-value\"><em>Direct data entry with <code>#!value<\/code><\/em><\/a>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/user-images.githubusercontent.com\/2546640\/94477477-f4989400-019f-11eb-93d0-36de2e9e8e6f.gif\" alt=\"value\" \/><\/p>\n<h3><a id=\"user-content-sharing-kernel-values-with-javascript\" class=\"anchor\" href=\"#sharing-kernel-values-with-javascript\" aria-hidden=\"true\"><\/a>Sharing kernel values with JavaScript<\/h3>\n<p>.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.<\/p>\n<p>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.<\/p>\n<p>First, I build a collection of items in C# representing <code>fruits<\/code> with prices and quantities.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/user-images.githubusercontent.com\/2546640\/94603808-c3ce6280-0264-11eb-96c2-b83c2e2b718b.gif\" alt=\"csharp\" \/><\/p>\n<p>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 <code>#!javascript<\/code>, so that you can use these features in Jupyter as well). In the JavaScript cell, I load the <a href=\"https:\/\/d3js.org\/\" rel=\"nofollow\">D3.js<\/a> visualization library and when it&#8217;s loaded, I access the <code>fruits<\/code> variable from the C# kernel using <code>interactive.csharp.getVariable(\"fruits\")<\/code>. This <code>interactive<\/code> 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 (<code>basket<\/code>) that I&#8217;ll use to render my bar chart with D3.js.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/user-images.githubusercontent.com\/2546640\/94603756-b31dec80-0264-11eb-8d0b-3fd9c28ae0ec.gif\" alt=\"javascript\" \/><\/p>\n<p>Final step: Let&#8217;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&#8217;s where the JavaScript will build the visualization. But we don&#8217;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.<\/p>\n<pre><code>#!html\r\n&lt;svg id = \"fruit_display\" width = \"100%\"&gt;&lt;\/svg&gt;\r\n\r\n#!js\r\nrenderfruits(\"svg#fruit_display\");\r\n<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/user-images.githubusercontent.com\/2546640\/94603830-cb8e0700-0264-11eb-9226-ab819fa07d68.gif\" alt=\"HTMLJS\" \/><\/p>\n<p>And there you have it! A simple demonstration on how you can leverage .NET Interactive polyglot notebooks.<\/p>\n<p>To learn more about <a href=\"https:\/\/github.com\/dotnet\/interactive\/blob\/main\/docs\/variable-sharing.md\">variable sharing<\/a>,\n<a href=\"https:\/\/github.com\/dotnet\/interactive\/blob\/main\/docs\/kernels-overview.md\">sub-kernels<\/a>, and <a href=\"https:\/\/github.com\/dotnet\/interactive\/blob\/main\/docs\/javascript-overview.md\">HTML and JavaScript in .NET Interactive<\/a>, please check out the linked documentation.<\/p>\n<h3><a id=\"user-content-documentation\" class=\"anchor\" href=\"#documentation\" aria-hidden=\"true\"><\/a>Documentation<\/h3>\n<p>We are also happy to share some progress on <a href=\"https:\/\/github.com\/dotnet\/interactive\/tree\/main\/docs\">.NET Interactive documentation<\/a>. You can now learn more about .NET Interactive&#8217;s architecture, variable sharing, visualization, and other features.<\/p>\n<p>The documentation is still a work progress, so we look forward to hearing from you.<\/p>\n<h3><a id=\"user-content-resources\" class=\"anchor\" href=\"#resources\" aria-hidden=\"true\"><\/a>Resources<\/h3>\n<ul>\n<li><a href=\"https:\/\/github.com\/dotnet\/interactive\/tree\/main\/docs\">Documentation<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/dotnet\/interactive\/tree\/main\/samples\">Samples<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/dotnet\/interactive\">Source code<\/a><\/li>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ms-dotnettools.dotnet-interactive-vscode\" rel=\"nofollow\">.NET Interactive Notebooks Extension<\/a><\/li>\n<\/ul>\n<p>Happy interactive programming!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>With .NET Interactive Preview 3, we&#8217;ve added a VS Code Insiders experience and a number of new features to our existing .NET notebooks support for Jupyter.<\/p>\n","protected":false},"author":3344,"featured_media":58792,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[685,196],"tags":[],"class_list":["post-30133","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dotnet","category-dotnet-core"],"acf":[],"blog_post_summary":"<p>With .NET Interactive Preview 3, we&#8217;ve added a VS Code Insiders experience and a number of new features to our existing .NET notebooks support for Jupyter.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/30133","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/users\/3344"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/comments?post=30133"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/30133\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media\/58792"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media?parent=30133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/categories?post=30133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/tags?post=30133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}