UWP development to Blazor for cross-platform development for a small audio application [Part 2]

In this article I will go over my journey of building an application that runs on multiple platforms. My original application was a classic UWP application, in this part we will go over my attempt to try and use Blazor in a 4 hour time box.

This article will be broken into 4 parts:

• [Part 1] What I originally had: one UWP application migrated to one UWP app with a .NetStandard 2.0 library
• [Part 2] Building a Web Assembly application using Blazor Preview 8
• [Part 3] Using the Uno Framework
• [Part 4] Using Xamarin Forms to build an Android App
• [Part 5 ]From UWP development to using Xamarin Forms to release an application to the Android Play Store

Blazor WebAssembly

What is it: Blazor WebAssembly is Single-page apps that are downloaded to the client’s web browser before running. The size of the download is larger, depends on the app, but the processing is entirely done on the client hardware. However, this app type enjoys rapid response time. As its name suggest, this client-side framework is written in WebAssembly, as opposed to JavaScript. [thank you wikipedia]

It has the word app which in my head means that it can be download on the devices of my users.

Also looking at this:

Blazor | Build client web apps with C# | .NET

I can use C# (big plus for me).

Blazor is in Preview

I was really hoping for the build it once run it everywhere idea to work for me. However as of early September 2019 (when I started writing this post) Blazor is still in preview and unstable, n̶o̶ ̶d̶e̶b̶u̶g̶g̶e̶r̶ etc etc.

[Update October] the C# debugger is now working!

Also, I am clearly not an expert in JavaScript or HTML and a lot of the frustration and slowness of development was coming because of this.

A clear example of my lack in knowledge was for example that I had no idea how to create a ListView Control like in XAML. I quickly found that I needed to use div or ul / il, also the blazor sample template helped me a lot. I later learned that there are plugins/libraries that could have helped me build a Listview but that will be for my next version.

I create my version of a list view, design my component and had a more or less working vertical list view that could hold multiple horizontal lists.

I tried decided to time box myself to only spending 4 hours on Blazor, and this is the end result:

Here is my project structure, the application only referenced my MyAudio.Common and I was able to reuse my http calls and my item models.

Because of the 4 hours time box I was not able to go further in my development, however I do think that once Blazor is out of preview it might be a good way for me to target different devices. I will clearly need to improve my web skills.

The huge advantage that I found for using Blazor WebAssembly was that I would only need to write my application once and it should run on both iOS and Android. The downside was that the web did does not have already defined controls which means that I needed to create everything from scratch. Also Blazor is in preview, we will need to wait for the final version to compare again.

In the next parts we will see:

• [Part 3] Using the Uno Framework
• [Part 4] Using Xamarin Forms to build an Android App
• [Part 5 ]From UWP development to using Xamarin Forms to release an application to the Android Play Store

Happy coding