Net 6 的 blazor 開發新視界

1. 探索 .NET 新世界

2. .NET 6 的 Blazor 開發新視界 Gelis

3. 吳俊毅 Gelis - FB 軟體開發之路-經營者關於我 • 部落格 (Gelis 技術隨筆) http://gelis-dotnet.blogspot.tw/ • FB 粉絲團(Gelis 的程式設計訓練營) https://www.facebook.com/gelis.dev.learning/?ref=bookmarks • FB 社團 (軟體開發之路) https://www.facebook.com/groups/361804473860062/?ref=ts&fref=ts 資深.NET技術顧問

4. Agenda • 為什麼要使用 Blazor？ • 現在開始使用、商用系統開發？ • 慎選你的 Blazor 開發的渲染模式 • 現有系統 Migration 到 Blazor 的幾個建議 • 打造（自己/團隊）的元件庫 • 配合團隊共同規範與標準 • 我的 Web Form 能夠直接升級成 Blazor 嗎？ • 升級演練 Step by Step • upgrade-assistant 升級助理 • .NET 6 Blazor 的新功能介紹

6. 為什麼要使用 Blazor？ • AOT 編譯，讓你的 Web 應用程式如同 Desktop 執行般快速 • 跨平台開發優勢、(平台/編輯器)任選：WebStorm, VSCode, VI.. • WebAssembly • 容易撰寫、門檻低、基於 .NET 6 未來發展空間大 • 有機會成為下一代跨平台 Desktop App 開發標準（WebView2/.NET MAUI） • 甚至 .NET 7 的未來，有自己的 Core Runtime 取代 mono.wasm

7. Ahead-of-time (AOT) compiled mode Interpreted mode (AOT) compiled mode

9. 但是哪一種比較好？ • Interpreted mode 執行雖沒有AOT 快，但還可接受 • 不過、AOT 每次因為修改程式的重建需要幾分鐘… • 所以，理想的方式是： • Interpreted mode 用於開發環境 • AOT compiled mode 用於生產環境

13. Blazor WebAssembly

14. Blazor Server

15. Blazor Client Hosted by Server

16. 哪一種適合商用開發？哪一種適合開發企業內部系統？哪一種適合套整潔架構？

18. Client Browser .NET Runtime (Mono) WASM Razor Page (C#) Razor Components Blazor WebAssembly Web API (JSON) Blazor WebAssembly

20. Client Browser .NET Runtime (Mono) WASM Razor Page (C#) Razor Components Blazor WebAssembly Web API (JSON) Blazor WebAssembly

22. Client Browser .NET Runtime (Mono) WASM Razor Page (C#) Razor Components Blazor WebAssembly Web API (JSON) Blazor WebAssembly Web Server

23. 好啦！.. 那 Blazor Server 的是..？XD Client Browser .NET 6 Server/Self Hosted Razor Components .NET Runtime Blazor Server HTML CSS JavaScript SignalR

24. 實務上的 Blazor 開發…

25. Application Service Use Cases Domain Model Service Layer Gateways UI JSON Over (Web API) DB ApiHostBase IIS Redis/Cache Socket/ Tcp 整潔架構下的 Blazor

27. 原本的Client 專案作為 UI 專案

30. 現有系統 Migration 到 Blazor 的幾個建議 • 現有系統考量： • Razor Page 使用 > Front-End Framework (React, Vue, Angular…) • 現有開發人員不熟悉 Front-end Framework… • 若原本即為 SPA 類型網站，請思是否考有升級 .NET 6 的必要？ • 考量系統未來的『跨平台』、『可攜性』、『Cloud』、『效能』以及 Microservices 微服務、容器 Containers 服務開發等未來的支援性… 等等 • 並無迫切需要升級為 Blazor、可先升級 .NET 6 即可！ √

33. 建立團隊 & 專案使用的(共享)元件庫

36. …

37. 升級演練 Step by Step

38. 升級演練 Step by Step

39. 升級演練 Step by Step 是否有 API?

43. 升級演練 Step by Step 是否有 API? 撰寫服務層 Web API

44. 升級演練 Step by Step 是否有 API? 撰寫服務層 Web API

45. 升級演練 Step by Step 是否有 API? 撰寫服務層 Web API 引用現有項目

46. 升級演練 Step by Step 是否有 API? 撰寫服務層 Web API 引用現有項目

47. 升級演練 Step by Step 是否有 API? 撰寫服務層 Web API 引用現有項目用 Blazor 元件取代 WebControl

50. 什麼是 .NET Upgrade Assistant？ • 命令列 CLI 工具、以 .NET Global Tool 形式提供 • 結合 .NET Core 強大分析器 Code Analysis 進行程式碼遷移 • 支援下面應用程式類型： • .NET Framework Windows Forms 應用程式 • .NET Framework WPF 應用程式 • .NET Framework ASP.NET MVC 應用程式 • .NET Framework Console 主控台應用程式 • .NET Framework Library 類別庫

51. 如何安裝 .NET Upgrade Assistant • 注意： • Upgrade-Assistant 需要 MSBuild 來處理專案檔 • 己單的方式是直接安裝 Visual Studio （2019 以上） • 安裝方式： • $ dotnet tool install -g upgrade-assistant • 更新最新版本： • $ dotnet tool update -g upgrade-assistant

52. 如何使用 Upgrade Assistant？

56. Q & A

57. Thanks for joining!

58. Azure Taiwan User Group

59. 關於我

60. 工商服務

61. 工商服務

62. 工商服務

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)

More from Gelis Wu

More from Gelis Wu (20)

Net 6 的 blazor 開發新視界