Blazor is a new Microsoft web framework designed to compete with industry leading platforms like React. Except that, instead of using JavaScript, runs on the .NET runtime and enables developers to create interactive web applications with C # and HTML.
What is ASP.NET inclusive?
If you come from the world of JavaScript frameworks, you may be confused regarding linking Blazor to ASP.NET. Both are “web frames”, but Blazor is just a part of the ASP.NET ecosystem.
While the ASP.NET platform has almost 20 years at this time, not a dinosaur frame; has steadily improved along with C # and .NET as a whole, since Microsoft uses it internally. It is absolutely cross-platform and as efficient as ever.
At first, only ASP.NET existed, that can be used to make all kinds of web applications. I was ASP.NET MVC (Model-View-Controller), that creates data-driven web pages, and ASP.NET WebAPI, which specializes in backend API. These were recently merged into a unified package with modernized ASP.NET Core.
Five years ago, Razor Pages (which is something other than Blazor and has a confusing name) was released to simplify the expressive syntax of MVC, which needs a lot of standard text and, as such, does not work well with component-centric design of modern applications. MVC needs you to create view and model for each page in separate files:
In the meantime, with Razor, you can create more optimized pages or components with code embedded in the page itself. This works best when the pages are simpler, but both are available as options for your use.
All these features are part of the ecosystem “ASP.NET”. The big part is the packages and support. In the same way as NPM for JavaScript, C # also has a healthy package environment with NuGet package manager.
Then, What is blazor?
Blazor does not change anything about the syntax of these pages. You will continue to use Razor pages and / o MVC. Actually, this is not even a bad thing, because there are already numerous user interfaces and component libraries built for C-backed Razor pages #.
What Blazor adds is interactivity. Traditional MVC pages / Razor using ASP.NET have always been clumsy and have had trouble keeping up with realtime web applications like React. Real-time web applications are so fast that they are also beginning to take control of the desktop, with frameworks like Electron running apps in a Chromium container, without users noticing.
Then, Blazor was created to meet this demand. It works in a very equivalent way to React, where actions modify status and accessories and trigger app updates. The framework will take care of updating the DOM based on the components that need to be updated. This enables real-time applications in which the page can be refreshed or even completely redrawn without having to refresh the browser..
Blazor's benefit over an established framework like React is the language. Enables you to build web applications with C #, and that alone makes it attractive to many developers. Whatever your take on the dynamic vs. static writing debate, there are definitely benefits to “desk” how C #, and the web seriously lacks alternatives to JavaScript.
If you have a backend that needs high performance, C # also it will run much faster than JavaScript. Even though JS is by no means slow and has improved a lot over the years, will still perform less than C #, which is actually pretty close to native C performance ++.
Blazor enables better interoperability. Many applications also use C # and el backend. As an example, you can have an ASP.NET API that interacts with your React interface. You will need separate models for the server and the client side, as well as a separate code to interact with them. If they are of the same language, enables you to easily share code and libraries between client and server. This is why NodeJS exists on the server side, even though JavaScript is not the ideal desktop language, having integrated applications in a single language reduces development time.
The future of Blazor
Actually, there are a few different types of blazor, since Microsoft has been making a big development push recently to modernize the ASP.NET ecosystem. Today, there are two versions that have been released:
- Blazor server, which works like React Server Side Rendering and does most of the rendering on the server.
- Blazor WebAssembly, which uses the magic of WebAssembly to run real .NET code in a real client web browser.
Microsoft also plans to release three more versions of Blazor, that are still in development and available for preview:
- Blazor WEIGHT, which is designed to publish the site as a progressive web application (WEIGHT) installable.
- Blazor Desktop / Hybrid, which makes it possible to pack Blazor applications into desktop applications and is simply like Electron but with better performance.
- Blazor native, which replaces the web-based user interface with a platform-native interface. It is not clear how useful this is, while interoperability with existing Blazor tools, and this version is still in the planning stages.
In your Blazor Desktop ad, Microsoft stated that “Blazor is an application programming model. It is very adaptable and can be executed in various ways (According to the need) “.
Microsoft seems to think of Blazor as its next standard for creating application interfaces.. His work is also important to highlight, because as applications become more and more dependent on the web, more difficult to justify creating separate interfaces for web and desktop. Blazor has a bright future and web applications built today on Blazor Server and WebAssembly will have plenty of room to grow..
Blazor Server frente a Blazor WebAssembly
Blazor Server uses a SignalR connection to communicate between client and server. This is just a fancy layer on top of a WebSocket connection, which can optionally fall back on other connections when needed. This keeps all processing on the server and leaves the client as a simple view with a basic way to manipulate the DOM.
Blazor WebAssembly is where it gets really cool. WebAssembly (WASM) it's not really a language you write in, but a compiler target. Actually, works almost exactly like Microsoft's intermediate language (MSIL) in which all C's are compiled #, F # and VB.NET. Except that, instead of running with a .NET runtime, runs using the WebAssembly runtime in the browser.
The great thing about WebAssembly is that it is a relatively easy compiler goal to achieve. In the same way as C # can be compiled into MSIL, C # it can also be compiled in WebAssembly. Well, technically, is MSIL compiling in WebAssembly (since it is simpler), but the point is the same.
Any language can be compiled into WASM, including absolutely native desktop languages like C ++. This is not theoretical, actually works in practice. AutoDesk was able to port AutoCAD, a C code base ++ from 30 years, to a web application based on WebAssembly, in a few months with relative ease. Someone even ported Doom 3.
Blazor WebAssembly just takes the whole server, as well as the .NET runtime and runs it on top of WASM. Subsequently, instead of talking to the server via SignalR, talks directly to the DOM. This eliminates server-side processing, which may be ideal for some applications.
This puts it in a unique position to compete with frameworks like React, since it is essentially the first true competitor of JavaScript for client web applications. Although you do have to add some script tags to load the runtime and you might have to dip your toes into the JavaScript code for some things., for the most part, you should be able to create a full production web application without writing a single line of JavaScript.
Blazor WASM has slow initial load times, but this can actually be fixed through the use of a hybrid mode that uses the pre-rendering to generate the initial rendering on the server, but run all subsequent updates via WASM. This has a ton of quirks and is still in beta, but if you want more information, may see these Jon Hilton guides.
Si utiliza Blazor Server o Blazor WebAssembly, it's up to you. Both have their advantages. Blazor Server runs all processing code in a trusted environment and does not require you to have a public API. Blazor WASM is responsive and fast, and it can even be implemented as a static site served only with NGINX.
How does Blazor work with JavaScript?
Whatever the case, has full JavaScript interoperability. Blazor can call JS functions from managed code:
private async Task ConvertArray()
{
text = new(await JS.InvokeAsync<string>("convertArray", quoteArray));
}
And vice versa:
DotNet.invokeMethodAsync('{ASSEMBLY NAME}', '{.NET METHOD ID}', {ARGUMENTS});
Despite this, note that this, of course, will use reflection, and it's certainly not the most effective thing in the world.
Technically, you can use all NPM packages with Blazor, even when configuring and interacting with it from the .NET side can be a headache, so you should prefer a NuGet package most of the time.
Can you use Blazor on the desktop (Electron)?
Surprisingly, the solution is yes. Although Microsoft plans to release Blazor Desktop / Hybrid, that does the same, in the meantime, can use normal Electron. This is because Electron doesn't truly care what web page it is serving and only one Blazor application can serve.
You might think you would use a Blazor WebAssembly app, but it's actually easier to just add Electron to an existing ASP.NET Core server. WASM has some overhead, so this method is faster. That is what Electron.NET does it, and it works surprisingly well. All you have to do is install it and add Electron as an ASP.NET service. Additionally you can call native Electron functions from C #.
Despite this, Microsoft has bigger plans for Blazor Desktop. They plan to completely ditch the dependency on a browser and JavaScript and just run a native container with a webview that is .NET all the way through..
“The Blazor desktop will be structured in a way equivalent to how Electron works. There will be a WebView control that processes content from a built-in Blazor web server, that can serve both Blazor and other web content (JavaScript, CSS, etc.) “.
This webview would use Safari, WebKitGTK o WebView2, depending on the operating system. WebView2 uses Chromium under the hood, so it would work very much equivalent to Electron, except for being more efficient and using less memory.
Whatever the implementation, it's exciting to see another platform competing with JavaScript and Electron to build cross-platform desktop and web applications. Blazor Desktop should launch in November 2021 with the first .NET preview 6.
