[Design] Blazor United: Layering architecture

[mkArtakMSFT]

This is the initial architecture diagram of how we plan to layer things:

• Microsoft.AspNetCore.Components.Web will handle HTML rendering.
  • Will take a dependency on System.Text.Encodings.Web.
  • Will be host agnostic (won't reference ASP.NET Core nor register any service in DI)
• Microsoft.AspNetCore.Components.Endpoints
  • Will provide IComponentBuilder AddComponents() and IEndpointComponentBuilder endpoints.MapComponents()
  • Will provide "standalone" support for static rendering by writing to the response directly.
    • We might revisit this based on performance measurements and refactor ViewBuffers into a common layer/shared source.
• Microsoft.AspNetCore.Mvc.ViewFeatures will depend on Microsoft.AspNetCore.Components.Endpoints to support rendering components as tag helpers.
• Microsoft.AspNetCore.Components.Server will provide support for rendering server components as part of server rendered components apps.
• Microsoft.AspNetCore.Components.Webassembly.Server will provide support for rendering webassembly components as part of server rendered components apps.
• Rendering components outside of HttpContext will be supported by Microsoft.AspNetCore.Components.Web.
  • Using it will potentially require providing any service that is needed.

Scenarios

Server side rendered components application (like MVC/RazorPages)

services.AddComponents();

builder.MapComponents()

Server side rendered components application with support for Server components

services.AddComponents()
  .AddServerComponents();

builder.MapComponents();

Server side rendered components application with support for Webassembly components

services.AddComponents()
  .AddWebassemblyComponents();

builder.MapComponents();

Server side rendered components application with support for Webassembly and Server components

services.AddComponents()
  .AddServerComponents()
  .AddWebassemblyComponents();


builder.MapComponents();

Full Blazor Server app

services.AddServerSideBlazor();

builder.MapComponents();

MainLayout.razor

@render Server
...
<Router>
</Router>
...

Full Webassembly (hosted) app

services.AddComponents().AddWebassemblyComponents();

builder.MapComponents();

MainLayout.razor

@render Webassembly
...
<Router>
</Router>
...

Full auto app

services.AddComponents()
    .AddWebassemblyComponents()
    .AddServerComponents();

builder.MapComponents();

MainLayout.razor

@render Auto
...
<Router>
</Router>
...

Open questions

• Mapping "standalone" webassembly apps (index.html as entry point)
  • We can still figure out the routes if we want by default.
  • MapFallback still exists as a "fallback".
• Can we get rid of App.razor within index.html?
  • Based on what we are proposing for "Blazor server apps", we can potentially do the same thing for webassembly.
  • Replace builder.RootComponents.Add<App>("#app"); with builder.RootComponents.AddComponentPages("#app");
    • Render the layout, have the code inside the layout render the router (or figure out a more custom way of doing this).
• On the cases for Full Blazor Server/Webassembly we'll have to figure out how to provide context for what typically goes inside <Found>/<NotFound>
• How do we handle multiple "united" apps (imagine 2 webassembly apps that get "upgraded" to blazor-united) and hosted on a parent server project.

Further issues tasks breakdown

• Provide a primitive inside Microsoft.AspNetCore.Components.Web for rendering output to HTML.
  • This is in charge of writing the output from a component into a stream/pipewriter.
  • We need to figure out what options this primitive must have (things like quiescence, and so on).
  • We will need an extensibility point for handling rendering webassembly and server components.
  • Needs design.
• Create Microsoft.AspNetCore.Components.Endpoints (name TBD) to hold the functionality for Server-Side Rendering components.
  • Add an extension method for registering component services AddRazorComponents.
    • Register the services needed for performing server-side rendering on DI.
  • Add an extension method for registering endpoints for Razor Component Pages.
    • We have to design the details about how we integrate with endpoint routing.
• Refactor component rendering on MVC to depend on the Microsoft.AspNetCore.Components.Endpoints implementation.
• Add an extension method on Microsoft.AspNetCore.Components.Server that plugs in support for Server Components on top of Microsoft.AspNetCore.Components.Endpoints.
  • We will add the endpoints to the collection.
  • Similar for Microsoft.AspNetCore.Components.WebAssembly.Server.

[javiercn]

This issue is broken down into

• API for registering endpoints that render Razor components. #46350
• Handle forms with Blazor SSR #46688