The new JavaScript interop is controlled by attributes from the System.Runtime.InteropServices.JavaScript<\/a> namespace.<\/p>\n Live demos:<\/p>\n TodoMVC is great community project<\/a> which helps JavaScript developers compare the features of various UI frameworks.<\/p>\n To show how the new JS interop support in .NET 7 works, let’s create a C# port of TodoMVC based on the vanilla-es6<\/a> version. We won’t try to convert all the UI logic, just the app logic.<\/p>\n This post only shows interesting snippets, not the whole code.<\/strong>\nTo follow along, please copy & paste from the sample repo on github<\/a>.<\/p>\n To get started, install the .NET 7 RC1 SDK<\/a> (or later) and run the following commands:<\/p>\n The Open the folder in your favorite code editor and change the Program.cs<\/strong> to match Program.cs<\/a> from the sample.<\/p>\n Add Item.cs<\/a>, Controller.cs<\/a>, Template.cs<\/a> which are C# ports of the ES6 sample code. Also add helpers.js<\/a> as it is.<\/p>\n Store.cs<\/a> is also almost the same as the ES6 version, except the localStorage API<\/a> is wrapped by store.js<\/a><\/p>\n Bind these JavaScript functions to C# code using The first parameter of the attribute The last and most complex part is the View. Most of the real implementation is left in JavaScript in view.js<\/a>.\nUnlike with Blazor, the new View.cs<\/a> binds the JS functions and makes them callable from C#. A couple of these imported functions are shown below, but there are more in the full sample.<\/p>\n The In C# 11, it’s now possible to use generic instances as custom attributes<\/a>, such as The Copy the contents of index.html<\/a> from the sample. The interesting part is<\/p>\n It’s loading Copy the contents of main.js<\/a>. The interesting part is<\/p>\n Edit the project file and add<\/p>\n The code above demonstrates how to pass callback from C# to JavaScript so that events fired by the browser can be handled by managed code. There is also another possibility: static methods annotated with The main.js<\/a> uses The code uses Start the app with the following command (*) :<\/p>\n * This is unfortunately broken on Windows for RC1 and it should be fixed in RC2<\/a><\/p>\n For RC1 on Windows you could run following commands instead with similar results:<\/p>\n You should see output similar to this. You can click on one of the URLs and test the application in your browser.<\/p>\n You can see a live demo of the completed app at https:\/\/pavelsavara.github.io\/dotnet-wasm-todo-mvc<\/a>.\n It’s possible to preload the files It’s also possible to prefetch the largest binary files.\nIn a real production application you should measure the impact of these optimizations.\nDepending on the expected bandwidth and the latency of the target device’s connectivity, strike a good balance of what to prefetch.<\/p>\n In the project file enable ahead-of-time (AOT) compilation to improve speed.\nEnable trimming of unused code to reduce download size.<\/p>\n Please note that while AOT code runs much faster than interpreted IL, it increases size of the binary download.<\/p>\n When trimming unused code, the components which are used dynamically (for example via reflection) need to be protected from trimming. In order to publish with AOT compilation, install the We can use the Compressing the binary assets is also good idea but it’s out of the scope of this article.<\/p>\n We test the performance of the new JS interop model by running a set of microbenchmarks regularly.\nFor example, this graph shows 10000 calls to a trivial JavaScript method using the C# signature Marshalling of primitive numbers and The new interop with For a simple sample, please have a look at the hands demo<\/a> of 3rd party video processing JavaScript library integrated into Blazor WASM.<\/p>\n You can see a live demo of the app is at https:\/\/pavelsavara.github.io\/blazor-wasm-hands-pose<\/a>\n Prior to .NET 7, to perform low-level JavaScript interop in Blazor WebAssembly apps you may have used the undocumented APIs grouped in the \n
TodoMVC<\/h2>\n
How-to<\/h2>\n
dotnet workload install wasm-tools\r\ndotnet workload install wasm-experimental\r\ndotnet new wasmbrowser<\/code><\/pre>\nwasm-experimental<\/code> workload contains experimental project templates for getting started with .NET on WebAssembly in a browser app (WebAssembly Browser App) or in a Node.js based console app (WebAssembly Console App). Here we’re using the browser-based template. The developer experience for these project templates is still a work in progress, but the APIs used in them are fully supported in .NET 7.<\/p>\nusing System;\r\nusing System.Runtime.InteropServices.JavaScript;\r\nusing System.Threading.Tasks;\r\n\r\nnamespace TodoMVC\r\n{\r\n public partial class MainJS\r\n {\r\n static Controller? controller;\r\n\r\n public static async Task Main()\r\n {\r\n if (!OperatingSystem.IsBrowser())\r\n {\r\n throw new PlatformNotSupportedException(\"This demo is expected to run on browser platform\");\r\n }\r\n\r\n await JSHost.ImportAsync(\"todoMVC\/store.js\", \".\/store.js\");\r\n await JSHost.ImportAsync(\"todoMVC\/view.js\", \".\/view.js\");\r\n\r\n var store = new Store();\r\n var view = new View(new Template());\r\n controller = new Controller(store, view);\r\n Console.WriteLine(\"Ready!\");\r\n }\r\n }\r\n}<\/code><\/pre>\nStore<\/h3>\n
export function setLocalStorage(todosJson) {\r\n window.localStorage.setItem('dotnet-wasm-todomvc', todosJson);\r\n}\r\n\r\nexport function getLocalStorage() {\r\n return window.localStorage.getItem('dotnet-wasm-todomvc') || '[]';\r\n};<\/code><\/pre>\nJSImportAttribute<\/code> in Store.cs<\/code><\/p>\nstatic partial class Interop\r\n{\r\n [JSImport(\"setLocalStorage\", \"todoMVC\/store.js\")]\r\n internal static partial void _setLocalStorage(string json);\r\n\r\n [JSImport(\"getLocalStorage\", \"todoMVC\/store.js\")]\r\n internal static partial string _getLocalStorage();\r\n}<\/code><\/pre>\n\"setLocalStorage\"<\/code> is a name of a JS function.\nThe function is exported from the ES6 module<\/a> named \"todoMVC\/store.js\"<\/code>.\nThe module name needs to be unique for all libraries in the application. The prefix todoMVC\/<\/code> solves that.\nIt also maps to the name used in JSHost.ImportAsync<\/code> in the Main.cs<\/code>.<\/p>\nView<\/h3>\n
wasmbrowser<\/code> template doesn’t include any UI framework, so we’ll leave all the UI logic in JavaScript.<\/p>\nexport function removeItem(id) {\r\n const elem = qs(`[data-id=\"${id}\"]`);\r\n if (elem) {\r\n $todoList.removeChild(elem);\r\n }\r\n}\r\n\r\nexport function bindAddItem(handler) {\r\n $on($newTodo, 'change', ({ target }) => {\r\n const title = target.value.trim();\r\n if (title) {\r\n handler(title);\r\n }\r\n });\r\n}<\/code><\/pre>\npublic static partial class Interop\r\n{\r\n [JSImport(\"removeItem\", \"todoMVC\/view.js\")]\r\n public static partial void removeItem([JSMarshalAs<JSType.Number>] long id);\r\n\r\n [JSImport(\"bindAddItem\", \"todoMVC\/view.js\")]\r\n public static partial void bindAddItem(\r\n [JSMarshalAs<JSType.Function<JSType.String>>] Action<string> handler);\r\n}<\/code><\/pre>\nremoveItem<\/code> is passing Int64<\/code> as an argument. The marshaller is configured to translate it as JSType.Number<\/code><\/a> which can only represent a 52-bit integer.\nThe alternative would be to marshal it as JSType.BigInt<\/code><\/a> which is bit more expensive.\nSince the runtime doesn’t want to guess which conversion is preferred in the use case, the developer needs to annotate the method parameter with [JSMarshalAs<T>]<\/code>.<\/p>\nJSMarshalAsAttribute<T><\/code> in the above code. Enable the preview language version with <LangVersion>preview<\/LangVersion><\/code> in the project file.<\/p>\nbindAddItem<\/code> is even more interesting. It’s passing a strongly typed callback delegate handler<\/code>.\nAn explicit definition for the marshaller also needs to be there.\nIt’s a Function<\/code><\/a> with a first argument of type String<\/code><\/a>.\nThis callback is registered by $on<\/code> helper with the DOM change<\/code> event for the <input class=\"new-todo\"\/><\/code> when we call bindAddItem<\/code> function.<\/p>\nMain<\/h3>\n
<script type='module' src=\".\/main.js\"\/><\/code><\/pre>\nmain.js<\/code> which will import .\/dotnet.js<\/code> and start the .NET runtime.<\/p>\nimport { dotnet } from '.\/dotnet.js'\r\n\r\nawait dotnet.run();<\/code><\/pre>\n<Project Sdk=\"Microsoft.NET.Sdk\">\r\n <PropertyGroup>\r\n <TargetFramework>net7.0<\/TargetFramework>\r\n <WasmMainJSPath>main.js<\/WasmMainJSPath>\r\n <OutputType>Exe<\/OutputType>\r\n <Nullable>enable<\/Nullable>\r\n <AllowUnsafeBlocks>true<\/AllowUnsafeBlocks>\r\n+ <LangVersion>preview<\/LangVersion>\r\n <\/PropertyGroup>\r\n\r\n <ItemGroup>\r\n <WasmExtraFilesToDeploy Include=\"index.html\" \/>\r\n- <WasmExtraFilesToDeploy Include=\"main.js\" \/> \r\n+ <WasmExtraFilesToDeploy Include=\"*.js\" \/>\r\n+ <WasmExtraFilesToDeploy Include=\"*.css\" \/>\r\n <\/ItemGroup>\r\n<\/Project><\/code><\/pre>\nJSExport<\/h3>\n
JSExportAttribute<\/code> that are callable from JavaScript.<\/p>\nnamespace TodoMVC\r\n{\r\n public partial class MainJS\r\n {\r\n [JSExport]\r\n public static void OnHashchange(string url)\r\n {\r\n controller?.SetView(url);\r\n }\r\n }\r\n}<\/code><\/pre>\ngetAssemblyExports<\/code> JavaScript API to get all the exports of the assembly.<\/p>\nconst exports = await getAssemblyExports(getConfig().mainAssemblyName);\r\nexports.TodoMVC.MainJS.OnHashchange(document.location.hash);<\/code><\/pre>\ngetConfig().mainAssemblyName<\/code> so that \"TodoMVC.dll\"<\/code> doesn’t have to be hard-coded.\nThe exports<\/code> object contains the same namespace TodoMVC<\/code>, the same class MainJS<\/code> and the same method OnHashchange<\/code> as the C# code.\nThe parameters of the call will be marshalled using the same rules as for [JSImport]<\/code>.\nMarshaling in both directions is governed by the C# method signature and the [JSMarshalAs<T>]<\/code> annotations on the parameters and return values.<\/p>\nRun the app<\/h3>\n
dotnet run<\/code><\/pre>\ndotnet tool update dotnet-serve --global\r\ndotnet serve --directory bin\\Debug\\net7.0\\browser-wasm\\AppBundle<\/code><\/pre>\nWasmAppHost --runtime-config C:\\Dev\\dotnet-wasm-todo-mvc\\bin\\Debug\\net7.0\\browser-wasm\\AppBundle\\TodoMVC.runtimeconfig.json\r\nApp url: http:\/\/127.0.0.1:9000\/index.html\r\nApp url: https:\/\/127.0.0.1:58139\/index.html<\/code><\/pre>\n![\"image\"](\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2022\/09\/todomvcnet7rc1.png\")
<\/a><\/p>\nOptimize the app<\/h3>\n
dotnet.js<\/code> and mono-config.json<\/code> which are the early dependencies for the runtime to begin starting.<\/p>\n<head>\r\n <script type='module' src=\".\/dotnet.js\"\/>\r\n <link rel=\"preload\" href=\".\/mono-config.json\" as=\"fetch\" crossorigin=\"anonymous\">\r\n <link rel=\"prefetch\" href=\".\/dotnet.wasm\" as=\"fetch\" crossorigin=\"anonymous\">\r\n <link rel=\"prefetch\" href=\".\/icudt.dat\" as=\"fetch\" crossorigin=\"anonymous\">\r\n <link rel=\"prefetch\" href=\".\/managed\/System.Private.CoreLib.dll\" as=\"fetch\" crossorigin=\"anonymous\">\r\n<\/head><\/code><\/pre>\n<Project Sdk=\"Microsoft.NET.Sdk\">\r\n <PropertyGroup>\r\n <TargetFramework>net7.0<\/TargetFramework>\r\n <WasmMainJSPath>main.js<\/WasmMainJSPath>\r\n <OutputType>Exe<\/OutputType>\r\n <Nullable>enable<\/Nullable>\r\n <AllowUnsafeBlocks>true<\/AllowUnsafeBlocks>\r\n+ <PublishTrimmed>true<\/PublishTrimmed>\r\n+ <TrimMode>full<\/TrimMode>\r\n+ <RunAOTCompilation>true<\/RunAOTCompilation>\r\n <\/PropertyGroup>\r\n<\/Project><\/code><\/pre>\n<\/code><\/p>\nwasm-tools<\/code> workload and then publish the app.<\/p>\ndotnet workload install wasm-tools\r\ndotnet publish -c Release<\/code><\/pre>\ndotnet-serve<\/code> tool to host the published app locally. Using the correct MIME type for .wasm<\/code> allows the browser to use streaming instantiation of the WebAssembly module.<\/p>\ndotnet tool install --global dotnet-serve\r\ndotnet serve --mime .wasm=application\/wasm --mime .js=text\/javascript --mime .json=application\/json --directory bin\\Release\\net7.0\\browser-wasm\\AppBundle\\<\/code><\/pre>\nInterop performance<\/h3>\n
[JSImport] int Echo(int value)<\/code>.\nCurrently we measure various build configurations and browsers on a small ODROID-N2+.\n![\"image\"](\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2022\/09\/interopperf.png\")
<\/p>\nIntPtr<\/code> is fast.\nNote in the graph the difference AOT can make.\nMarshalling string<\/code> requires us to allocate memory and copy the bits, so it’s slower.\nMarshaling Span<byte><\/code> is cheap but the MemoryView<\/code> on JavaScript side is valid only for the duration of the call.\nMarshalling a proxy of object<\/code> involves an object allocation, GCHandle<\/code>, and two GCs.\nMarshaling Task<\/code>, Exception<\/code> and also ArraySegment<byte><\/code> is similar as they also allocate a GCHandle<\/code>.<\/p>\nBlazor WebAssembly<\/h2>\n
[JSImport]<\/code> and [JSExport]<\/code> is also available in Blazor WebAssembly apps.\nIt’s useful when you need to integrate with the browser on the client side only.\nWhen you need to call your JavaScript also from the server side or in a native hybrid app, please use the existing IJSRuntime<\/a> interface, which does JSON serialization and a remote dispatch.<\/p>\n![\"image\"](\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2022\/09\/blazorhands.png\")
<\/a><\/p>\nLegacy interop<\/h2>\n
MONO<\/code> and BINDING<\/code> JavaScript namespaces.\nThose APIs are still there in .NET 7 for backward compatibility reason, but please consider them deprecated.\nThey expose the user to raw pointers to managed objects and are not protected from GC and WASM memory resize.\nIn Blazor the IJSUnmarshalledRuntime<\/code> interface has similar downsides and is now also deprecated.\nThe new interop with [JSImport]<\/code> and [JSExport]<\/code> should be a faster and safer replacement.<\/p>\n