Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

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

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

後端工程師當了這麼多年,練就了一身功力,卻敵不過大環境的劇烈變遷。前端工程近幾年的的發展相當迅速,成為 Web 開發的主要角色。不過,這個情勢可能在不久的將來即將翻盤,因為 WebAssembly 的出現,讓後端開發者也能用熟悉的程式語言與框架,開發出即時互動的 SPA 網站應用程式。本次演說,將帶來 .NET 最新最夯的 Blazor 框架,讓你迅速了解如何利用 C#/Razor 與 HTML5 開發出優異的網站應用程式。

Modern Web 2018 👉 http://modernweb.tw/

後端工程師當了這麼多年,練就了一身功力,卻敵不過大環境的劇烈變遷。前端工程近幾年的的發展相當迅速,成為 Web 開發的主要角色。不過,這個情勢可能在不久的將來即將翻盤,因為 WebAssembly 的出現,讓後端開發者也能用熟悉的程式語言與框架,開發出即時互動的 SPA 網站應用程式。本次演說,將帶來 .NET 最新最夯的 Blazor 框架,讓你迅速了解如何利用 C#/Razor 與 HTML5 開發出優異的網站應用程式。

Modern Web 2018 👉 http://modernweb.tw/

Plus De Contenu Connexe

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

  1. 1. 使用 C#/Razor 開發互動式 WebAssembly 網站 多奇數位創意有限公司 技術總監 黃保翕 ( Will 保哥 ) 部落格:http://blog.miniasp.com/ Modern Web 2018
  2. 2. 簡介 WebAssembly WebAssembly Overview
  3. 3. 3 關於 WebAssembly ( Wasm ) • 它可以執行在現代的瀏覽器 ( https://caniuse.com/#feat=wasm ) • 它是一種低階的「類組合語言」 • 它是一種精簡的二進制指令格式 • 它的執行速度極快,近乎原生應用程式效能 • 它可以透過撰寫高階程式語言並編譯成 WebAssembly 格式 • 它可以跟 JavaScript 無縫的一起執行並擁有跟 JS 一樣的安全性
  4. 4. 4 WebAssembly and the Death of JavaScript TL;DR https://www.facebook.com/will.fans/posts/2084089318286868
  5. 5. 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 技術的桌面應用出現
  6. 6. 簡介 Blazor 開發框架 Blazor = Browser + Razor
  7. 7. 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. 8. 8 只有 .NET Runtime 是 WebAssembly (WASM) 你的程式碼會編譯成 .NET 組件 ( MSIL ) mono.js 與 blazor.js 負責繫結 DOM 更新 ※ 未來有機會將所有 DLL 預先編譯為 WASM
  9. 9. 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. 10. 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. 11. 11 Blazor 的常見問題解答 2 • 行動裝置可以執行 Blazor 嗎? – 可以的,任何支援 WebAssembly 的瀏覽器都可以執行 ( 瀏覽器相容性 ) • 舊版瀏覽器 ( IE ) 可以執行 Blazor 嗎? – 可以的,Blazor 會自動判斷瀏覽器支援度,並自動改用 asmjs 執行 – 執行在 IE11 必須使用 👉 https://github.com/Appizeo/Blazor.Polyfill • 可否使用 .NET Standard 的 API 在 Blazor 上? – 可以的 • Blazor 可以使用 XAML 嗎? – 沒辦法,Blazor 基本上使用 HTML、CSS 與其他標準的 Web 技術組成!
  12. 12. 12 Blazor 的常見問題解答 3 • Blazor 可否呼叫現有的 JavaScript 函式庫 – 可以的,透過 Blazor 內建的 JavaScript interop APIs 呼叫即可。 • Blazor 可否直接存取 DOM – 可以的,但不建議直接存取。
  13. 13. 建立 Blazor 專案 Creating Blazor App
  14. 14. 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 擴充套件
  15. 15. 15 建立專案
  16. 16. 16 挑選 Blazor 專案範本
  17. 17. 17 啟動 Blazor 網站 • 選擇發行設定 – IIS Express – BlazorApp (你的專案名稱) • 啟動設定檔 – BlazorAppPropertieslaunchSettings.json • [偵錯]  [啟動但不偵錯] ( Ctrl + F5 ) – 目前無法對 Blazor 應用程式進行偵錯
  18. 18. 18 透過 .NET CLI 建立與執行網站 • 安裝專案範本 – dotnet new -i Microsoft.AspNetCore.Blazor.Templates • 建立 Blazor 專案 – dotnet new blazor -o BlazorApp1 • 啟動 Blazor 網站 – cd BlazorApp1 – dotnet run
  19. 19. Blazor 的啟動生命週期 Bootstrap lifecycle
  20. 20. 20 載入主要 HTML 首頁
  21. 21. 21 <script type="blazor-boot"></script>
  22. 22. 22 載入 blazor.js 與 mono.js 與 mono.wasm
  23. 23. 23 載入 .NET 組件
  24. 24. 24 主程式進入點:Program.cs
  25. 25. 25 網站首頁  Pages/Index.cshtml
  26. 26. 26 設定版面  Pages/_ViewImports.cshtml
  27. 27. 27 主版頁面  Shared/MainLayout.cshtml
  28. 28. Blazor 的元件化架構 Components in Blazor
  29. 29. 29 每個 View 就是一個元件 • 檔名即元件名稱 – Shared/NavMenu.cshtml • 在頁面中載入 – 直接將元件名稱當標籤用! <div class="sidebar"> <NavMenu /> </div>
  30. 30. 30 每個元件可以覆寫的方法 • OnInit() 與 OnInitAsync() – 記得標示 protected 存取層級 • OnParametersSet() 與 OnParametersSetAsync() – 類似 Angular 的 ngOnChanges() Hook • ShouldRender() – 類似 React 的 shouldComponentUpdate()
  31. 31. 31 實作 IDisposable 介面
  32. 32. Blazor 的資料繫結 Data Bindinng in Blazor
  33. 33. 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. 34. 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. 35. 35 從父元件進行屬性繫結到子元件 • 檔名即元件名稱 <SurveyPrompt Title="How is Blazor working for you?" /> • 子元件套用 [Parameter] 的 Property 才可以透過父元件傳遞屬性
  36. 36. 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. 37. 37 手動觸發頁面更新的方式
  38. 38. Blazor 的路由機制 Routing in Blazor
  39. 39. 39 設定路由 • 頁面宣告 • 實際產生的程式碼 – 按下 Ctrl + T 搜尋 Counter 類別 – 可發現會自動產生以下 [Route] 屬性 (Attribute) [Microsoft.AspNetCore.Blazor.Components.RouteAttribute("/counter")] • 一個頁面可以設定多重路由
  40. 40. 40 路由參數 @page "/hello-planet/{Planet}" <h1>Hello @Planet!</h1> @functions { [Parameter] public string Planet { get; set; } protected override void OnInit() { Console.WriteLine(Planet); } }
  41. 41. 41 路由連結 • 使用內建的 NavLink 元件 <NavLink href="/hello-universe">Hello Universe</NavLink> • 使用程式碼進行導覽 @inject Microsoft.AspNetCore.Blazor.Services.IUriHelper UriHelper @functions { private void Navigate() { UriHelper.NavigateTo("/hello-world"); } }
  42. 42. Blazor 與 HttpClient HttpClient in Blazor
  43. 43. 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. 44. 44 相關連結 • Blazor 官方網站 • Learn Blazor ( 最完整的學習資源 ) • aspnet/Blazor - GitHub • aspnet/Blazor - Gitter • Blazor community resources • Awesome Blazor • Blazor Extensions 目前 Blazor Team 正在徵求開發者的意見回饋!
  45. 45. 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

×