Writing Applications, Not Web Sites, in Microsoft Blazor

Scott Kuhl
May 23 · 6 min read

Let’s examine the possibilities of creating an application with Blazor instead of a SPA based website. The case study I will use for this is YouTubeDownloader. It is simple enough to understand and has just enough technical challenges as a web site. The application lets the user search for a video, then select the video to download from YouTube.

What is Blazor?

Many of you are tired of reading this part, so I’ll keep it short. Blazor lets you write interactive web sites using C# instead of JavaScript. There, done.

Who am I?

I’ve been developing web applications for a living since the mid-nineties. I’ve worked through the CGI era, the server-side scripting era, the server-side compiled era, the client-side AJAX era, the client-side SPA era, and I’m just starting on the Web Assembly era. Yes, I think it's the beginning of a new era in web technology.

I am not the maintainer of YouTubeDownloader, I’ve just used it before and understand how it works.

Server-Side Blazor

Server-side Blazor uses all the power of C# and .NET Core to bring you a highly interactive website without JavaScript through the power of SignalR. Everything is rendered on the server and DOM changes are pushed back down to the client.

The first limitation here is interactivity. When we have a video ready for download it’s going to drop it into the download folder. We don’t have access to any other storage space. The application would work very much like y2mate.com and not feel much like an application.

The second limitation is offline support. We could just download it to the server and then play it, but that sort of completely missing the point of the application.

The third limitation is hosting costs. All the video processing is going to take place on our server, and we need to store the converted videos for a limited time. This is not an application we can host on something like the free hosting offers from Azure. This could get quite expensive under load. We could overcome that by having each user host their own copy of the application, but most users are not going to do that.

The fourth limitation is throttling. If YouTube suddenly starts to see abusive spidering of their site, they could block it entirely. I believe that’s what happened to podsync.net.

In our case we don’t have any API limitations because this application uses a web scraper and not the official API, but API usage is quite common. Most APIs will limit you to several calls over a given time, like a day. Server-side applications can help limit those calls by caching data, but that increases hosting costs. Other APIs limit the calls by IP address, which hampers a server-side solution since they are all coming from the same place.

We would also need to worry about API keys. If your application needs to access an API you are going to have hide that key by communicating with the API from your server. This is an issue that will follow every single application model. If the key is on the client, it is vulnerable.

Client-Side Blazor

Client-side Blazor does its magic by running C# in Web Assembly, the newish standard for compiling code safely to run in the browser. This would seem to be the holy grail and the savior to our server-side limitations, but there are other challenges.

The first limitation is CORS. Since the library being used by the application is a web scrapper, it will not be able to connect to YouTube.com. CORS is a security measure implemented by browsers that prevents JavaScript from reaching out to a domain other than the one that served it up. Many applications will need to reach out to an API, and unless that API has disabled CORS, you're stuck.

The second limitation is processing and RAM. Web Assembly is limited to a 32-bit process and 4GB of RAM. For most applications this is not going to be an issue, but video decoding is another beast.

The third limitation is sandboxing. YouTubeDownloader uses a third-party decoder, FFmpeg, for anything higher than 720p. We won’t be able to use that feature because we can’t download and launch another application not designed for Web Assembly.

The fourth limitation is storage. What started as a MB limit for Web Assembly has grown to a percentage of your hard drive. Our application is going to be okay on most browsers and devices. However, it is always possible that the browser cache will get cleaned up and all downloads lost.

The fifth limitation is debugging. At the time of this writing, Blazor does have the ability to debug client-side applications in Visual Studio and Visual Studio Code now, but it is limited, buggy, and you‘re’ going to feel it. This is likely to improve drastically and quickly, so by the time you are reading this article it may be a non-issue.

Progressive Web Apps

This is an extension of the client-side model. It is available out of the box by simply selecting an option on the template. It brings us several nice features but does not prevent any of the limitations of a client-side approach listed above.

Desktop Applications

Now we get to the option that eliminates every limitation I have mentioned so far, except the need to secure API keys, which our example does not have. Creating a desktop application lets you use the server-side template with all its power and deploy a client-side application with all its benefits.

The limitation here is there is no official support for native applications yet. It’s on the roadmap, but it's not done. So, we need to apply a wrapping technology to host the server-side application we create.

The good news is, it's extremely easy to wrap Blazor with Electron.NET and it does work, even if not officially supported yet. It will work on Windows, Mac, and Linux. Applications you may already use have taken the Electron route like Visual Studio Code, Slack and Microsoft Teams. But Electron does have one big issue: it's a memory hog.

An alternative is WebWindow, a super lightweight alternative to Electron, but its experimental and not ready for production apps.

You may consider distribution another limitation. You’ll need to deal with an installer or a store to get your application in the hands of your users.

Mobile Applications

This, like desktop applications, eliminates the web limitations.

The limitations here are also the same as a desktop application in that there is no official support and you must handle distribution.

I have not been able to find anyone that has tried Cordova, aka PhoneGap, with Blazor. In theory it should work. WebAssembly is supported in a WebView on Android and WKWebView on iOS, which is what Cordova uses.

The Blazor team itself is currently moving in a different direction and trying to integrate Xamarin and Blazor with Mobile Bindings. This like WebWindow is also experimental. But at least it has an entire dedicated section to it on Microsoft’s documentation site which is more than can be said about WebWindow. This also seems to line up with Xamarin Forms future as Maui.

Our application has another limitation, video processing is intense, and it could rip apart your mobile device. The library I am using will limit it to 720p which is okay for phones but not great for tablets.

Everywhere Else

I do see a future where Blazor runs everywhere from watches to televisions. .NET Core is very portable, as the team has proven by getting it to work on Web Assembly. Target as much code as you can to .NET Standard libraries, and you're bound to find a way to create an interface in Xamarin or Uno today that meets your needs.

Summary

If you are going to create an application today with Blazor I would look at the following options in the order listed until you land on a solution that works for your application:

  1. Client-Side
  2. Server-Side
  3. Electron + Mobile Bindings

You absolutely can find a way to port your application to Blazor, but if you land on option three you are on the bleeding edge and in unsupported territory.

If we were to try to port the YouTubeDownloader application to Blazor today I would land on option three.

The Startup

Medium's largest active publication, followed by +685K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store