O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Net 6 的 blazor 開發新視界

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Carregando em…3
×

Confira estes a seguir

1 de 62 Anúncio

Net 6 的 blazor 開發新視界

Baixar para ler offline

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

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

Anúncio
Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Semelhante a Net 6 的 blazor 開發新視界 (20)

Anúncio

Mais de Gelis Wu (17)

Mais recentes (20)

Anúncio

Net 6 的 blazor 開發新視界

  1. 1. 探索 .NET 新世界
  2. 2. .NET 6 的 Blazor 開發新視界 Gelis
  3. 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. 4. Agenda • 為什麼要使用 Blazor? • 現在開始使用、商用系統開發? • 慎選你的 Blazor 開發的渲染模式 • 現有系統 Migration 到 Blazor 的幾個建議 • 打造(自己/團隊)的元件庫 • 配合團隊共同規範與標準 • 我的 Web Form 能夠直接升級成 Blazor 嗎? • 升級演練 Step by Step • upgrade-assistant 升級助理 • .NET 6 Blazor 的新功能介紹
  5. 5. Agenda • 為什麼要使用 Blazor? • 現在開始使用、商用系統開發? • 慎選你的 Blazor 開發的渲染模式 • 現有系統 Migration 到 Blazor 的幾個建議 • 打造(自己/團隊)的元件庫 • 配合團隊共同規範與標準 • 我的 Web Form 能夠直接升級成 Blazor 嗎? • 升級演練 Step by Step • upgrade-assistant 升級助理 • .NET 6 Blazor 的新功能介紹
  6. 6. 為什麼要使用 Blazor? • AOT 編譯,讓你的 Web 應用程式如同 Desktop 執行般快速 • 跨平台開發優勢、(平台/編輯器)任選:WebStorm, VSCode, VI.. • WebAssembly • 容易撰寫、門檻低、基於 .NET 6 未來發展空間大 • 有機會成為下一代跨平台 Desktop App 開發標準(WebView2/.NET MAUI) • 甚至 .NET 7 的未來,有自己的 Core Runtime 取代 mono.wasm
  7. 7. Ahead-of-time (AOT) compiled mode Interpreted mode (AOT) compiled mode
  8. 8. 但是哪一種比較好? • Interpreted mode 執行雖沒有AOT 快,但還可接受 • 不過、AOT 每次因為修改程式的重建需要幾分鐘… • 所以,理想的方式是: • Interpreted mode 用於開發環境 • AOT compiled mode 用於生產環境
  9. 9. Agenda • 為什麼要使用 Blazor? • 現在開始使用、商用系統開發? • 慎選你的 Blazor 開發的渲染模式 • 現有系統 Migration 到 Blazor 的幾個建議 • 打造(自己/團隊)的元件庫 • 配合團隊共同規範與標準 • 我的 Web Form 能夠直接升級成 Blazor 嗎? • 升級演練 Step by Step • upgrade-assistant 升級助理 • .NET 6 Blazor 的新功能介紹
  10. 10. Agenda • 為什麼要使用 Blazor? • 現在開始使用、商用系統開發? • 慎選你的 Blazor 開發的渲染模式 • 現有系統 Migration 到 Blazor 的幾個建議 • 打造(自己/團隊)的元件庫 • 配合團隊共同規範與標準 • 我的 Web Form 能夠直接升級成 Blazor 嗎? • 升級演練 Step by Step • upgrade-assistant 升級助理 • .NET 6 Blazor 的新功能介紹
  11. 11. Agenda • 為什麼要使用 Blazor? • 現在開始使用、商用系統開發? • 慎選你的 Blazor 開發的渲染模式 • 現有系統 Migration 到 Blazor 的幾個建議 • 打造(自己/團隊)的元件庫 • 配合團隊共同規範與標準 • 我的 Web Form 能夠直接升級成 Blazor 嗎? • 升級演練 Step by Step • upgrade-assistant 升級助理 • .NET 6 Blazor 的新功能介紹
  12. 12. Blazor WebAssembly
  13. 13. Blazor Server
  14. 14. Blazor Client Hosted by Server
  15. 15. 哪一種適合商用開發? 哪一種適合開發企業內部系統? 哪一種適合套整潔架構?
  16. 16. 哪一種適合商用開發? 哪一種適合開發企業內部系統? 哪一種適合套整潔架構?
  17. 17. Client Browser .NET Runtime (Mono) WASM Razor Page (C#) Razor Components Blazor WebAssembly Web API (JSON) Blazor WebAssembly
  18. 18. 哪一種適合商用開發? 哪一種適合開發企業內部系統? 哪一種適合套整潔架構?
  19. 19. Client Browser .NET Runtime (Mono) WASM Razor Page (C#) Razor Components Blazor WebAssembly Web API (JSON) Blazor WebAssembly
  20. 20. 哪一種適合商用開發? 哪一種適合開發企業內部系統? 哪一種適合套整潔架構?
  21. 21. Client Browser .NET Runtime (Mono) WASM Razor Page (C#) Razor Components Blazor WebAssembly Web API (JSON) Blazor WebAssembly Web Server
  22. 22. 好啦!.. 那 Blazor Server 的是..?XD Client Browser .NET 6 Server/Self Hosted Razor Components .NET Runtime Blazor Server HTML CSS JavaScript SignalR
  23. 23. 實務上的 Blazor 開發…
  24. 24. Application Service Use Cases Domain Model Service Layer Gateways UI JSON Over (Web API) DB ApiHostBase IIS Redis/Cache Socket/ Tcp 整潔架構 下 的 Blazor
  25. 25. 原本的Client 專案 作為 UI 專案
  26. 26. Agenda • 為什麼要使用 Blazor? • 現在開始使用、商用系統開發? • 慎選你的 Blazor 開發的渲染模式 • 現有系統 Migration 到 Blazor 的幾個建議 • 打造(自己/團隊)的元件庫 • 配合團隊共同規範與標準 • 我的 Web Form 能夠直接升級成 Blazor 嗎? • 升級演練 Step by Step • upgrade-assistant 升級助理 • .NET 6 Blazor 的新功能介紹
  27. 27. Agenda • 為什麼要使用 Blazor? • 現在開始使用、商用系統開發? • 慎選你的 Blazor 開發的渲染模式 • 現有系統 Migration 到 Blazor 的幾個建議 • 打造(自己/團隊)的元件庫 • 配合團隊共同規範與標準 • 我的 Web Form 能夠直接升級成 Blazor 嗎? • 升級演練 Step by Step • upgrade-assistant 升級助理 • .NET 6 Blazor 的新功能介紹
  28. 28. 現有系統 Migration 到 Blazor 的幾個建議 • 現有系統考量: • Razor Page 使用 > Front-End Framework (React, Vue, Angular…) • 現有開發人員不熟悉 Front-end Framework… • 若原本即為 SPA 類型網站,請思是否考有升級 .NET 6 的必要? • 考量系統未來的『跨平台』、『可攜性』、『Cloud』、『效能』 以及 Microservices 微服務、容器 Containers 服務開發等未來的支援 性… 等等 • 並無迫切需要升級為 Blazor、可先升級 .NET 6 即可! √
  29. 29. Agenda • 為什麼要使用 Blazor? • 現在開始使用、商用系統開發? • 慎選你的 Blazor 開發的渲染模式 • 現有系統 Migration 到 Blazor 的幾個建議 • 打造(自己/團隊)的元件庫 • 配合團隊共同規範與標準 • 我的 Web Form 能夠直接升級成 Blazor 嗎? • 升級演練 Step by Step • upgrade-assistant 升級助理 • .NET 6 Blazor 的新功能介紹
  30. 30. Agenda • 為什麼要使用 Blazor? • 現在開始使用、商用系統開發? • 慎選你的 Blazor 開發的渲染模式 • 現有系統 Migration 到 Blazor 的幾個建議 • 打造(自己/團隊)的元件庫 • 配合團隊共同規範與標準 • 我的 Web Form 能夠直接升級成 Blazor 嗎? • 升級演練 Step by Step • upgrade-assistant 升級助理 • .NET 6 Blazor 的新功能介紹
  31. 31. 建立團隊 & 專案使用的(共享)元件庫
  32. 32. Agenda • 為什麼要使用 Blazor? • 現在開始使用、商用系統開發? • 慎選你的 Blazor 開發的渲染模式 • 現有系統 Migration 到 Blazor 的幾個建議 • 打造(自己/團隊)的元件庫 • 配合團隊共同規範與標準 • 我的 Web Form 能夠直接升級成 Blazor 嗎? • 升級演練 Step by Step • upgrade-assistant 升級助理 • .NET 6 Blazor 的新功能介紹
  33. 33. Agenda • 為什麼要使用 Blazor? • 現在開始使用、商用系統開發? • 慎選你的 Blazor 開發的渲染模式 • 現有系統 Migration 到 Blazor 的幾個建議 • 打造(自己/團隊)的元件庫 • 配合團隊共同規範與標準 • 我的 Web Form 能夠直接升級成 Blazor 嗎? • 升級演練 Step by Step • upgrade-assistant 升級助理 • .NET 6 Blazor 的新功能介紹
  34. 34.
  35. 35. 升級演練 Step by Step
  36. 36. 升級演練 Step by Step
  37. 37. 升級演練 Step by Step 是否有 API?
  38. 38. 升級演練 Step by Step 是否有 API?
  39. 39. 升級演練 Step by Step 是否有 API?
  40. 40. 升級演練 Step by Step 是否有 API?
  41. 41. 升級演練 Step by Step 是否有 API? 撰寫服務層 Web API
  42. 42. 升級演練 Step by Step 是否有 API? 撰寫服務層 Web API
  43. 43. 升級演練 Step by Step 是否有 API? 撰寫服務層 Web API 引用現有項目
  44. 44. 升級演練 Step by Step 是否有 API? 撰寫服務層 Web API 引用現有項目
  45. 45. 升級演練 Step by Step 是否有 API? 撰寫服務層 Web API 引用現有項目 用 Blazor 元件取代 WebControl
  46. 46. Agenda • 為什麼要使用 Blazor? • 現在開始使用、商用系統開發? • 慎選你的 Blazor 開發的渲染模式 • 現有系統 Migration 到 Blazor 的幾個建議 • 打造(自己/團隊)的元件庫 • 配合團隊共同規範與標準 • 我的 Web Form 能夠直接升級成 Blazor 嗎? • 升級演練 Step by Step • upgrade-assistant 升級助理 • .NET 6 Blazor 的新功能介紹
  47. 47. Agenda • 為什麼要使用 Blazor? • 現在開始使用、商用系統開發? • 慎選你的 Blazor 開發的渲染模式 • 現有系統 Migration 到 Blazor 的幾個建議 • 打造(自己/團隊)的元件庫 • 配合團隊共同規範與標準 • 我的 Web Form 能夠直接升級成 Blazor 嗎? • 升級演練 Step by Step • upgrade-assistant 升級助理 • .NET 6 Blazor 的新功能介紹
  48. 48. 什麼是 .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 類別庫
  49. 49. 如何安裝 .NET Upgrade Assistant • 注意: • Upgrade-Assistant 需要 MSBuild 來處理專案檔 • 己單的方式是直接安裝 Visual Studio (2019 以上) • 安裝方式: • $ dotnet tool install -g upgrade-assistant • 更新最新版本: • $ dotnet tool update -g upgrade-assistant
  50. 50. 如何使用 Upgrade Assistant?
  51. 51. Agenda • 為什麼要使用 Blazor? • 現在開始使用、商用系統開發? • 慎選你的 Blazor 開發的渲染模式 • 現有系統 Migration 到 Blazor 的幾個建議 • 打造(自己/團隊)的元件庫 • 配合團隊共同規範與標準 • 我的 Web Form 能夠直接升級成 Blazor 嗎? • 升級演練 Step by Step • upgrade-assistant 升級助理 • .NET 6 Blazor 的新功能介紹
  52. 52. Agenda • 為什麼要使用 Blazor? • 現在開始使用、商用系統開發? • 慎選你的 Blazor 開發的渲染模式 • 現有系統 Migration 到 Blazor 的幾個建議 • 打造(自己/團隊)的元件庫 • 配合團隊共同規範與標準 • 我的 Web Form 能夠直接升級成 Blazor 嗎? • 升級演練 Step by Step • upgrade-assistant 升級助理 • .NET 6 Blazor 的新功能介紹
  53. 53. Q & A
  54. 54. Thanks for joining!
  55. 55. Azure Taiwan User Group
  56. 56. 關於我
  57. 57. 工商服務
  58. 58. 工商服務
  59. 59. 工商服務

×