Progressive Web Apps and Blazor is combination you should not miss!

When Daniel Roth announced Blazor in 2018 I was immediately sold. I knew that this is going to be huge thing and wanted to start using it in my projects. In case you have missed all the fuzz about Blazor then here’s the description of it from blazor.net:

Blazor lets you build interactive web UIs using C# instead of JavaScript. Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS. Both client and server code is written in C#, allowing you to share code and libraries.

You should also checkout this video to get more information about Blazor: 
Full stack web development with ASP.NET Core 3.0 and Blazor

So I started to use Blazor in my spare time project and immediately noticed many benefits for doing so. It was much easier for me to create complex logic in C# in Visual Studio than it would have been with TypeScript/JavaScript. Mainly of course since I could use my existing C# skills for example writing unit tests and debug them. But also because Visual Studio helps me a lot in that journey. Example of that is Live Unit Testing:

Live Unit Testing in Visual Studio

In Blazor working with simple events (e.g. button click) feels almost magical when you can jump from the web world into C# world just like this:

Button tag with event handler for ‘onclick’
C# event handler that gets invoked from the button

There are plenty of excellent demos & content about WebAssembly and Blazor such as these from Jeremy Likness:

I was also using another web technique (in another spare time project) called Progressive Web Apps. Definition from Wikipedia:

Progressive web applications (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native applications. PWAs combine the flexibility of the web with the experience of a native application.

In case you’re not familiar with progressive web apps then I recommend learning more about it. It’s one of the building blocks in the future web applications. Here are few links to get you started:
https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps https://developer.microsoft.com/en-us/windows/pwa
https://developers.google.com/web/progressive-web-apps/ https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps
https://www.pwabuilder.com/

Then it suddenly hit me. What if I combine Blazor and PWA? I could create apps that get feel like native applications and they also support offline *AND* I could use C# to implement it.

Let’s take Xs and Os (a.k.a. “Tic-Tac-Toe” or “Noughts and crosses”) game for our example project. Requirements for our application are:

  • You can play with your friend locally just like you would with pen and paper
  • You can play against computer
  • You can make computer play against computer
  • There should be multiple computer implementations available
  • App should feel like native app
  • Everything should work also offline

So let’s first see from end user perspective how the PWAs get installed to your machine. Since this application is basically web application you first navigate to the location were it’s hosted:

Application main view in browser (screenshot from mobile browser)

After you have used it awhile you will get prompt to install the application:

Application installation prompt (screenshot from desktop browser)

After that this “XO” application is visible in your mobile home screen as any other application:

XO icon in home screen of my phone

When you launch the application you get splash screen that’s according to you manifest definition. And this application is fullscreen application which means that browser address bar is also hidden:

XO app main screen view

If you then hit the “Go!” button you can play with your friend using simple grid like view:

XO play view

You can also then choose from the available computer options and make them play against each other:

Since above algorithm is simple and just tries to play nearby the previous move to any random available position this might look pretty funny 😊:

And when you’re travelling and you don’t have network you can still play the game normally:

Playing XO even without network

Okay now we saw how this works from end user perspective. What about from developer perspective them? If I now look the current state of the source code (note: I’m not done with the code so these stats might be off when you’re reading this):

  • ~160 lines of TypeScript code
  • 2000+ lines of C# code

And if I have already done further changes this would very likely mean that there will be less TypeScript code and more C# code. This means that if I have to introduce new “Super Fancy AI xyz based” computer opponent I can do that with C# and use my existing experience and tooling in the implementation. This just proves that Blazor can be amazing productivity boost in many applications!

As mentioned this code is a still very much work in progress and bit in “Frankenstein stage” since I’ve moved portions of code from my Kubernetes based app into this. And I do have better computer implementation half baked into the source code already. Source is available in GitHub:

To summarize… It fair to say that:

Janne ❤ Blazor + PWAs

You can certainly try this yourself:

https://jannemattila.github.io/XOBlazorApp/

And for all my Azure DevOps friends… We do have CI for this in the public project:

And CD as well:

Hopefully you find this post useful!