How to embed JavaScript components in C# built Uno WebAssembly Web Applications

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 At the heart of Uno-WASM, there’s a package called 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

Announcing Uno Platform Support for MSAL.NET for WebAssembly Applications

We are happy to announce the support for MSAL.NET (Microsoft Authentication Library) on WebAssembly. This addition allows developers to cross-target use Azure AD, Azure AD B2C and ADFS authentication when building mobile, web and desktop applications. You will now able to access the Microsoft Graph API from your WebAssembly application. This new integration allows accessing any resources protected by Azure Authentication.   Benefits of using Microsoft Authentication Library (MSAL) in enterprise applications Adding the Microsoft Identity Platform (MSAL) to your project will allow easy universal authentication of your users across the web and your local servers. For example, by getting a security token to access Microsoft Graph API you could: • Search for a document on SharePoint • Check for conference room availability • Get user thumbnail • Look-up an employee in the corporate directory • … or any other part of the Graph API You can use it as an SSO (Single Sign-On) to your own backend or 3rd party services. Authentication on WebAssembly – no longer a missing piece for true enterprise applications Uno Platform support for MSAL was already available using .net standard 1.3 on Android, iOS and macOS platforms but it was lacking support for in-browser

Porting an UWP app to iOS, Android and Web. A 5,000,000-app-downloads developer story

Just recently I have converted one of my UWP games to Uno Platform – The Minesweeper 10 and I wanted to share my experience. In just about 4 hours I was able to have it run cross-platform on iOS, Android and Web! The Challenge I have developed many apps and games using UWP. To date I have almost 5 million app downloads in the Microsoft Store which are played by thousands of users on daily basis. To keep my development going most of my games use Ads for monetization. Unfortunately for me, and developers like me, in February Microsoft announced that they would stop supporting Ads in UWP in June. This would mean that I would lose most of my income and that I needed to act fast. In addition, I regularly get emails from my users asking if my games are also available on Android and iOS. They were not, which always made me feel like I was missing out on a bigger opportunity to monetize the work I already did for UWP and will continue with WinUI. Moving Minesweeper and other UWP apps I made the decision to try to move my apps to Android and iOS as

C# interop with C/C++ and Rust in WebAssembly

Having the ability to call code written in other languages is increasingly important, as there are many very useful libraries that are getting ported over to WebAssembly. In .NET, the common defined way for doing interop is P/Invoke and DllImport, and .NET for WebAssembly has support for it in the form of static linking of LLVM Bitcode object files. In this article, I will walk through how to call some simple C/C++ and Rust code from C# in a WebAssembly app. In the general .NET sense, P/Invoke was built to perform dynamic linking with Windows PE Dlls, but has been extended in mono to allow for static linking. This technique is also used by mono on iOS to call native code, and allows for a single executable package to contain the code to execute the application. This is what is used for the demos in this article. About Uno Platform While we have you here, for anyone new to Uno Platform – it enables for creation of single-source C# and XAML apps which run natively on iOS, Android, macOS and Web via WebAssembly. Uno Platform is Open Source (Apache 2.0) and available on GitHub. To learn more about Uno Platform,

Debugging Uno Platform WebAssembly apps in Visual Studio 2019

The .NET team has been hard at work with WebAssembly support, and while we’ve been having WebAssembly debugging from the browser, it’s now possible to debug an Uno WebAssembly app using Visual Studio 2019 16.6 Preview 1! Debug an Uno Platform WebAssembly Web app with Visual Studio Here’s what you need to do to debug an Uno application in Visual Studio: Install the latest Uno Platform Visual Studio templates Create an Uno Cross Platform App using the Visual Studio templates In the Nuget Package manager Update the Uno.UI the preview release 2.2.0-dev.358 Update Uno.Wasm.Bootstrap and Uno.UI.RemoteControl packages to the preview release 1.2.0-dev.16 Add a reference to the Uno.Wasm.Bootstrap.DevServer package In YourProject.Wasm.csproj, manually change the Uno.Wasm.Bootstrap.Cli package version to the same version installed for Uno.Wasm.Bootstrap. (Note, this instruction was removed as of preview version 1.2 of the bootstrapper, use the line above instead) In YourProject.Wasm.csproj, manually remove the DotNetCliToolReference package reference In MainPage.xaml, replace the Grid content with the following: <StackPanel> <TextBlock x:Name=”txt” Text=”Hello, world!” Margin=”20″ FontSize=”30″ /> <Button Content=”click” Click=”OnClick” /> </StackPanel>   In your MainPage.xaml.cs, add the following method: public void OnClick(object sender, object args) { var dt = DateTime.Now.ToString(); txt.Text = dt; }   And the last important step, in

How to use custom fonts in Android, iOS, and WebAssembly via Uno Platform

