Meet Blazor – A Razor that Runs in the Browser
Why Use Blazor Instead of Js and How it Works
12 March 2019
Let’s say you took the time and did all that. You’re ready to go but then you stumble on names like Npm, Yarn, Bower, Grunt, Volo, Ringojs, and Node.js. As if that wasn’t enough examples, here’s some more: Angular.js, React.js, Vue.js, Meteor.js, Ember.js, Backbone.js, Aurelia.js, Mithril.js and the list can go on and on.
You need to have some form of knowledge about these programs so you can at least make an educated guess about the technologies you’re going to use for the task at hand. That means extra time for researching and prototyping code.
Meet Blazor – A Razor that runs in the Browser
If this fits your current situation, you’ll want to meet the new kid in town:
- You’re part of a .NET team that deals mostly with server side code and only does small changes on the client side
- Your new request is to build a full featured client side web application
- You don’t have the time to put into learning js and ui frameworks rigorously
How is that possible, you ask? Let me explain…
It all happens in three layers:
Layer 1: Web Assembly – often shortened to Wasm
Web Assembly is a standard that defines a binary format and a corresponding assembly like text format for executables used by web pages. Basically, Wasm is a way of natively writing code for your browser using Web Standards in a form of a browser shelled bytecode format similar to an assembly language that your browser understands.
Another noteworthy point is that it was designed to take care of performance-critical portions of a page scripts, so it’s fast. The bytecodes generated runs into the “browser shell,” so basically they run in the very sandbox of the browser, which means there’s no security vulnerabilities present.
The World Wide Web Consortium (W3C) maintains the standard with contributions from Mozilla, Microsoft, Google, and Apple. So, you can rest assured that all the mainstream browsers implemented it, even the mobile ones, and for any other browser, your app will still run but keep in mind that there will be some small performance gaps.
Layer 2: .NET Runtime & Mono
So now taking the discussion a step further we need a way to get our beloved C# code to compile into Web Assembly code, and they accomplish that using Mono to compile the IL code in order to run in Web Assembly platform (learn more here).
The developer shouldn’t care about Mono. The developer is coding .NET Standard, and the code should run just fine on any of the three runtime environments that Microsoft provides: .NET Framework(CLR) / .NET Core (Core CLR) / Mono.
So, on the client we put a mono.wasm file. Once we have this file, we can load regular .NET assemblies inside the browser. The dlls are not compiled to Web Assembly, they run inside the the Mono runtime environment which itself is running on Web Assembly.
The whole runtime has 2MB at the moment but the Mono teams promised that they are working hard to make it even smaller. Even so, in my opinion having a full featured runtime environment in 2MB seems eccentric and considering that with caching we only load the file when the application first loads, I’d say it’s more than decent.
Layer 3: Blazor Framework
Blazor is the brand new Single Page Application UI Framework and it’s packed with all sorts of goodies too:
- Virtual DOM – It’s packed with a Virtual DOM much like React.js. Manipulating the DOM using JQuery for example is very taxing and most of the time pretty inefficient. So we make the changes in the virtual DOM and Blazor takes care of syncing the Virtual DOM with the actual DOM.
- MVVM like Components that offer Data Binding and Event Handling
- Dependency Injection out of the box
They picked Mono because is the preferred runtime environment for portable client scenarios.
Mono is compiled to run on web assembly and Blazor is the framework that sits on top of that, Blazor is able to take the dlls into Mono, and Mono is running those in an interpreter on the browser. By now this is the way the apps will run, but there are ideas to collapse this stack into a final compilation stage and all your application will be compiled in a web assembly directly.
So, what comes next? How can I have this running? There is a lot of new posts about how we can start to rock with Blazor, and we even have Visual Studio project templates to work with that:
Web assembly is a big project that comes to be with us for a long time, and the .Net community is doing a great job to provide services to enrich the browser application with .Net.
Blazor is the next evolution step to provide a full specification for Front End applications in a familiar platform for .Net developers, and it’s becoming more bigger and more robust with the time.
Dev Team Lead at Softvision Romania
Tech Lead at Softvision Buenos Aires
Community Manager at Softvision Ukraine
Community Manager at Softvision Buenos Aires