Blazor – Framework with C#, HTML & No Javascript. Is it a reality?
Since last 10 years we have followed a habit of mixing Javascript with html. Sometimes it is in form of jQuery, Ajax, native javascript, Angularjs, Reactjs, Vuejs and many other Javascript frameworks. But very rarely do we see alternative of javascript when it comes to Single Page applications. Blazor has made it possible.
What is Blazor and How it was invented ?
Blazor is an opensource and cross-platform framework for building interactive client-side User Interface. It is developed by the ASP.NET team of Microsoft. Its initial release was made in 2018. All of Windows, Linux and macOS support it. It is an alternative for all the other frontend frameworks for Single Page Applications like Angular, Reactjs, Vuejs etc. It combines the older Razor syntax with the new .Net and WebAssembly, allowing us to create both browser and server-side applications.
Blazor has brought WebAssembly to Tables that now it is possible to use .Net to fully develop your web application, limiting, if not eliminating completely, the use of JavaScript. For some, this might be a good enough reason to choose Blazor. Typescript is the most famous language nowadays, which was designed by Anders Hejlsberg who also designed C#. Features such as interfaces, classes, compile time type-checking, generics and even more already exist in C#. This makes Blazor a potential competitor of Javascript SPA frameworks as using it we can also create native mobile UIs.
How is Blazor flexible?
Blazor has a way of calculating UI changes as well as how these changes are rendered. This process sets Blazor apart from other frameworks like Angular, React. With Blazor you can also create UI for native mobile apps. For the native mobile app the mobile renderers would come into picture and web renderers cant be useful. Here we can do everything without using Javascript.
Types of Renderer or Hosting Models
Blazor’s component model calculates UI changes, but we can use different type of renderers. App component model includes Navigation, routing, and programming mode. These renderers manipulate how the UI is actually displayed and updated and are referred to as Hosting models. Following are the models:
Blazor Server
- Platform: Web (Every interaction handled on server. Prerendered HTML is optional)
- Status – GA/Production Supported
- Here the Blazor application runs on the server above the .NET core runtime.
- A JavaScript file downloads when user installs app and it establishes a two-way SignalR connection with the server.
- SignalR makes the user’s interaction with server realtime. Once server finishes processing, Blazor sends all updates to client side applying on DOM model.
Blazor WebAssembly
- Platform: Web (App with client-side execution and loaded from web server. It also can work offline via Service worker)
- Status: GA/Production Supported
- WebAssembly has given the Javascript SPA frameworks like Reactjs, Vuejs & Angular a run for their money. Here we can write entire UI logic in C# and avoid javascript. Blazor downloads Mono .NET runtime to the client’s browser while working with Blazor WebAssembly.
- Assembly also downloads the application DLL files and other dependencies. After everything is perfectly downloaded in browser, the Mono runtime gets bootstrapped. This in turn installs and executes the application DLLs.
Blazor Electron
- Platform: Desktop (Is like a Windows app and can work offline too)
- Status: Experimental (Not Committed)
Mobile Blazor Bindings
- Platform: Mobile (iOS and Android)
- Status: Experimental (Not Committed)
Here 3 hosting models understand web standards whereas one understands mobile standards. Web models use html & css whereas mobile renderer doesnt understand web standards but native mobile controls.
Features of Blazor
- Has lot of predefined UI components to build a custom web applicatiton
- Features from Asp.Net can be used through a function owing to Blazor’s “Javascript interoperability”
- Comes with Dependency injection
- Use SignalR without javascript through a Nuget package
- Works with older browser versions
- Allows debugging and has rich intellisense
- Easy server side rendering
- Integrated support for gRPC(Remote Procedure Calls).
- Lazy Loading support
Pros of Blazor
- It is open source
- Runs in sandboxed environment and gives fast performance like a native app
- Supports all needed javascript SPA framework features like Routing, Components, Dependency Injection
- We can deploy Blazor apps like static files on machines which dont have .Net
- Predefined UI components and rich intellisense makes development easy and fast
- Supports older browser versions and works fine without browser plugins
- Code stays on server and not downloaded to client
Cons of Blazor
- Doesnt work well in high latency environments
- Requires constant server connection
- Due to download size, devices with slower connections may have to wait long.
For any code queries, architecture or new project requirement on Blazor, you can mail me at shalin@ncoresoft.com or skype : shalin.jirawla
Cheers!!