從狗熊到英雄 - 我的.Net 6 blazor新體驗

從狗熊到英雄f rom Zero t o Hero
我的.NET 6 Blazor 新體驗
2 9 D e c 2 0 2 1 R o n Z h o n g

ASP.NET MVC SPA
Database
API
以往，如何架構一個新專案？

Blazor
WebAssembly
Blazor Server
Database
API
現在，可以這樣架構一個新專案！

對full-stack developers來說， Blazor是個新出路！

某年的冬天
Data Storage
Backend
Framework
Data Access
(Business Logic)
Layer
Design
Patterns
Frontend
Framework
Presentation
Layer
Azure SQL Database Server
.NET Framework 4.7.2
Nhibernate
4.0
MVC*
HTML5
ADO.NET
DDD**
.NET Core 2.1
ASP.NET Core API
EF. Core 2.1
MVVM***
React.JS
ReactAdmin
前端 ASP.NET 4.x
Different
Design Patterns
Different
Front-end stack
Restrict UI
後台Admin Portal
React + ASP.NET Core 2.1

Cloud Hosting . Frontend Framework
Programming Language Backend Framework
ReactAdmin
Limited UI components
Lack of support in
Community Edition
Potential vendor lock-
out risk with a start-up
company Marmelab
founded in 2016
Microsoft
Eco-system
隔年的春天，我們做了一個成功的migration

B l a z o r 對我來說是？
WebForms Razor Page SPA

Agenda 內容
• .NET 6 新亮點
• Blazor Components 商務套件
• Blazor Server 實務解析
• Blazor WebAssembly SEO
• .NET MAUI Blazor App 初體驗

https://...
JS
.NET
Frontend 與 Backend 的「形影分離」
 到期待已久的「天人合一」

https...
DOM
ASP.NET Core
SignalR
Blazor Server
https://...
DOM
WebAssembly
Blazor WebAssembly
Razor Components
.NET
Razor Components
.NET
Blazor 如何運行？

Server WebAssembly
Static
Server
Prerendered
WebAssembly
Prerendered
Blazor RenderMode (渲染模式)
RenderMode Enum (Microsoft.AspNetCore.Mvc.Rendering) | Microsoft Docs

Blazor Server
Blazor
WebAssembly
Hosted
Blazor
WebAssembly
Standalone
.NET MAUI
Blazor Hybrid
Blazor
WebAssembly
in WebForms
Deployment Model (佈屬模式)
Blazor
WebAssembly
in Angular React

Blazor 相關應用…
電子支付 Google reCAPTCHA
Bluetooth MS Teams App