Credit: This article originally appeared at https://blog.mzikmund.com/2020/01/custom-fonts-in-uno-platform/, written by Uno community champion Martin Zikmund. Custom fonts are super useful to make your application match company brand and to create vector-based font icons. Let’s take a look at how we can use custom fonts in UWP, Android, iOS, and WebAssembly with Uno Platform! Get a font (or create one) There are many on-line sources for free custom fonts, including: Google Fonts 1001 Fonts Font Squirrel Always make sure the license for the font allows packaging it with your application. We can also create a new font. This is especially useful for icon fonts – we can choose a custom set of vector-based icons, compile them into a font and use this for iconography in your app. Niels Laute wrote an excellent article on creating custom icon fonts for apps. I highly recommend it! For this article, I have chosen a font called Sniglet, which is available on Google Fonts: Font formats We require two different font formats – TrueType .ttf for UWP, Android and iOS, and Web Open Font Format (.woff) or its newer version (.woff2) for WebAssembly (WASM). All current versions of major browsers which support WASM support .woff2 as

Build .NET AOT for WebAssembly in Visual Studio with Uno Platform

It’s been a long-time request: Build Uno Platform WebAssembly apps in Visual Studio on Windows using Ahead of Time (AOT) compilation. Good news, it’s now available in preview in Uno dev branch! The Uno.Wasm.Bootstrap package 1.1-dev.416 package now provides the ability to create AOT, Mixed (AOT+Interpreter) and Interpreter (with Bitcode dependencies) builds on Windows 10, without leaving Visual Studio 2019. To our knowledge, Uno is the first one to provide this kind of functionality. If we are not – please let us know in the comments below; maybe we missed something. This new Uno feature makes transparent use of the Windows Subsystem for Linux (WSL) to create the final binaries. You’ll only need to setup your WSL environment once using a simple script, and don’t worry if you forget to set it up, the bootstrapper will explain what to do.   Quick Start – Uno, Visual Studio, WASM, AOT Make sure WSL with Ubuntu 18.04 is installed Install the latest Uno Visual Studio templates Create a new Uno Cross Platform app project Update the Uno.Wasm.Bootstrap and Uno.Wasm.Bootstrap.Cli nuget packages to 1.1-dev.416 or later, using the Nuget Package manager (There’s no need to update other packages) In the Wasm project, add

Blazor Mobile, Uno Platform, and WebAssembly – piling up the tech

On Tuesday, the ever-impressive Blazor team announced a new experimental project: Mobile Bindings that allow developers to write Blazor-style syntax that produces Xamarin.Forms UI controls instead of HTML elements, therefore producing native iOS and Android applications.   When we at the Uno Platform noticed that they were using Xamarin.Forms, we immediately saw a fun means to validate and stress-test our Xamarin.Forms renderers for WebAssembly, in order to bring Blazor Native to WebAssembly. Also, a few of you asked about it on Twitter, so we gave it a shot.   Introducing the Blazor-Xamarin.Forms-UWP-Uno-WebAssembly uber-stack! In less than 24hrs we were able to port the ToDo App to WebAssembly:  1. Blazor to Xamarin.Forms  This is the part that the Blazor team announced on Tuesday. Essentially taking a UI defined in Razor syntax (a mix of markup and C# code), processing it, and converting it into a tree of Xamarin.Forms controls.  2. Xamarin.Forms to UWP  Although the Blazor team’s announcement highlighted the ability to produce mobile apps for iOS and Android, Xamarin.Forms also supports Windows as a compilation target, using the UWP framework. The Blazor X.Forms Bindings work perfectly well with UWP.  In this step, Xamarin.Forms converts its visual tree to a tree of UWP view elements.  3. UWP (or WinUI) to Uno Platform  Here’s where Uno comes in. The Uno Platform allows you to build apps for iOS, Android, and the

Cybertruck in XAML and running Cross-Platform with WebAssembly

It simply had to be done – Cybertruck in XAML. See for yourself, and further customize the Cybertruck if you’d like,  in our WebAssembly implementation of Cybertruck. Go ahead, have a swing at its windows with your mouse! Shout out goes to Lynn Fisher whose tweet inspired us to recreate Cybertruck in XAML. Of course we had to add a lil’ Uno logo there on the door. What is Uno Platform anyway?   Before getting into the details of Cybertruck in XAML. The Uno Platform enables C# and XAML based code to run on iOS, Android, and WebAssembly. To avoid having to learn the UI-layout techniques and approaches for each platform, the Uno Platform mimics the Windows XAML approach of defining UI and layouts. The Uno Platform does this by providing full API definitions of the Universal Windows Platform and implementations of parts of the API – such as Windows.UI.XAML. Uno Platform is Open Source (Apache 2.0) and available on GitHub. As fans of XAML, and Tesla, it made sense we have some fun with Cybertruck. How did we do it?  Everything was done in XAML and we mainly used simple controls for the entire content (Grid, Border, Path and a ViewBox to be able to resize the content for all aspect ratios).  For the colors, we used