Monday, July 20, 2020

What's Blazor WebAssembly and why should you care?


There was a peaceful time where web application development was simple. With ASP.NET, all we had to do was just open the IDE and drag UI elements from a toolbox to design a web page. Double-click on a button and we could write code in C# to be executed when that button was clicked, without needing to worry about how the web works. Needless to say, Microsoft devotees like me were living the dream. Well, JavaScript was still there, but it was the black sheep in the family, due to its amateurish design and issues with compatibility.  Nobody took it seriously unless they wanted some fancy animations. And then, someone saw it through and started standardizing it across browsers. It didn't take long for AJAX to come along and turn things upside down. We survived the first wave but when jQuery hit us, it hit us hard. Just when we were coping with the repercussions, a plethora of JavaScript-based SPA frameworks started to mushroom. All hell broke loose.


Does the above sound relatable? Well then guess what, Microsoft's Blazor WebAssembly is exactly what you've been dreaming of. Finally, a framework where you could forget about JavaScript and write client-side code in C# over WebAssembly. Sounds crazy right? But what on earth is WebAssembly anyway? It's another type of code that can be run on the JavaScript runtime which already comes built-in to browsers. WebAssembly in its purest form is not exactly readable. Hello, it's called Web *Assembly*! Ring any bells? But the thing is, you can convert code written in other languages to WebAssembly and make them run on the browser. That's how you get to write C# code instead of JavaScript. But wait, isn't C# compiled into IL and needs a .NET runtime? Well, how correct you are. That's why the Microsoft guys have ported the .NET runtime to WebAssembly which in turn runs your compiled code. Sweet!


I must mention that there is a different way to use Blazor on the server-side, having no dependency on WebAssembly whatsoever. It's called the 'Blazor Server' where the client-side becomes extremely lightweight and the plumbing happens via SignalR. But that's not everybody's cup of tea, at least not mine. And probably a topic for another day so don't get confused when I say 'Blazor', it's short for Blazor WebAssembly. Before you get all skeptical, Blazor WebAssembly is now production-ready and is officially released in May 2020. What's even better is that the 3rd party UI component builders like Telerik, DevExpress, Infragistics and the rest have already hopped in the bandwagon with their library counterparts for Blazor. It is open-source and free therefore it's receiving immense community support from around the world as a lot of additional component libraries, frameworks and whatnot are being created for Blazor as we speak. The ecosystem is booming and trust me it will be huge when .NET 5 hits the shores in November. So, this would be the best time to start investing, if you know what I mean.

Let's briefly look at a couple of things Blazor provides you out of the box. If you happen to create a Blazor app using the template which uses ASP.NET Core as the back-end, you can enable authorization with a single line of code. The authorization bearer tokens would be included in the request headers without you needing to do any manual work, thanks to the boilerplate code created by the project template. Localization is a similar cross-cutting concern but .NET has a proven way of nailing it for decades. Yes, you guessed it right, Resource Files FTW! You just have to wrap your string literals with @Localize[""] and the magic happens behind the scenes. The same goes for other i18n aspects like the number and date formats. .NET thread culture is set automatically to the browser's culture so there is very little left for you to do.



Interoperability with JavaScript is another cool feature that shouldn't go unnoticed. Blazor supports calling JavaScript from .NET and vice versa. It becomes quite handy when you want to reuse an existing JavaScript library without wanting to rewrite it in Blazor. Incidentally, you might also want to write your own piece of JavaScript code and make it available for Blazor. Whatever the requirement, it's a piece of cake to hook these two together. If you are conscious about offline support, you'll need to use IndexedDB, the NoSQL storage provided by the browser. And if you've already used it by any chance, you know its asynchronous API is a disaster to work with. But the good news is, there are NuGet packages already being built for Blazor which lets you consume it similar to EF, letting you only worry about the data and not how you store or retrieve it. 


One other great feature you get when developing with Blazor is full-stack debugging support in Visual Studio. For example, you can seamlessly put breakpoints in your server code, client code or even in JavaScript code which you interop with and simultaneously step through them in a single session. There are no messy debugger statements or switching between IDEs, just true full-stack debugging. And you can even do the same in Visual Studio Code. Since Blazor uses regular .NET assemblies on the client, code sharing becomes a breeze. How many times have you had to duplicate your DTOs in your server and client? Since it's all in .NET now, you can just define them in a shared library and refer it either from server or client, being totally oblivious to the fact that the latter runs on a browser.


There is more to Blazor apps like its ability to convert them into Progressive Web Apps and to be hosted as pure static sites. So it's definitely something you should try out to see where it stands in the crowd. And if you are a .NET enthusiast, it's undoubtedly a crucial skill set to add to your arsenal. It's already a game-changer and there is so much yet to come. Keep an eye out for stuff like Hot reloading, AoT compilation and CSS isolation when Blazor gets shipped with .NET 5. Visit https://blazor.net today and give it a try. The tables have started to turn, so grab your seat. It's now or never!



References:
  1. https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0-now-available/
  2. https://www.pluralsight.com/courses/web-assembly-big-picture
  3. https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor
  4. https://youtu.be/My_XOzQWwc4


No comments:

Post a Comment

What's Blazor WebAssembly and why should you care?

There was a peaceful time where web application development was simple. With ASP.NET, all we had to do was just open the IDE and drag UI ...