Blazor

Last updated
Blazor
Original author(s) Microsoft
Developer(s) .NET Foundation
Initial release2018;6 years ago (2018)
Repository github.com/dotnet/aspnetcore/tree/main/src/Components
Operating system Linux, macOS, Windows
Included with ASP.NET Core
Type Web framework
License Apache License 2.0
Website dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor

Blazor is a free and open-source web framework that enables developers to create web user interfaces (UI) based on components, using C# and HTML. [1] [2] [3] [4] [5] It is being developed by Microsoft, as part of the ASP.NET Core web app framework.

Contents

Blazor can be used to develop single-page, mobile, or server-rendered applications using .NET technologies.

History

In 2017, at NDC Oslo, Steve Sanderson, Software engineer at Microsoft, unveiled [6] an experimental client-side web application framework for .NET that he called "Blazor". The demo involved an interactive app running in the browser using WebAssembly, and a rudimentary development experience in Visual Studio. Sanderson demonstrated how to build interactive components using C# and Razor syntax. The app was then compiled to .NET assemblies that were running on a lightweight third-party open-source .NET runtime, called DotNetAnywhere, that had been compiled to WebAssembly.

The name, "Blazor", as explained by Steve Sanderson, is a portmanteau of the words "Browser" and "Razor". (from the Razor syntax being used)

Blazor got admitted as an official open-source project by Microsoft, and in 2018, as part of .NET Core 3.1, Blazor Server was released to the public. It enabled server-driven interactive web app that update the client browser via WebSockets. Shortly thereafter, Blazor WebAssembly was released. Unlike the prototype, it used the Mono .NET runtime on WebAssembly. This is the same runtime that is used for developing mobile apps with .NET MAUI (previously Xamarin).

The Blazor source code was first located in its own repository on GitHub, until it was merged into the ASP.NET Core monorepo. The development has been carried out from there ever since.

With the release of .NET 5, Blazor has stopped working on Internet Explorer and the legacy version of Microsoft Edge. [7]

In 2023, with .NET 8, Blazor on the server underwent some fundamental changes [8] to enable server-side rendered (SSR) pages that are not fundamentally interactive, allowing Blazor to be used as an alternative to MVC Razor Pages. With this change, developers can opt-in per component (or page) whether it should be interactive, and whether it should run on the server or in the browser using WebAssembly. These are referred to as Interactive "Render modes".

Components

Components are formally referred to as Razor components.

A Razor component consists mainly of HTML that is mixed with Razor templating syntax that enables the inline-use of C# to influence the rendering.

The Blazor component model makes sure that the rendered markup gets updated when the state of the component changes, usually in response to user action.

While both markup and C# code can be placed in the same .razor file, it is also possible to have a separate code-behind file with a partial class.

Components are compiled into .NET classes. The HTML and Razor markup of a component gets translated into code that builds a render tree that then drives the actual rendering.

Example

The following example shows how to implement a simple counter that can be incremented by clicking a button:

<h1>Counter</h1><p>Count: @count</p><button@onclick="Increment">Increment</button>  @code  {     private int count = 0;      private void Increment()     {         count++;     } }

Hosting models

Blazor apps can be hosted in multiple ways. These are the hosting models as of .NET 8.

Blazor Web app (Server)

A server-hosted Blazor app, as part of an ASP.NET Core app.

Static server-side rendering (SSR)

By default, components are rendered by the server as static HTML, without any interactivity. Interactivity can be enabled per component by setting a render mode.

This is equivalent to how MVC views and Razor Pages are rendered.

Render modes [9]

In .NET 8, Blazor introduced the concept of render modes which configure whether Razor components are interactive and what drives that interactivity.

The render mode is inherited within a component hierarchy, from its top most parent component that has a set render mode. This can not be overridden by child components, unless its render mode is the default Static Server.

  • Static Server - The component is rendered statically on the server with no interactivity. This is the default.
  • Interactive Server - The component is running on the server in interactive mode. The interactivity is server-driven and changes are pushed to the client over WebSocket, using SignalR.
  • Interactive WebAssembly - The component is running in interactive mode in the browser using WebAssembly.
  • Interactive Auto - This will initially load the component in the Interactive Server render mode while the Blazor bundle is downloaded. On subsequent visits Interactive WebAssembly is used on the client.

Prerendering

Interactive components is pre-rendered on the server before being materialized on the client and interactivity kicking in. This behavior is turned on by default, but can be turned off.

Enhanced navigation

This feature makes navigation on a static site much smoother in a way that feels like a Single Page application (SPA).

