Native Blazor UI Components

Blazor is a new framework by the Microsoft ASP.NET team that introduces a next generation component model that allows developers to write Single Page Applications (SPA) without JavaScript.

The framework is built on .NET that runs in the browser via WebAssembly, and is based on HTML, CSS and other standard web technologies. If Blazor sounds new to you that’s because it has only been in development since 2018, initially as an experimental project.

The Blazor framework targets the Mono WebAssembly runtime (the .NET runtime compiled to Web Assembly (WASM)), thus allowing .NET to run on the client’s browser inspiring the name “Blazor” (Browser + Razor). In this configuration the application’s resources including .dll files are delivered to the client and executed on the Mono WebAssembly runtime. This is what makes it possible to make the transition from JavaScript to C#.

Blazor has two separate execution modes with the biggest difference being the way the application is deployed. The first one is called Client-side and basically does what the previous paragraph described – this is the new and innovative concept for C# in the browser, it’s what Blazor is all about. Blazor’s other execution mode is called Server-side Blazor and in this configuration, Blazor operates more closely to how previous ASP.NET technologies worked. This mode is great for compatibility with existing applications.

Razor  is a popular template markup syntax for .NET. Blazor  (Browser + Razor) is a .NET based web framework which can run on the client using WebAssembly  or running on the server via SignalR

To give an example, Razor is the syntax you use when creating web apps with ASP.NET, which you’ve probably seen before: 

<h1> 
   Hello @Model.FirstName 
</h1>

Razor takes care of rendering your HTML based on the data in your model, while also supporting various conditionals and loops

On the other hand, Blazor  is a technology similar to ASP.NET Core & ASP.NET MVC in that: 

• It powers web applications 
• It uses Razor as its template syntax for the creation of UI

A common point of misconception is that Blazor uses Razor. This further exacerbated by two other similar terms – Blazor components  and Razor components . Those are widely used interchangeably but the correct terminology is Razor Component . A component is the combination of markup (written in HTML) and logic (in C#) in a single Razor file (with the .cshtml extension)

For more detailed explanation, we would suggest checking out our blog post dedicated to the topic of differences between Blazor vs. Razor

Telerik UI for Blazor is the industry-standard choice for developers who need build a professional, consistent user experience for enterprise web applications. Benefits include: 

• A complete set of components to satisfy all UI requirements. No need to use multiple libraries
• No design skill needed for UI design. Multiple professionally designed themes are included
• Best-in-class complex components such as the Data Grid, Charts, and Scheduler cut months from the development cycle while providing the best performance and feature set possible
• Reusable UI components that can be embedded in native .NET MAUI, WPF or WinForms applications
• Industry recognized support
• API consistency between component and frameworks reduces the learning curve
• Telerik’s Blazor component library is one of the only available that included truly native components

Our Blazor team work hard to make sure getting started is very easy. Various resources are at your disposal:

• Client-side and server-side getting started tutorials.
• Video onboarding class.
• Demos for virtually every feature.
• Detailed documentation. 

Yes, Telerik UI for Blazor officially supports Blazor Hybrid as a hosting model, having performed the needed tests and ensured the technical support related to it. With Telerik UI for Blazor you can create mobile and desktop applications and embed the 100+ components into your hybrid apps with ease. Blazor Hybrid apps use a "hybrid" of web and native client development.