Blazor Hybrid PR1

aspnetcore/blazor/hosting-models.md

@@ -1,19 +1,19 @@
 ---
-title: ASP.NET Core Blazor Server and Blazor WebAssembly (WASM) hosting models
+title: ASP.NET Core Blazor hosting models
 author: guardrex
-description: Understand Blazor Server versus Blazor WebAssembly (WASM) and which hosting model you should use.
+description: Understand the different Blazor hosting models and how to pick which one to use.
 monikerRange: '>= aspnetcore-3.1'
 ms.author: riande
 ms.custom: mvc
-ms.date: 11/09/2021
+ms.date: 02/10/2022
 no-loc: [Home, Privacy, Kestrel, appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR]
 uid: blazor/hosting-models
 ---
-# ASP.NET Core Blazor Server and Blazor WebAssembly (WASM) hosting models
+# ASP.NET Core Blazor hosting models
 
-This article explains Blazor Server versus Blazor WebAssembly (WASM) and which hosting model you should use.
+This article explains the different Blazor hosting models and how to choose which one to use.
 
-Blazor is a web framework designed to run server-side in ASP.NET Core (*Blazor Server*) versus client-side in the browser on a [WebAssembly](https://webassembly.org/)-based .NET runtime (*Blazor WebAssembly*, *Blazor WASM*). Regardless of the hosting model, the app and component models *are the same*.
+Blazor is a web framework for building web UI components ([Razor components](xref:blazor/components/index)) that can be hosted in different ways. Razor components can run server-side in ASP.NET Core (*Blazor Server*) versus client-side in the browser on a [WebAssembly](https://webassembly.org/)-based .NET runtime (*Blazor WebAssembly*, *Blazor WASM*). You can also host Razor components in native mobile and desktop apps that render to an embedded web view control (*Blazor Hybrid*). Regardless of the hosting model, the way you build Razor components *is the same*. The same Razor components can be used with any of the hosting models unchanged.
 
 ## Blazor Server
 
@@ -88,23 +88,58 @@ Blazor WebAssembly includes support for trimming unused code from .NET Core fram
 
 :::moniker-end
 
-## Should I use Blazor Server or Blazor WebAssembly (WASM)?
+:::moniker range=">= aspnetcore-6.0"
+
+## Blazor Hybrid
+
+[!INCLUDE[](~/blazor/includes/blazor-hybrid-preview-notice.md)]
+
+Blazor can also be used to to build native client apps using a hybrid approach. Hybrid apps are native apps that leverage web technologies for their functionality. In a Blazor Hybrid app, Razor components run directly in the native app (not on WebAssembly) along with any other .NET code and render web UI based on HTML and CSS to an embedded web view control through a local interop channel.
+
+![Hybrid apps with .NET and Blazor render UI in a web view control, where the HTML Document Object Model (DOM) interacts with Blazor and .NET of the native desktop or mobile app.](~/blazor/hosting-models/_static/hybrid-apps-1.png)
+
+Blazor Hybrid apps can be built using different .NET native app frameworks, including .NET MAUI, WPF, and Windows Forms. Blazor provides `BlazorWebView` controls for adding Razor components to apps built with these frameworks. Using Blazor with .NET MAUI offers a convenient way to build cross-platform Blazor Hybrid apps for mobile and desktop, while Blazor integration with WPF and Windows Forms can be a great way to modernize existing apps.
+
+Because Blazor Hybrid apps are native apps, they can support functionality that isn't available with only the web platform. Blazor Hybrid apps have full access to native platform capabilities through normal .NET APIs. Blazor Hybrid apps can also share and reuse components with existing Blazor Server or Blazor WebAssembly apps. Blazor Hybrid apps combine the benefits of the web, native apps, and the .NET platform.
+
+The Blazor Hybrid hosting model offers several benefits:
+
+* Reuse existing components that can be shared across mobile, desktop, and web.
+* Leverage web development skills, experience, and resources.
+* Apps have full access to the native capabilities of the device.
+
+The Blazor Hybrid hosting model has the following limitations:
+
+* Separate native client apps must be built, deployed, and maintained for each target platform.
+
+For more information, see <xref:blazor/hybrid/index>.
+
+For more information on Microsoft native client frameworks, see the following resources:
+
+* [.NET Multi-platform App UI (.NET MAUI)](/dotnet/maui/what-is-maui)
+* [Windows Presentation Foundation (WPF)](/dotnet/desktop/wpf/overview/)
+* [Windows Forms](/dotnet/desktop/winforms/overview/)
+
+:::moniker-end
+
+## Which Blazor hosting model should I choose?
 
 Select the Blazor hosting model for app development based on the desired features and specifications for the app. The following table shows the primary considerations for selecting the hosting model to help you decide which one you should use.
 
-| Feature | Blazor Server | Blazor WebAssembly (WASM) |
-| --- | :---: | :---: |
-| Complete .NET Core API compatibility           | ✔️ | ❌ |
-| Direct access to server sources                | ✔️ | ❌ |
-| Small payload size with fast initial load time | ✔️ | ❌ |
-| App code secure and private on the server      | ✔️ | ❌&dagger; |
-| Run apps offline once downloaded               | ❌ | ✔️ |
-| Static site hosting                            | ❌ | ✔️ |
-| Offloads processing to clients                 | ❌ | ✔️ |
+| Feature | Blazor Server | Blazor WebAssembly (WASM) | Blazor Hybrid |
+| --- | :---: | :---: | :---: |
+| Complete .NET API compatibility                | ✔️ | ❌ | ✔️ |
+| Direct access to server sources                | ✔️ | ❌ | ❌ |
+| Small payload size with fast initial load time | ✔️ | ❌ | ✔️ |
+| App code secure and private on the server      | ✔️ | ❌&dagger; | ❌ |
+| Run apps offline once downloaded               | ❌ | ✔️ | ✔️ |
+| Static site hosting                            | ❌ | ✔️ | ❌ |
+| Offloads processing to clients                 | ❌ | ✔️ | ✔️ |
+| Full access to native client capabilities      | ❌ | ❌ | ✔️ |
 
 &dagger;Blazor WebAssembly apps can use server-hosted APIs to access functionality that must be kept private and secure.
 
-After you choose the app's hosting model, you can generate an app from a Blazor project template to begin development. For more information, see [Blazor template options](xref:blazor/tooling#blazor-template-options) in the *Tooling* article.
+After you choose the app's hosting model, you can generate a Blazor Server or Blazor WebAssembly app from a Blazor project template to begin development. For more information, see [Blazor template options](xref:blazor/tooling#blazor-template-options) in the *Tooling* article. To create a Blazor Hybrid app, see the articles under <xref:blazor/hybrid/tutorials/index>.
 
 ## Additional resources
 

aspnetcore/blazor/hybrid/index.md

@@ -0,0 +1,35 @@
+---
+title: Introduction to ASP.NET Core Blazor Hybrid
+author: guardrex
+description: Explore ASP.NET Core Blazor Hybrid, a way to build interactive client-side web UI with .NET in an ASP.NET Core app.
+monikerRange: '>= aspnetcore-6.0'
+ms.author: riande
+ms.custom: "mvc"
+ms.date: 02/10/2021
+no-loc: [Home, Privacy, Kestrel, appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR]
+uid: blazor/hybrid/index
+---
+# Introduction to ASP.NET Core Blazor Hybrid
+
+Use *Blazor Hybrid* to blend desktop and mobile native client frameworks with .NET and Blazor.
+
+In a Blazor Hybrid app, [Razor components](xref:blazor/components/index) run natively on the device. Components render to an embedded web view control through a local interop channel. Components don't run in the browser, and WebAssembly isn't involved. Razor components load and execute code quickly, and components have full access to the native capabilities of the device through the .NET platform.
+
+Blazor Hybrid articles cover subjects pertaining to integrating [Razor components](xref:blazor/components/index) into native client frameworks.
+
+[!INCLUDE[](~/blazor/includes/blazor-hybrid-preview-notice.md)]
+
+## Blazor Hybrid apps with .NET MAUI
+
+Blazor Hybrid support is built into the [.NET Multi-platform App UI (.NET MAUI)](/dotnet/maui/what-is-maui) framework. .NET MAUI includes the `BlazorWebView` control that permits rendering .NET MAUI app [Razor components](xref:blazor/components/index) to render into an embedded web view. By using .NET MAUI and Blazor together, you can reuse one set of web UI components across mobile, desktop, and web.
+
+## Blazor Hybrid apps with WPF and Windows Forms
+
+Blazor Hybrid apps can be built with [Windows Presentation Foundation (WPF)](/dotnet/desktop/wpf/overview/) and [Windows Forms](/dotnet/desktop/winforms/overview/). Blazor provides `BlazorWebView` controls for both of these frameworks. Razor components run natively in the Windows desktop and render to an embedded web view. Using Blazor in WPF and Windows Forms enables you to add new UI to your existing Windows desktop apps that can be reused across platforms with .NET MAUI or on the web.
+
+## Additional resources
+
+* <xref:blazor/hybrid/tutorials/index>
+* [.NET Multi-platform App UI (.NET MAUI)](/dotnet/maui/what-is-maui)
+* [Windows Presentation Foundation (WPF)](/dotnet/desktop/wpf/overview/)
+* [Windows Forms](/dotnet/desktop/winforms/overview/)

aspnetcore/blazor/hybrid/tutorials/index.md

@@ -0,0 +1,18 @@
+---
+title: ASP.NET Core Blazor Hybrid tutorials
+author: guardrex
+description: Learn how to build Blazor Hybrid apps with the tutorials listed in this article.
+monikerRange: '>= aspnetcore-6.0'
+ms.author: riande
+ms.custom: mvc
+ms.date: 02/10/2022
+no-loc: [Home, Privacy, Kestrel, appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR, JS, Promise]
+uid: blazor/hybrid/tutorials/index
+---
+# ASP.NET Core Blazor Hybrid tutorials
+
+[!INCLUDE[](~/blazor/includes/blazor-hybrid-preview-notice.md)]
+
+***COMING SOON!***
+
+For more information on Blazor hosting models, see <xref:blazor/hosting-models>.

aspnetcore/blazor/includes/blazor-hybrid-preview-notice.md

@@ -0,0 +1,5 @@
+---
+no-loc: [Home, Privacy, Kestrel, appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR]
+---
+> [!IMPORTANT]
+> Blazor Hybrid is in preview and not recommended for production workloads. Blazor Hybrid articles describe a prerelease product that may be substantially modified before final release. Microsoft makes no warranties, express or implied, with respect to the information provided in Blazor Hybrid articles.

aspnetcore/blazor/index.md

@@ -5,7 +5,7 @@ description: Explore ASP.NET Core Blazor, a way to build interactive client-side
 monikerRange: '>= aspnetcore-3.1'
 ms.author: riande
 ms.custom: "mvc, seoapril2019"
-ms.date: 11/09/2021
+ms.date: 02/10/2022
 no-loc: [Home, Privacy, Kestrel, appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR]
 uid: blazor/index
 ---
@@ -15,10 +15,24 @@ uid: blazor/index
 
 Blazor is a framework for building interactive client-side web UI with [.NET](/dotnet/standard/tour):
 
+:::moniker range=">= aspnetcore-6.0"
+
 * Create rich interactive UIs using [C#](/dotnet/csharp/) instead of [JavaScript](https://www.javascript.com).
 * Share server-side and client-side app logic written in .NET.
 * Render the UI as HTML and CSS for wide browser support, including mobile browsers.
 * Integrate with modern hosting platforms, such as [Docker](/dotnet/standard/microservices-architecture/container-docker-introduction/index).
+* Build hybrid desktop and mobile apps with .NET and Blazor.
+
+:::moniker-end
+
+* Create rich interactive UIs using [C#](/dotnet/csharp/) instead of [JavaScript](https://www.javascript.com).
+* Share server-side and client-side app logic written in .NET.
+* Render the UI as HTML and CSS for wide browser support, including mobile browsers.
+* Integrate with modern hosting platforms, such as [Docker](/dotnet/standard/microservices-architecture/container-docker-introduction/index).
+
+:::moniker range="< aspnetcore-6.0"
+
+:::moniker-end
 
 Using .NET for client-side web development offers the following advantages:
 
@@ -140,6 +154,25 @@ The size of the published app, its *payload size*, is a critical performance fac
 * HTTP responses are compressed.
 * The .NET runtime and assemblies are cached in the browser.
 
+:::moniker range=">= aspnetcore-6.0"
+
+## Blazor Hybrid
+
+[!INCLUDE[](~/blazor/includes/blazor-hybrid-preview-notice.md)]
+
+Hybrid apps use a blend of native and web technologies. A *Blazor Hybrid* app uses Blazor in a native client app. Razor components run natively in the .NET process and render web UI to an embedded web view control using a local interop channel. WebAssembly isn't used in Hybrid apps. Hybrid apps encompass the following technologies:
+
+* [.NET Multi-platform App UI (.NET MAUI)](/dotnet/maui/what-is-maui): A cross-platform framework for creating native mobile and desktop apps with C# and XAML.
+* [Windows Presentation Foundation (WPF)](/dotnet/desktop/wpf/overview/): A UI framework that is resolution-independent and uses a vector-based rendering engine, built to take advantage of modern graphics hardware. 
+* [Windows Forms](/dotnet/desktop/winforms/overview/): A UI framework that creates rich desktop client apps for Windows. The Windows Forms development platform supports a broad set of app development features, including controls, graphics, data binding, and user input.
+
+For more information on creating Blazor Hybrid apps with the preceding frameworks, see the following articles:
+
+* <xref:blazor/hosting-models>
+* <xref:blazor/hybrid/index>
+
+:::moniker-end
+
 ## JavaScript interop
 
 For apps that require third-party JavaScript libraries and access to browser APIs, components interoperate with JavaScript. Components are capable of using any library or API that JavaScript is able to use. C# code can [call into JavaScript code](xref:blazor/js-interop/call-javascript-from-dotnet), and JavaScript code can [call into C# code](xref:blazor/js-interop/call-dotnet-from-javascript).

aspnetcore/blazor/supported-platforms.md

@@ -20,9 +20,15 @@ Blazor WebAssembly and Blazor Server are supported in the browsers shown in the
 | Apple Safari, including iOS      | Current† |
 | Google Chrome, including Android | Current† |
 | Microsoft Edge                   | Current† |
-| Mozilla Firefox                  | Current† |  
+| Mozilla Firefox                  | Current† |
 
-†*Current* refers to the latest version of the browser.  
+†*Current* refers to the latest version of the browser.
+
+For [Blazor Hybrid apps](xref:blazor/hybrid/index), we test on and support the latest platform web view control versions:
+
+* [Microsoft Edge WebView2 on Windows](/microsoft-edge/webview2/)
+* [Chrome on Android](https://play.google.com/store/apps/details?id=com.android.chrome)
+* [Safari on iOS and macOS](https://www.apple.com/safari/)
 
 ## Additional resources
 
@@ -40,9 +46,9 @@ Blazor WebAssembly and Blazor Server are supported in the browsers shown in the
 | Apple Safari, including iOS      | Current† |
 | Google Chrome, including Android | Current† |
 | Microsoft Edge                   | Current† |
-| Mozilla Firefox                  | Current† |  
+| Mozilla Firefox                  | Current† |
 
-†*Current* refers to the latest version of the browser.  
+†*Current* refers to the latest version of the browser.
 
 ## Additional resources
 
@@ -61,7 +67,7 @@ Blazor WebAssembly and Blazor Server are supported in the browsers shown in the
 | Google Chrome, including Android | Current†       |
 | Microsoft Edge                   | Current†       |
 | Microsoft Internet Explorer      | Not Supported‡ |
-| Mozilla Firefox                  | Current†       |  
+| Mozilla Firefox                  | Current†       |
 
 †*Current* refers to the latest version of the browser.  
 ‡Microsoft Internet Explorer doesn't support [WebAssembly](https://webassembly.org).

aspnetcore/blazor/tooling.md

@@ -304,6 +304,7 @@ For more information, see the following resources:
 * <xref:test/hot-reload>
 * <xref:blazor/hosting-models>
 * <xref:blazor/project-structure>
+* <xref:blazor/hybrid/tutorials/index>
 
 :::moniker-end
 

aspnetcore/blazor/tutorials/index.md

@@ -1,7 +1,7 @@
 ---
 title: ASP.NET Core Blazor tutorials
 author: guardrex
-description: Learn how to build Blazor apps with the tutorials described by this article.
+description: Learn how to build Blazor apps with the tutorials listed in this article.
 monikerRange: '>= aspnetcore-3.1'
 ms.author: riande
 ms.custom: mvc
@@ -19,6 +19,8 @@ The following tutorials are available for ASP.NET Core Blazor:
 
 * <xref:blazor/tutorials/signalr-blazor> (Blazor Server or Blazor WebAssembly)
 
+* <xref:blazor/hybrid/tutorials/index>
+
 * [Microsoft Learn modules](/learn/paths/build-web-apps-with-blazor/)
 
 For more information on Blazor hosting models, Blazor Server and Blazor WebAssembly, see <xref:blazor/hosting-models>.