No one can argue that JavaScript is the backbone of today’s fast-paced and modern web applications. As of this writing, data suggests that JavaScript is one of the most widely used programming languages on the planet. The main purpose of JavaScript is to allow front-end developers to build beautiful user interfaces (UI) for web and mobile apps. But imagine if you could utilize C# on the front-end part of the application and make those same beautiful and user-appealing UIs in .NET. Wouldn’t that be a dream come true for any C# developer?
In today’s .NET programming tutorial, we will introduce programmers and web developers to the Blazor framework, which lets C# coders create user interfaces for web apps.
Read: Introducing the .NET Coding Pack
What is Blazor Framework?
Blazor is a web framework built for .NET. If you are familiar with front-end technologies, you can think of Blazor as you would any front-end framework, only Blazor is equipped with C# and Razor pages on the client-side. Just as other frameworks use JavaScript on the front-end to power up capabilities and features, Blazor enables .NET developers to ember server-based code into web pages using C# and Razor pages.
Blazor offers all the features that a Single Page Application (SPA) has. It allows programmers to use the same technology (ie; .NET and C#) for writing client-side as they do for writing server-side code. Coders can also build full-stack applications using Blazor and get the same scalability, consistency, and productivity .NET provides.
Web Assembly and the Blazor Framework
Web assembly works on the web in the same way as lower-level assembly language work. It allows the runtime to execute code as fast as native machine code. Through web assembly, high-level language code is converted into web assembly, which can be executed on the browser at native speed. With this advancement in web technology, developers can now run traditional, high-level languages like C#, F#, or VisualBasic on the browser.
Web assembly is supported by all modern browsers and is a part of an open web platform. It is easily utilized and debugged in the browser. There are several advantages of using .NET as a full-stack technology. Some of the advantages include:
- Consistent programming workflow across the platform
- Leveraging C# skills on both client-side and server-side
- Code sharing between client and server applications
Read: Getting Started with the AJAX ASP.NET Control Toolkit
Blazor on the Client-side
Let’s say, for the sake of maintenance, what would you do if you are required to build UI components completely in C#? What if your existing UI components are written in JavaScript and you are required to re-write them into C#? Thankfully the Blazor framework exists, which allows you to supplement JavaScript code with C# or Razor pages to make the UI components completely in server-side languages like C#. The .NET runtime then processes and renders all those UI components in the browser as static pages. Further, you can host these types of pages on any server that can serve static pages. The following diagram gives a pictorial representation of how Blazor works on the client-side.
Blazor on the Server-side
Now let’s see what magic Blazor performs on the server-side. Blazor allows programmers to build real-time apps (apps that need real-time data transfer such as data streaming) and require the network resources to be managed effectively in .NET with C#. You can create two apps for creating such types of projects:
- Blazor.App: Server-side applications
- Blazor.Server: ASP.NET Core server applications that hosts the server-side app
As you can see, the entire project is server-based. With the advent of such technology, it becomes more convenient to enable UI interaction within the browser. Web assembly is not used in these types of projects; instead, web developers would deploy a SignalR JavaScript application on the client-side (browser). The communication between server and client is made possible through web sockets.
Building Full Stack Applications with Blazor
You may be wondering: is it possible to build a full stack app using C#? Thanks to Blazor, it is entirely possible to build a full-stack (client-side as well as server-side) app using the same technology. This type of project template includes three components:
- Blazor.Client: Client-side .NET application
- Blazor.Server: ASP.NET Core Server application
- Blazor.Shared: Shares application logic between client-side and server-side
In a full stack Blazor app, the server-side application serves the request and provides API endpoints for the client-side application.
Read: Introduction to Caching in ASP.NET
Features of Blazor Framework
Now let’s take a look at some of the advantages of the Blazor framework. The framework takes inspiration from modern and robust Single Page Application (SPA) platforms such as Angular, Vue, and React. But Blazor is itself a framework with great support from the community. It is open-source, robust, and fast. Here are some of the additional features of the Blazor framework:
- Component model for UI
- Dependency Injection
- Forms and validations
- IntelliSense support
- Server-side rendering
- No need to reload the page while writing or making changes to code.
Final Thoughts on Blazor Framework
Blazor is currently in the experimental phase. Microsoft has not yet announced it as a product and neither do they provide any support for it. That being said, things are changing at a quick pace and the interest from the developer community is growing day by day. .NET developers always dreamed of using C# on the client-side and it looks like Blazor is going to fulfill their dream.