.NET 6 Blazor 新亮點 (#1)
• Ahead-of-time (AOT) compilation 超前編譯
• Smaller production apps  努力減重
• Hot reload 熱重載
• Render components from JavaScript
• Preserve prerendered state
• Error boundaries
Announcing ASP.NET Core in .NET 6 - .NET Blog (microsoft.com)

.NET 6 Blazor 新亮點 (#2)
• Custom event args 可自訂事件參數
• Infer generic type parameters from ancestor components
巢狀元件可支援泛型參數
• Required component parameters 可要求元件參數
• Handle query string parameters 可接收query string
• Control HTML head content 可控制<head>內容
• JavaScript initializers 客製化Blazor App載入過程
• Dynamically render components 動態載入Razor元件

Render Razor components from JavaScript #1
builder.Services.AddServerSideBlazor(options =>
{
options.RootComponents
.RegisterForJavaScript<Counter>(
identifier: "counter");
});
builder.RootComponents
.RegisterForJavaScript<Counter>(
identifier: "counter");
Blazer Server版
Blazer WASM版

Render Razor components from JavaScript #2
let containerElement = document
.getElementById('my-counter’);
await Blazor.rootComponents
.add(containerElement,
'counter’,
{ incrementAmount: 10 });
ASP.NET Core Razor components | Microsoft Docs

Generate Angular and React components
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.RegisterForAngular<MyComponent>();
builder.RootComponents.RegisterForReact<MyComponent>();
samples/samples/aspnetcore/blazor/JSComponentGeneration at main · aspnet/samples (github.com)

Error boundary
<div class="main">
<div class="content px-4">
<ErrorBoundary>
@Body
</ErrorBoundary>
</div>
</div>
Handle errors in ASP.NET Core Blazor apps | Microsoft Docs

PageTitle & HeadContent
<PageTitle>Index</PageTitle>
<HeadContent>
<meta name="description" content=".NET CONF"/>
</HeadContent>
Control <head> content in ASP.NET Core Blazor apps | Microsoft Docs

Required component parameters
[Parameter]
[EditorRequired]
public string Title { get; set; }
[Parameter, EditorRequired]
public string Content { get; set; }
ASP.NET Core Razor components | Microsoft Docs

Parameter from Query
[SupplyParameterFromQuery]
public int MyCount{ get; set; }
https://localhost:7087/counter?MyCount=22
ASP.NET Core Blazor routing and navigation | Microsoft Docs

Prerender and integrate ASP.NET Core Razor components
Prerender and integrate ASP.NET Core Razor components | Microsoft Docs

Azure Static Web Apps supports .NET 6
Automatically build and deploy:
• .NET 6 Blazor WebAssembly
• Including ahead of time (AOT) compilation
• .NET 6 Azure Functions APIs
• In-process and isolated .NET function apps
New!

Hosting Blazor WebAssembly
ASP.NET
Blazor
WebAssembly
APIs
Globally distributed
hosting
Blazor
WebAssembly
Microservices
APIs
Hosted Standalone

Hosting Blazor WebAssembly
ASP.NET
Blazor
WebAssembly
APIs
Globally distributed
hosting
Blazor
WebAssembly
Serverless
functions
APIs
Hosted Azure Static Web Apps

Azure Static Web Apps
• Globally-distributed hosting
• Serverless APIs with Azure Functions
• Automatically build and deploy from repository
• Built-in authentication and routing rules
• Custom domains and free TLS certificates
• Staging environments

相關連結
• Announcing ASP.NET Core in .NET 6 - .NET Blog (microsoft.com)
• New Features In Blazor With .NET 6 (c-sharpcorner.com)
• AdrienTorris/awesome-blazor
• Blazor Components | 70+ Native UI Controls | Syncfusion
• Blazor 🚀 集錦 – YouTube
• Blazor Channel | Pluralsight

Core (Application)
Frontend App
(Blazor WASM)
Backend API
(Web API)
Service Layer
Repository Layer
Admin Portal
(Blazor Server)
Shared Library
Minimal Architecture
向經典致敬
SQL/NoSQL/Storage
Business Logic Layer
Application & UI Logics
Application Layer
Data Access Layer

Blazor WebAssembly SEO
(Core Web Vitals & Performance)

42*
10
5
pages/sec
Blazor WASM MVC1 MVC2
Crawling Performance
* Blazor WebAssembly in prerendered mode

工欲善其事
必先利其器

.NET MAUI Reference
• Update on .NET Multi-platform App UI (.NET MAUI) - .NET Blog
• Why Evolve to .NET MAUI? (telerik.com)
• Explore the .NET MAUI Blazor App Template
• Explore the .NET MAUI Blazor App and What’s New for Blazor
• .NET MAUI – Blazor – Getting Started – Developer Thoughts
• Introduction to .NET MAUI Blazor | Microsoft Docs

從狗熊到英雄f rom Zero t o Hero
Thank you for joining!!
2 9 D e c 2 0 2 1 R o n Z h o n g

從狗熊到英雄 - 我的.Net 6 blazor新體驗

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 從狗熊到英雄 - 我的.Net 6 blazor新體驗

Similar to 從狗熊到英雄 - 我的.Net 6 blazor新體驗 (20)

Recently uploaded

Recently uploaded (20)

從狗熊到英雄 - 我的.Net 6 blazor新體驗

Editor's Notes