At Assemblysoft we have been developing applications with Blazor before it was officially released. Why the excitement? As .NET specialists here at Assemblysoft, Blazor is a technology that enables some amazing capabilities that we can pass onto our clients with huge cost and development time benefits.
Firstly we need to understand what Blazor is.
What is Blazor?
Blazor is a Single Page Application development framework. The name Blazor is a combination/mutation of the words Browser and Razor (the .NET HTML view generating engine). The implication being that instead of having to execute Razor views on the server in order to present HTML to the browser, Blazor is capable of executing these views on the client.
Browser + Razor == Blazor
Blazor lets you build interactive web UIs using C# instead of JavaScript. Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS. Both client and server code is written in C#, allowing you to share code and libraries.
Blazor is a feature of ASP.NET, the popular web development framework that extends the .NET developer platform with tools and libraries for building web apps.
What Blazor is not
Blazor is not like Silverlight, Microsoft’s previous attempt at hosting in-browser applications. Silverlight required a browser plugin in order to run on the client, which prevented it from running on iOS devices.
Blazor does not require any kind of plugin installed on the client in order to execute inside a browser. Blazor either runs server-side, in which case it executes on a server and the browser acts like a dumb terminal, or it runs in the browser itself by utilising WebAssembly.
Because WebAssembly is a web standard, it is supported on all major browsers, which means also client-side Blazor apps will run inside a browser on Windows/Linux/Mac/Android and iOS.
Built on open web standards
Blazor uses open web standards without plug-ins or code transpilation. Blazor works in all modern web browsers, including mobile browsers.
Code running in the browser executes in the same security sandbox as JavaScript frameworks. Blazor code executing on the server has the flexibility to do anything you would normally do on the server, such as connecting directly to a database.
Share code and libraries
Blazor apps can use existing .NET libraries, thanks to .NET Standard—a formal specification of .NET APIs that are common across all .NET implementations.
.NET Standard allows the same code and libraries to be used on the server, in the browser, or anywhere you write .NET code.
Read more about code sharing with Blazor
JavaScript interop
Your C# code can easily call JavaScript APIs and libraries. You can continue to use the large ecosystem of JavaScript libraries that exist for client side UI while writing your logic in C#.
When using server-side code execution, Blazor takes care of seamlessly executing any JavaScript code on the client.
Learn about JavaScript interop
Run on WebAssembly or the server
Blazor can run your client-side C# code directly in the browser, using WebAssembly. Because it's real .NET running on WebAssembly, you can re-use code and libraries from server-side parts of your application.
Alternatively, Blazor can run your client logic on the server. Client UI events are sent back to the server using SignalR - a real-time messaging framework. Once execution completes, the required UI changes are sent to the client and merged into the DOM.
Share code and libraries
Blazor apps can use existing .NET libraries, thanks to .NET Standard—a formal specification of .NET APIs that are common across all .NET implementations.
.NET Standard allows the same code and libraries to be used on the server, in the browser, or anywhere you write .NET code.
UI component ecosystem
Get productive fast with re-usable UI components from top component vendors like Telerik, DevExpress, Syncfusion, Radzen, Infragistics, GrapeCity, jQWidgets, and others.
Free tools for every operating system
Visual Studio and Visual Studio Code provide a great Blazor development experience on Windows, Linux, and macOS.
If you prefer to use a different editor, there are .NET command-line tools that allow you to work with the editor of your choice.
Interactive web UI with C#
Blazor lets you build interactive web UIs using C# instead of JavaScript. Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS. Both client and server code is written in C#, allowing you to share code and libraries.
Blazor is a feature of ASP.NET, the popular web development framework that extends the .NET developer platform with tools and libraries for building web apps.
Blazor is open-source
Blazor source code is available here. The source code is owned by The .NET Foundation, a non-profit organisation created for the purpose of supporting open-source projects based around the .NET framework.
Find out the benefits of Blazor over Angular, React and other JavaScript frameworks. Blazor enables sharing code across client- and server-side processes, server-side rendering functionality and more.
When building a single-page application, Angular or React are popular JavaScript frameworks to use. And up until now, the majority of client-side processes are written using JavaScript. However, there is an evolving framework that will allow you to write client-side processes using C#.
Blazor is a .NET framework for creating a single-page application that allows you to create your application using C#, Razor and HTML. The client-side of Blazor uses WebAssembly, which has been shipped with major browser engines, such as Internet Explorer, Chrome, Safari and Firefox. WebAssembly is an alternative to JavaScript in writing client-side code. And it can be converted using many different programming languages. In Blazor’s instance, it is converted using C#.
What does that mean in layman terms?
A typical scenario for building a web application using ASP.NET, is to drop .NET code on a server and that code generates HTML & JSON in response to requests from the browser.
In a nutshell
- Blazor is a SPA framework
- It’s relatively new from Microsoft
- It means we can actually use C# to create client side web applications
First Class Citizen
It’s a core part of ASP.NET Core so basically a first class citizen now. As a result Blazor updates will be rolled out as part of the ASP.Net Core release cycle.
GitHub
The Front-End landscape as we have known it
As developers, we have become accustomed to Full-Stack development with more platforms and frameworks emerging, particularly with JavaScript on the client and server.
It is not uncommon for our back-end logic to reside in a cloud with micro services, server-less or more traditional rest APIs using Net and Cloud and our clients to be written in a framework like Angular or a library such as React and obviously a whole host of other technologies permutations, the list of options is shifting constantly.
Some aspirational achievements
If we look back at the not so distant past for .Net we can even see the likes of Silverlight which had the unfortunate limitation of requiring an activeX runtime object which Apple decided flatly not to support. However the idea was born for being able to run cross platform Server side & Client side applications using .Net with re-use of the same .Net components.
The problem I am sure you will come across on a day to day with Full Stack Development is context switching. Bridging between different languages, and eco-systems adds cost and complexity. One minute you are writing JavaScript or typescript and spending time working with the framework or library hierarchy and patterns to solve problems and then we are working on C# and .Net, each with their own package management and configuration issues.
Assemblysoft are a Blazor development company based in Bournemouth, Dorset. We offer Blazor development services and can act as your Blazor development partner. We can provide FullStack Blazor development or act as your silent .NET partner.
Finally .NET, End to End
Blazor is really set to revolutionise this workflow and enables us to write .Net code, much of which is shared both on the client and server, where that makes sense.
Using Blazor we can write responsive Web UI components with C# and Razor, share code between the client and server and when we need to call into JavaScript to utilise an API or Library, we still can with JavaScript Interop.
Hosting Models
Blazor can operate in a number of different modes or hosting models. At the time of writing this article i can count at least 5.
- Blazor Server
- Blazor WebAssembly
- WebWindow
- Electron + Blazor
- Mobile Blazor Bindings (MBB)
Steve Sanderson refers to determining the most applicable hosting model using the Blazor spectrum.
There are two hosting models that i would recommend exploring in the first instance as a starting point as they are either in production already or very close and those are:
Blazor Server and Blazor WebAssembly.
The great news is that any investment you make in terms of learning either, will stand you in good stead for all the others. The reason for this is the components are mostly interchangeable. The differences you will encounter depending on the hosting models you choose are primarily around the way the site is delivered and the way the Blazor framework interacts with the DOM.
Why Use Blazor over a JavaScript Framework?
The integration of Blazor and WebAssembly gives you a different way of building a single-page application with the same results. So why should you choose Blazor over a JavaScript framework?
Choice Between One or Multiple Applications
At present, Blazor comes with two hosting models.
The first is Blazor Server. Blazor Server allows the application to be executed at server-side. Layout changes, event handling and JavaScript calls are done through a SignalR connection.
The other is Blazor WebAssembly. Blazor WebAssembly allows you to run the application client-side with the use of WebAssembly. If you need to integrate server-side functionality, you can either run it alongside Blazor Server, or you can use a separate API application.
Possible to Code in One Language
As Blazor WebAssembly allows you to write client-side code in C#, this means that any developers working on your application may only need to know one language.
This can have many benefits, particularly if you are responsible for running a Blazor project. Only needing to know one coding language means knowing the skills that you need your team members to be proficient in. It also makes it easier to assign roles to your team members, knowing there won't be a coding language barrier.
We are going to put some client-side coding in action. We display the current time on the page. When we press the button, the time is updated with the current time. All written in C#. No sign of JavaScript anywhere!
Sharing of Code Both Client-Side and Server-Side
Blazor allows you to share code both at client-side and server-side, meaning methods that share both hosting models only need to be written once. Subsequently, if you need to modify code shared by both, it only needs to be modified once and will be reflected on both hosting models.
In Summary
We hope you have been able to see the benefits of choosing Blazor for your next project. We would love to hear from you and show you what we have developed using ASP.NET Blazor here at Assemblysoft.