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:
You should also checkout this video to get more information about Blazor:
Full stack web development with ASP.NET Core 3.0 and Blazor
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:
There are plenty of excellent demos & content about WebAssembly and Blazor such as these from Jeremy Likness:
Blazor and WebAssembly examples (part of a Blazor presentation) - JeremyLikness/blazor-wasmgithub.com
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:
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:
After you have used it awhile you will get prompt to install the application:
After that this “XO” application is visible in your mobile home screen as any other application:
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:
If you then hit the “Go!” button you can play with your friend using simple grid like 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:
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:
Contribute to JanneMattila/XOBlazor development by creating an account on GitHub.github.com
To summarize… It fair to say that:
You can certainly try this yourself:
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!