When navigating from one static page to another, the app intercepts the navigation, retrieving just the content of the target page, and then apply only the changes to the DOM. That way the page doesn't flicker as it usually does when being completely reloaded upon navigating to another page.

WebAssembly (Standalone)

This is a standalone interactive WebAssembly app running in the client browser.

Upon navigating to the app in a browser, the app bundle get downloaded, then loaded and executed within the browser's sandbox.

A WebAssembly app can also be made into a Progressive web app (PWA).

Prior to .NET 8, there was a project template in which a Blazor WebAssembly app was hosted within an ASP.NET Core application containing Web APIs. This was removed in favor of the Blazor Web app project template, although the functionality still remains.

Hybrid

Allows Blazor apps to run within a native app using a WebView. [10] Rendering is performed in the hosting process, without a web server.

Hybrid apps can be hosted in Windows Presentation Foundation or WinForms application.

This approach is used for building native mobile apps with Blazor, using .NET MAUI.

Server (Legacy)

The intended use was to enable server-driven interactive components, with changes being sent out to the client using WebSockets.

A component was rendered within a MVC Razor Page.

It also enabled prerendering of WebAssembly components.

This hosting model was formally referred to as "Blazor Server".

It has been deprecated in favor of Blazor Web app.

See also

Related Research Articles

<span class="mw-page-title-main">ActiveX</span> Software framework by Microsoft introduced in 1996

ActiveX is a deprecated software framework created by Microsoft that adapts its earlier Component Object Model (COM) and Object Linking and Embedding (OLE) technologies for content downloaded from a network, particularly from the World Wide Web. Microsoft introduced ActiveX in 1996. In principle, ActiveX is not dependent on Microsoft Windows operating systems, but in practice, most ActiveX controls only run on Windows. Most also require the client to be running on an x86-based computer because ActiveX controls contain compiled code.

Web development is the work involved in developing a website for the Internet or an intranet. Web development can range from developing a simple single static page of plain text to complex web applications, electronic businesses, and social network services. A more comprehensive list of tasks to which Web development commonly refers, may include Web engineering, Web design, Web content development, client liaison, client-side/server-side scripting, Web server and network security configuration, and e-commerce development.

ASP.NET is a server-side web-application framework designed for web development to produce dynamic web pages. It was developed by Microsoft to allow programmers to build dynamic web sites, applications and services. The name stands for Active Server Pages Network Enabled Technologies.

Trident is a proprietary browser engine for the Microsoft Windows version of Internet Explorer, developed by Microsoft.

<span class="mw-page-title-main">Dynamic web page</span> Type of web page

A dynamic web page is a web page constructed at runtime, as opposed to a static web page, delivered as it is stored. A server-side dynamic web page is a web page whose construction is controlled by an application server processing server-side scripts. In server-side scripting, parameters determine how the assembly of every new web page proceeds, and including the setting up of more client-side processing. A client-side dynamic web page processes the web page using JavaScript running in the browser as it loads. JavaScript can interact with the page via Document Object Model (DOM), to query page state and modify it. Even though a web page can be dynamic on the client-side, it can still be hosted on a static hosting service such as GitHub Pages or Amazon S3 as long as there is not any server-side code included.

Windows Presentation Foundation (WPF) is a free and open-source graphical subsystem originally developed by Microsoft for rendering user interfaces in Windows-based applications. WPF, previously known as "Avalon", was initially released as part of .NET Framework 3.0 in 2006. WPF uses DirectX and attempts to provide a consistent programming model for building applications. It separates the user interface from business logic, and resembles similar XML-oriented object models, such as those implemented in XUL and SVG.

A web framework (WF) or web application framework (WAF) is a software framework that is designed to support the development of web applications including web services, web resources, and web APIs. Web frameworks provide a standard way to build and deploy web applications on the World Wide Web. Web frameworks aim to automate the overhead associated with common activities performed in web development. For example, many web frameworks provide libraries for database access, templating frameworks, and session management, and they often promote code reuse. Although they often target development of dynamic web sites, they are also applicable to static websites.

ASP.NET AJAX, formerly called Atlas, is a set of extensions to ASP.NET developed by Microsoft for implementing Ajax functionality. It is released under the Microsoft Public License (Ms-PL).

<span class="mw-page-title-main">SharePoint</span> Web application platform

SharePoint is a web-based collaborative platform that integrates natively with Microsoft 365. Launched in 2001, SharePoint is primarily sold as a document management and storage system, although it is also used for sharing information through an intranet, implementing internal applications, and for implementing business processes.

ASP.NET MVC is a web application framework developed by Microsoft that implements the model–view–controller (MVC) pattern. It is no longer in active development. It is open-source software, apart from the ASP.NET Web Forms component, which is proprietary.

