Meet Blazor – A Razor that Runs in the Browser

Why Use Blazor Instead of Js and How it Works

Yuriy, Matias, Razvan & Javier
Yuriy, Matias, Razvan & Javier

Latest posts by Yuriy, Matias, Razvan & Javier

As a backend developer coming from a strict C++/C# background, one of the issues I faced when trying to learn JavaScript was the multitude of ways you can accomplish one thing. For example, when I would try to write my first function I discovered no less than six ways of doing it. Many of them are not only syntactic sugar, but impose subtle differences regarding things like prototyping or scope that a good programmer needs to be aware of.

JavaScript looks easy on the surface, but for a programmer with a strong object-oriented programming language background learning JavaScript in depth is not the most trivial thing to do.

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

His name is Blazor and this time it’s serious. It’s not some plug-in like Silverlight or Flash. This time it cuts out the middle man and goes directly to the core. Blazor allows us to bypass JavaScript code and write C# code that the browser understands and runs natively.

How is that possible, you ask? Let me explain…

It all happens in three layers:

Layer 1: Web Assembly – often shortened to Wasm

Up until now, if you wanted to build code that runs in the browser you needed to use JavaScript. Now we have an alternative by leveraging Web Assembly.

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.

If you want to know more about the platform you can visit the official web site and the MDN page.

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
  • Routing
  • Layouts
  • Bi-directional JavaScript/C# interop in case you need it

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.

Blazor.js and Mono.js are intermediate layers for the browser to help to things like js interops to talk with JavaScript and fill some gaps not yet cover by web assembly. This allows us to go back and forth to JavaScript, meaning we can invoke JavaScript modules and functions within Blazor and from JavaScript, invoke dotnet functions.

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:

●     A Hanselman post about Blazor and Debugging

●     Gaming with Blazor? That is also possible!

●     A simple project template for start with Blazor

●     A health application with Blazor

Summary

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.

If you are familiar with C#, .Net Standard and you want to code Front End UI for your backend services but you don’t want to go over hundreds of JavaScript frameworks and its versions, Blazor is a good starting point to work.

Contributors:

Razvan Piticas
Dev Team Lead at Softvision Romania

Javier Paez
Tech Lead at Softvision Buenos Aires

Yuriy Vey
Community Manager at Softvision Ukraine

Matias Baldi
Community Manager at Softvision Buenos Aires

Share This Article


Yuriy, Matias, Razvan & Javier
Yuriy, Matias, Razvan & Javier

Latest posts by Yuriy, Matias, Razvan & Javier

No Comments

Post A Comment