Thanks to Blazor WebAssembly compiling all your C# code, into native code that doesn’t run on the server from somewhere, but rather runs in the browser.
Considering that the application runs in the browser, the loading and rendering times of the user interface are non-existent, thus allowing a very pleasant experience for the end user. In order to see the benefits, it was decided to migrate a well-known application to .NET 5 and Blazor WebAssembly.
I’m going to tell you a bit 👇
At Ignite 2019, RPSLS (Rock, Paper, Scissors, Lizard, Spock) was introduced, simply a web game based on the classic Rock, Paper, Scissors, but with an added difficulty increase. Their goal was to show that services created in any language could run on Azure on a large scale.
When it launched, thousands of people tested the game in the first week. You can find the game code on GitHub (RPSLS).
What is really the game?
- It is simply a microservices architecture solution that has been built on Azure Kubernetes Service.
How does it work?
- There are two ways to play, one is against a friend using a URL that is generated on the spot. And another is you simply play against a bot. In the case of playing against a friend, nothing happens, but when playing against a bot, what you are really doing is playing against the microservice in the language you choose at the beginning.
For example 👇
If you choose .NET as your opponent, basically a service is running in .NET that tries to guess your next move. Guessing, the service tries to choose a move to beat you. The predictions run in .NET, as does the bot microservice and the web UI.
With the recent release of .NET 5 unified with Blazor, it made a lot of sense to update the game. This was not challenging, but what was interesting was not only upgrading to .NET 5, but also migrating the game to Blazor WebAssembly.
A new project was created with a template that had Blazor WebAssembly.
What this does, is create 3 projects👇
- Shared services
Simply moved the content of the Blazor Server page to the static folder index and replaced the BlazorServer framework with BlazorClient.
All .razor files from the old project were migrated to the new one.
Afterwards, the client’s project was configured to be able to initialize Google Analytics with the API key obtained in the Backend. Implement an authentication provider such as AuthenticationState to verify user logins before calling the server.
In general, it seemed a bit more complicated, but it turned out to be very simple. Developing the application layers in the same language made it not appear that a client-side application was being built, but compiling into native WebAssembly, it is.
Building a client-side application and still getting support for dependency injection, HTTP/GRPC clients, and the options pattern, in the same way as the backend, makes migration easier.
One of the advantages of the application is that it does not need persistence, so it can be migrated to Blazor WebAssembly without major changes. From Dotnetsafer we want to thank the .NET team for their great improvements. By making .NET 5 and Blazor more accessible to all applications to be migrated. 🤗