I would like to start using Blazor, despite the fact that it is still at the alpha level.
As I understand it, Blazor uses WebAssembly to compile C# on the client side.
And I have these questions:
Does this approach run faster than, for example, React / Vue.js, compiled in JavaScript?
Is it true that the browser will need to download the WebAssembly library every time the page loads?
On the Internet there aren't any comparisons of the performance of popular JavaScript frameworks. So I would like to know the theoretical performance of the new framework from Microsoft.
On April 2021 we did a trial of Blazor WASM against a legacy Angular.js web app, as well as against Flutter Web (HTML & CanvasKit renderers). We've recreated the main page of the legacy app (which is essentially a big data grid with filters, pagination, sorting etc.). Here're a few takeaways:
Lighthouse perf. Scores
Grid Displ. Data transf. Data uncomp. Reqs. FCP SI LCP TTI TBT CLS
Blazor* 2.2s 4.7MB 13.7MB 99 0.5s 1.6s 0.5s 2.1s 1.3s 0.01
Flutter HTML 1.7s 2.1MB 3.7MB 15 1.9s 2.5s 2.2s 2.3 0.2s 0
Flutter CanvasKit^ 2.8s 4.7MB 10.5MB 17 1.0s 2.2s -/- 2.2s 1s 0
AngularJS` 1.9s 2.0MB 5.7MB 294 2.1s 2.2s 2.6s 2.6s 0.1s 0
*Lighthouse gives incorrect LCP value (it counts Blazor's blank 'Loading...' page as LCP)
^Flutter's CanvasKit renderer doesn't allow Lighthouse to get LCP measurement
`Legacy app is much bigger then PoCs created, there're many more screens and assets which affect the number of requests upon app launch
As I understand it, Blazor uses WebAssembly to compile C# on the client side.
Half true. You can write your code to WebAssembly (WASM) client side (yes, it is C# on the client side), but you can also execute the logic server side. Both have benefits. All your code is visible if you go the WASM route. But it can rerender faster than if the logic is all server based -- but if it's server based your code isn't viewable.
Does this approach run faster than, for example, React / Vue.js, compiled in JavaScript?
No. I've done a ton of Vue.js and Vue.js runs faster. But I can write code a lot faster using Blazor. And Blazor offers a virtual scrolling solution that can make it appear faster. In my case the available plotting components were too slow. I wrote a Blazor component using C# and JavaScript that worked very well. Most of the time I don't worry about the WASM code running too slow...but the plotting needed to be much faster...and Blazor let me have my cake...I just had to do some low level work in JavaScript. Blazor execution has gotten faster over the last six months and the team says there is more to come when .NET 6 comes out. But it's more than fast enough for 99% of what I've ever need to do.
Is it true that the browser will need to download the WebAssembly library every time the page loads?
Not if they are cached. And even the first time they load, it isn't slow if you have a decent connection. It is on the order of 10 MB.
The great unasked question -- is it worth using? I've been using it for about six months.
For me it has been great. C# is a very good language. Sometimes I miss adding a property dynamically and often you have to manually initiate a redraw, but with features like nullable object checks warning you that you didn't check if your code could cause a null reference check -- it is much better than JavaScript. I often felt it was painful to work with the JavaScript "toolchain". It is so nice to be able to opt out of the library thrash of JavaScript.
The ASP.NET Core roadmap for .NET 6 can be found on github here. You will find that Blazor has by far the most tasks.
Note that the list indicates those items the ASP.NET team will be focusing on meaning that they are putting alot of their emphasis on improving Blazor.
This issue represents the list of major investments our team will focus on during .NET 6 timeframe. The items on this list are only major areas of investments, and do not include all the features and bugfixes we will be tackling during this time.
Below are some of the tasks they have been working on:
Tasks completed:
AOT Compilation. Compile everything to WebAssembly
Improve SVG support in Blazor. Top-level issue for SVG support in Blazor
Support byte-array transfer in JS Interop.
Tasks in progress
Hot reload for Blazor. Build performance optimization
Pause and resume Blazor applications.
Target and deploy to desktop platforms.
Remove size limitations imposed by SignalR message size.
Drag & Drop. Provide events that users can subscribe to during drag and drop