We often get asked if it is possible to integrate Uno-WASM Web Applications with existing JavaScript components. Since WebAssembly code is running inside browser’s JavaScript context, the answer is “Yes” and it is actually quite simple to do it.
In this article we will explore how you can create interoperability (interop) between Uno-WASM managed code and JavaScript context of an application. The two sample apps with code we provide will help you understand how to use the integration in actual application code. For the purpose of the examples we will create an application using a well known date/time picker control called Flartpickr as well as syntax visualizer called PrismJS. In the end you will generate applications looking like this:
Leveraging the Uno.WASM Bootstrapper
Uno.Wasm.Bootstrap (Uno Bootstrapper) project. It contains the tooling required to build, package, deploy, run and debug a .NET project in a web browser using WebAssembly.
HTML5 Is a Rich and Powerful Platform
Uno Platform fully embraces HTML5 as its display backend when targeting WebAssembly (WASM). As a result, creating hybrid HTML/Uno-WASM apps becomes easy. That also means application can reuse existing JavaScript components directly, often unchanged.
Access the power of HTML5 by reusing any package from npmjs becomes easy. For online applications, they can also be downloaded directly from a CDN like cdnjs.
Example of easily achievable integrations:
-
Add an elaborated rich-text editor like CKEditor, Monaco, Quill
-
Play with mapping with OpenStreetMap, Bing maps, Google Maps…
-
Take photos with Photobooth.js
-
Embed a CLI for your power users with xterm
- The list goes on….
How-to Samples: Three Parts Documentation Tutorial
A three-parts hands-on documentation has been published to go further explaining how to create JavaScript/Uno-WASM hybrid applications.
-
Part 1 – Concepts. Explains how a managed (C#) application can access the HTML5 DOM and use it.
-
Part 2 – First Sample. Step-by-step instructions to embed a syntax visualizer called PrismJS into a Uno-WASM app.
-
Part 3 – Second Sample. Step-by-step instructions to embed a date/time picker called Flartpickr into a Uno-WASM app.
If you are interested to learn more about Uno Platform consider registering for UnoConf – a free virtual conference on Aug 12, 2020 where our core team, community and Microsoft will discuss the latest from WinUI and Uno Platform world.
About Uno Platform
For those new to Uno Platform – it enables for creation of single-source C# and XAML apps which run natively on iOS and Android, macOS and Web via WebAssembly. Uno Platform is Open Source (Apache 2.0) and available on GitHub. To learn more about Uno Platform, see how it works, or create a small sample app.
Carl De Billy on Behalf or Uno Platform Team
