Exploring .NET Universal Windows Platform on Windows
This is the third and last in our series of blog posts around Windows desktop technologies. After exploring Electron and React Native for Windows, we decided to spend time investigating Microsoft native technology: .NET Universal Windows Platform.
During our investigation on React Native for Windows we were able to wrap our Web backend code into a library usable from any UWP app.
We want to share our experience and our evaluation of the technology, considering that this was done a few months ago and that technology evolves a lot in time.
What is Universal Windows Platform
Universal Windows Platform, also known as UWP, is the leading-edge platform for Windows 10 applications and games, targeting desktop, Xbox, and Hololens. It provides a modern API both for frontend (Fluent Design) and for OS (WinRT). It is the biggest refactoring Microsoft has worked on since winapi, so since Windows 95.
It is designed with security at its core, and with the will to give control back to the user. Each UWP app declares a list of features it requires, known as capabilities, and it's up to the user to accept or deny such capabilities.
The native technologies used to develop UWP apps are Xaml and C#.
What is Xaml?
Extensible Application Markup Language (XAML) is the language used to define UWP app's user interface. It can be entered manually, or created using the Visual Studio design tools. It is a XML-like descriptive language, with a powerful binding system to call C# code. A
.xaml file has a
.xaml.cs code-behind file which contains the logic. Together, the XAML and code-behind make a complete class. Microsoft documentation provides a detailed XAML overview.
Creating the first UWP app
VisualStudio introduced UWP app projects back in 2015. To create a new UWP app project, start by installing "Universal Windows Platform development" using Visual Studio installer.
Once the needed SDK is installed, create a new "Blank App (Universal Windows)" project.
The solution created by this template contains the minimal file set to build and deploy a basic UWP application:
Assets contains a set of logo images, used in Start Menu, Store Logo, task bar and task manager.
Package.appxmanifest is a xml file containing the description of a project, such as the display name, logos and required capabilities
<Project>_TemporaryKey.pfx is the self-signed certificate, used to test the app before it is submitted to the store. When building the app VisualStudio will generate an installable certificate associated to this one, that can be added to the trusted loal certificates to side-load the UWP app without using the Store.
App.xaml and App.xaml.cs
- App.xaml is where resources that are used across the app are declared.
- App.xaml.cs is the code-behind file for App.xam. It is the entry point for your app. This is where activation and suspension of the app are handled.
- MainPage.xaml is where the UI of the app is defined.
Handling asynchronous communication with the backend
As a first iteration we used a Node.js process running along the UWP app. After verifing the feasability of this solution, we looked for a safer implementation.
Electron project uses Node.js compiled into a library, and they shared a great build guide in this blog post. We decided to not use Node.js as a library because it wasn't possible to build it into a UWP library, and to use a Win32 library would have required extra capabilities that we wanted to prevent using.
In .Net world, we had to convert TypeScript data models into C# ones, and we could use the power of Newtonsoft JsonSerializer Populate to deserializes JSON messages into C# objects.
Parsing Json to C# objects
Conclusion: React Native vs .NET UWP
While exploring React Native and .NET UWP, we found both languages are fun and straightforward to work with. Since our team was originally working with C++, C# looked like a smaller technology jump, but some of us were happy to move to a technology closer to web.
.NET UWP has the advantage of being built with Microsoft Fluent Design, providing modern and adaptive user interfaces. Beautiful features like navigation animations and acrylic textures can be achieved in few lines of code, and most of UWP controls enable them by default.
On the performance side, we evaluated both test apps loading a big test account, containing more than 1000 credentials.
|React Native||.NET UWP|
|Time to load login window||~1s||~0.6 s|
|Time to login|
|Time to show main window||~2s||~2.5 s|
Here .NET UWP was clearly performing better than React Native for Windows.
Wrapping up on our desktop technologies investigation, given our priorities of performance and user experience, .NET UWP is as of today the best solution, coming with the cost of a .NET development team. If performance is not a priority, Electron is a good solution to bring your web app to desktop.