使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)

使用 C#/Razor 開發互動式 WebAssembly 網站
多奇數位創意有限公司
技術總監黃保翕 ( Will 保哥 )
部落格：http://blog.miniasp.com/
Modern Web 2018

簡介 WebAssembly
WebAssembly Overview

3
關於 WebAssembly ( Wasm )
• 它可以執行在現代的瀏覽器 ( https://caniuse.com/#feat=wasm )
• 它是一種低階的「類組合語言」
• 它是一種精簡的二進制指令格式
• 它的執行速度極快，近乎原生應用程式效能
• 它可以透過撰寫高階程式語言並編譯成 WebAssembly 格式
• 它可以跟 JavaScript 無縫的一起執行並擁有跟 JS 一樣的安全性

4
WebAssembly and the Death of JavaScript
TL;DR https://www.facebook.com/will.fans/posts/2084089318286868

5
Colin Eberhardt 對 WebAssembly 的預測
• 2018年預測
1. 後端語言開始進入前端世界
2. Webpack 會開始編譯後端語言給前端用 (maybe)
3. WebAssembly 會開始加入到日常前端工作中
4. 會開始出現 "Native" 的 node modules
• 2019年預測
1. WebAssembly 正式加入 GC, host binding, threading 等能力
2. C# 與 Java 將會成為 WebAssembly 正式公民
3. 會有 WASM 專屬的 UI 框架出現 (應該不會基於 DOM )
4. 會有更多應用開始移往 WebAssembly 實作 (e.g. Photoshop, AutoCAD, ...)
5. 像是 Rust, Go, Swift 等後端語言會開始侵蝕更多的 Web 市佔率
• 2020年以後的預測
1. JavaScript 將會直接編譯成 WebAssembly
2. JavaScript 在 Web 世界的佔有率將會開始降低
3. 透過 PWA 技術，將會有更多使用 Web 技術的桌面應用出現

簡介 Blazor 開發框架
Blazor = Browser + Razor

7
什麼是 Blazor？
• Browser + Razor = Blazor!
• Blazor is an experimental .NET web framework using C# and
HTML that runs in the browser.
• 是一套 SPA (Single Page Application) 框架
• 基於 .NET Core 開發技術，主要採用 C# 與 Razor 語法
• 理論上 C#、VB 或 F# 都可以當作 Blazor 的開發語言
• 透過 WebAssembly 可將程式運行於所有主流瀏覽器
• Blazor 技術將有機會實現以 C# 進行全端 Web 開發！

8
只有 .NET Runtime 是
WebAssembly (WASM)
你的程式碼會編譯成 .NET 組件
( MSIL )
mono.js 與 blazor.js
負責繫結 DOM 更新
※ 未來有機會將所有 DLL
預先編譯為 WASM

9
Blazor 未來將支援以下能力
• A component model for building composable UI
• Routing
• Layouts
• Forms and validation
• Dependency injection
• JavaScript interop
• Live reloading in the browser during development
• Server-side rendering
• Full .NET debugging both in browsers and in the IDE
• Rich IntelliSense and tooling
• Ability to run on older (non-WebAssembly) browsers via asm.js
• Publishing and app size trimming

10
Blazor 的常見問題解答 1
• 可否將 Blazor 執行在沒有 .NET Runtime 的伺服器
– Blazor 應用程式可以部署在完全沒有 .NET Runtime 的伺服器
– 事實上，只要能放置靜態檔案就可以順利在瀏覽器執行 Blazor 應用程式
• 可否讓 Blazor 跟 ASP.NET Core 無縫整合
– 可以的，但非必要
• 為什麼 Blazor 的下載檔案這麼大？可以變小嗎？
– 早期 Blazor 的實驗專案只有 60KB
– 目前 Blazor 暫時採用 Mono Runtime 所以檔案才會這麼大
– 未來將會實現 AOT 機制，預期會大幅降低應用程式的大小！
– Mono and WebAssembly - Updates on Static Compilation

11
• 行動裝置可以執行 Blazor 嗎？
– 可以的，任何支援 WebAssembly 的瀏覽器都可以執行 ( 瀏覽器相容性 )
• 舊版瀏覽器 ( IE ) 可以執行 Blazor 嗎？
– 可以的，Blazor 會自動判斷瀏覽器支援度，並自動改用 asmjs 執行
– 執行在 IE11 必須使用 👉 https://github.com/Appizeo/Blazor.Polyfill
• 可否使用 .NET Standard 的 API 在 Blazor 上？
– 可以的
• Blazor 可以使用 XAML 嗎？
– 沒辦法，Blazor 基本上使用 HTML、CSS 與其他標準的 Web 技術組成！

12
• Blazor 可否呼叫現有的 JavaScript 函式庫
– 可以的，透過 Blazor 內建的 JavaScript interop APIs 呼叫即可。
• Blazor 可否直接存取 DOM
– 可以的，但不建議直接存取。

建立 Blazor 專案
Creating Blazor App

14
準備開發環境
• 安裝 .NET Core 2.1 SDK ( 2.1.300+ )
• 安裝 Visual Studio 2017 (15.7)
– 必須安裝【ASP.NET 與網頁程式開發】工作負載
– 目前 Blazor 不相容於 Visual Studio 2017 預覽版 ( 15.8 )
• 安裝 Blazor Language Services extension 擴充套件

17
啟動 Blazor 網站
• 選擇發行設定
– IIS Express
– BlazorApp (你的專案名稱)
• 啟動設定檔
– BlazorAppPropertieslaunchSettings.json
• [偵錯]  [啟動但不偵錯] ( Ctrl + F5 )
– 目前無法對 Blazor 應用程式進行偵錯

18
透過 .NET CLI 建立與執行網站
• 安裝專案範本
– dotnet new -i Microsoft.AspNetCore.Blazor.Templates
• 建立 Blazor 專案
– dotnet new blazor -o BlazorApp1
• 啟動 Blazor 網站
– cd BlazorApp1
– dotnet run

Blazor 的啟動生命週期
Bootstrap lifecycle

21
<script type="blazor-boot"></script>

22
載入 blazor.js 與 mono.js 與 mono.wasm

24
主程式進入點：Program.cs

25
網站首頁  Pages/Index.cshtml

26
設定版面  Pages/_ViewImports.cshtml

27
主版頁面  Shared/MainLayout.cshtml

Blazor 的元件化架構
Components in Blazor

29
每個 View 就是一個元件
• 檔名即元件名稱
– Shared/NavMenu.cshtml
• 在頁面中載入
– 直接將元件名稱當標籤用！
<div class="sidebar">
<NavMenu />
</div>

30
每個元件可以覆寫的方法
• OnInit() 與 OnInitAsync()
– 記得標示 protected 存取層級
• OnParametersSet() 與 OnParametersSetAsync()
– 類似 Angular 的 ngOnChanges() Hook
• ShouldRender()
– 類似 React 的 shouldComponentUpdate()

Blazor 的資料繫結
Data Bindinng in Blazor

33
單向繫結 (One-Way Data Binding)
• 內嵌繫結 (就跟一般 Razor 語法完全一樣)
– @Name
– <p style="background-color: @Background;">Notification</p>
– <p class="note @((IsActive ? "highlight" : ""))">Notes</p>
• 事件繫結
– 目前僅支援 onclick 與 onchange 事件！
– <button onclick="@ChangeValues">Change values</button>
– <button onclick="@(() => ChangeValues())">Change values</button>
– @functions {
private void ChangeValues() { }
}

34
雙向繫結 (Two-Way Data Binding)
• 透過 bind="…" 屬性 (Attribute)
– <input type="text" bind="@Name" />
– <input type="number" bind="@Age" />
– <input type="checkbox" bind="@IsAdmin" />
– <select id="select-box" bind="@TypeOfEmployee">
<option value=@EmployeeType.Employee>@EmployeeType.Employee.ToString()</option>
<option value=@EmployeeType.Contractor>@EmployeeType.Contractor.ToString()</option>
<option value=@EmployeeType.Intern>@EmployeeType.Intern.ToString()</option>
</select>
• 支援雙向繫結的型別
– int
– string
– DateTime
– enum
– boolean

35
從父元件進行屬性繫結到子元件
• 檔名即元件名稱
<SurveyPrompt Title="How is Blazor working for you?" />
• 子元件套用 [Parameter] 的 Property 才可以透過父元件傳遞屬性

36
從父元件訂閱子元件事件屬性的方式
• 父元件
<ChildComponent OnSomeEvent=@ChildEventClicked />
• 子元件
<button onclick=@OnClick>Click me (child component)</button>
@functions {
[Parameter]
Action<string> OnSomeEvent { get; set; }
void OnClick()
{
OnSomeEvent?.Invoke("Clicked!");
}
}

37
手動觸發頁面更新的方式

Blazor 的路由機制
Routing in Blazor

39
設定路由
• 頁面宣告
• 實際產生的程式碼
– 按下 Ctrl + T 搜尋 Counter 類別
– 可發現會自動產生以下 [Route] 屬性 (Attribute)
[Microsoft.AspNetCore.Blazor.Components.RouteAttribute("/counter")]
• 一個頁面可以設定多重路由

40
路由參數
@page "/hello-planet/{Planet}"
<h1>Hello @Planet!</h1>
@functions {
[Parameter]
public string Planet { get; set; }
protected override void OnInit()
{
Console.WriteLine(Planet);
}
}

41
路由連結
• 使用內建的 NavLink 元件
<NavLink href="/hello-universe">Hello Universe</NavLink>
• 使用程式碼進行導覽
@inject Microsoft.AspNetCore.Blazor.Services.IUriHelper UriHelper
@functions {
private void Navigate() {
UriHelper.NavigateTo("/hello-world");
}
}

Blazor 與 HttpClient
HttpClient in Blazor

43
注入與使用 HttpClient
• 注入 HttpClient 物件
@inject HttpClient Http
• 使用 HttpClient 物件 (背後是用 fetch API 進行呼叫)
@functions {
private async Task PrintWebApiResponse()
{
var response = await Http.GetStringAsync("/api/Customer");
Console.WriteLine(response);
}
}

44
相關連結
• Blazor 官方網站
• Learn Blazor ( 最完整的學習資源 )
• aspnet/Blazor - GitHub
• aspnet/Blazor - Gitter
• Blazor community resources
• Awesome Blazor
• Blazor Extensions
目前 Blazor Team 正在徵求開發者的意見回饋！

45
聯絡資訊
• The Will Will Web
記載著 Will 在網路世界的學習心得與技術分享
– http://blog.miniasp.com/
• Will 保哥的技術交流中心 (臉書粉絲專頁)
– http://www.facebook.com/will.fans
• Will 保哥的噗浪
– http://www.plurk.com/willh/invite
• Will 保哥的推特
– https://twitter.com/Will_Huang

使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)

Similar to 使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018) (20)

More from Will Huang

More from Will Huang (18)

使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)