Remote Desktop Services (RDS), known as Terminal Services in Windows Server 2008 and earlier, is one of the components of Microsoft Windows that allow a user to initiate and control an interactive session on a remote computer or virtual machine over a network connection. RDS was first released in 1998 as Terminal Server in Windows NT 4.0 Terminal Server Edition, a stand-alone edition of Windows NT 4.0 Server that allowed users to log in remotely. Starting with Windows 2000, it was integrated under the name of Terminal Services as an optional component in the server editions of the Windows NT family of operating systems, receiving updates and improvements with each version of Windows. Terminal Services were then renamed to Remote Desktop Services with Windows Server 2008 R2 in 2009.

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

C1 CMS

C1 CMS is a free open source .NET-based web content management system.

Razor is an ASP.NET programming syntax used to create dynamic web pages with the C# or VB.NET programming languages. Razor was in development in June 2010 and was released for Microsoft Visual Studio 2010 in January 2011. Razor is a simple-syntax view engine and was released as part of MVC 3 and the WebMatrix tool set.

SignalR is a free and open-source software library for Microsoft ASP.NET that allows server code to send asynchronous notifications to client-side web applications. The library includes server-side and client-side JavaScript components.

<span class="mw-page-title-main">Test Studio</span> Software test automation tool

Progress Telerik Test Studio is a Windows-based software test automation tool for web and desktop that supports functional testing, software performance testing, load testing and RESTful API testing developed by Telerik. The tool ships with a plugin for Visual Studio and a standalone app that use the same repositories and file formats. Test Studio supports HTML, AJAX, Silverlight, ASP.NET MVC, JavaScript, WPF, Angular, React, ASP.NET AJAX, ASP.NET Core, and Blazor. Any application that runs on .NET 5, .NET Core, .NET 6 or higher can be automated with Test Studio. Test Studio supports cross-browser testing for Internet Explorer, Firefox, Microsoft Edge, and Chrome.

ASP.NET Core is an open-source modular web-application framework. It is a redesign of ASP.NET that unites the previously separate ASP.NET MVC and ASP.NET Web API into a single programming model. Despite being a new framework, built on a new web stack, it does have a high degree of concept compatibility with ASP.NET. The ASP.NET Core framework supports side-by-side versioning so that different applications being developed on a single machine can target different versions of ASP.NET Core. This was not possible with previous versions of ASP.NET. ASP.NET Core initially ran on both the Windows-only .NET Framework and the cross-platform .NET. However, support for the .NET Framework was dropped beginning with ASP.Net Core 3.0.

ASP.NET Web Forms is a web application framework and one of several programming models supported by the Microsoft ASP.NET technology. Web Forms applications can be written in any programming language which supports the Common Language Runtime, such as C# or Visual Basic. The main building blocks of Web Forms pages are server controls, which are reusable components responsible for rendering HTML markup and responding to events. A technique called view state is used to persist the state of server controls between normally stateless HTTP requests.

Next.js is an open-source web development framework created by the private company Vercel providing React-based web applications with server-side rendering and static website generation.

References

  1. ↑ Strahl, Rick (31 July 2018). "Web Assembly and Blazor: Re-assembling the Web". Rick Strahl's Weblog. Self-published. Archived from the original on 22 October 2018.
  2. ↑ Tomassetti, Federico (September 4, 2018). "Blazor: .NET in the Browser". tomassetti.me. Strumenta. Archived from the original on 22 October 2018.
  3. ↑ James, Mike (12 February 2018). "Blazor .NET In The Browser". i-programmer.info. Self-published. Archived from the original on 2018-02-18.
  4. ↑ Miller, Jonathan (September 2018). "C# in the Browser with Blazor". MSDN Magazine. 33 (9). Archived from the original on 22 October 2018.
  5. ↑ Roth, Daniel (22 March 2018). "Get started building .NET web apps that run in the browser with Blazor". ASP.NET Blog. Microsoft. Archived from the original on 2019-04-30.
  6. ↑ "Web Apps can't really do *that*, can they? - Steve Sanderson". YouTube. 2017-07-10. Retrieved 2024-02-28.
  7. ↑ Roth, Daniel (30 September 2020). "Updated Blazor browser support for .NET 5". dotnet/aspnetcore repo. Microsoft – via GitHub.com.
  8. ↑ "ASP.NET Core Blazor fundamentals". 2024-12-02. Retrieved 2024-02-28.
  9. ↑ "ASP.NET Core Blazor render modes". 2024-02-09. Retrieved 2024-03-26.
  10. ↑ "ASP.NET Core Blazor Hybrid" . Retrieved 2023-11-14.

Further reading

This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.