Developing Rich, Client-side UIs with Blazor and C#
When we develop web applications today, usually we create some code that runs on a server (done in Java, .Net ..), which is hidden from the user, and then use some frontend frameworks (like Angular, React, Vue) to create the UI and show it to the user in a browser. The backend and frontend are basically separated.
Everything is fine in this way of working, but however there is a catch: You cannot use the language that you use for your server-side code to create UIs for the browser. This means that you cannot reuse your skillset and you usually end up learning frameworks that have steep learning curves.
Wouldn’t it be great if you could use the same language on your server, in your libraries, and in the UI?
Well now we can!
Thanks to WebAssambly we can now compile and run any type of code (like C++ or C#), to WebAssembly bytecode and run it in a browser at near-native speed without the need for a plugin (yes, no Flash no Silverlight!). WebAssembly is a native part of all the major browsers, including mobile browsers. It is a compact bytecode format optimized for fast download and maximum execution speed.
All of this means that now the .NET runtime runs in the browser and can run whatever .NET (Standard) assemblies, that you give it, including C# code that we create in a Blazor application.
What is Blazor and how does it work?
Blazor is a single-page app framework for building interactive client-side Web apps with .NET. With it both client and server code are written in C#. Thanks to Blazor and WebAssambly we can now use C# to create interactive web applications and can reuse our existing libraries.
You create Blazor apps with Visual Studio. This means we get IntelliSense, IntelliCode, debugging support, and all the other features we are used to in the .Net ecosystem out of the box.
In short, a Blazor application consists of things that make up a website (HTML and CSS) together with C# code. Blazor apps are built using Razor components (see Dialog.razor in the picture below). These are files that contain both C# and HTML and are reusable blocks that you can use in your application. Components like this can be nested into other components and into navigable pages (marked with the @page = “/” in Index.razor)
When a Blazor WebAssembly app is built and run in a browser:
• C# code files and Razor files are compiled into .NET assemblies.
• The assemblies and the .NET runtime are downloaded to the browser.
• Blazor WebAssembly bootstraps the .NET runtime and configures the runtime to load the assemblies for the app. The Blazor WebAssembly runtime uses JavaScript interop to handle DOM manipulation and browser API calls.
Useful links for further reading:
https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor
https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-3.1
https://www.pluralsight.com/courses/getting-started-blazor