本文介绍了Blazor的概念和发展，强调了Blazor作为前端框架可以替代JavaScript的优势。文中还讨论了Blazor Server与Blazor WebAssembly的优缺点，并提供了开发环境的准备及示例项目。最后，作者呼吁开发者在使用Blazor时注重通过C#编写易于维护的前后端代码。

1. 不會 JavaScript 沒關係
用 Blazor 來解決前端需求
成為 Full Stack .NET 開發者吧
Alan Tsai
@Alan Tsai 的學習筆記

2. 簡單自我介紹
• Alan Tsai
• 蔡孟玹
• 後端工程師
• .NET 技術爲主
• 喜歡學習不同東西
• Azure
• Data Science、Chatbot
• DevOps、Container
• 架構、加强開發的 Tools
• 翻譯文章/軟體
• 看小說
@Alan Tsai 的學習筆記

3. 教就是最好的學習方式 - 喜歡考證驗證所學
@Alan Tsai 的學習筆記

4. 喜歡技術分享
• 2020 Global Azure
• Azure API Management
協助邁向Open API及Micro Service架構的好用服務
• 2020 Microsoft Online Tech Forum
• Keep Azure cost down
• 2019 Microsoft Insider DevTour Taipei
• Future proof your desktop apps with .NET core
• .NET Conf 2019
• 用 Bot Framework 開發 Chatbot = 支援多平臺 + 包含平臺客制功能 - 以Line爲例
@Alan Tsai 的學習筆記

5. 喜歡技術分享
• Trainocate
• AZ-104、AZ-204、AZ-400、DP-200、DP-201
• 台灣智慧自動化與機器人協會
• 運用Python進行大數據分析
• 機器學習基礎理論課程及人工智慧 – ML.NET
• 中華電信學院
• 使用Azure AI打造有人工智能的Line聊天機器人
• DevOps與CI/CD實務研習班
• 聖森内部教育訓練
• Azure DevOps CI/CD 應用
@Alan Tsai 的學習筆記

6. 歡迎訂閲、按贊 + 分享
@Alan Tsai 的學習筆記
contact@alantsai.net
• Alan Tsai 的學習筆記
• https://blog.alantsai.net
• FB粉絲頁
• http://fb.alantsai.net
• Youtube
• http://yt.alantsai.net

7. Agenda
• Why Blazor?
• What is Blazor?
• How to develop Blazor?
• Future of Blazor
@Alan Tsai 的學習筆記

8. Why Blazor?
@Alan Tsai 的學習筆記

9. 人對於網頁的操作體驗要求越來越高
@Alan Tsai 的學習筆記

10. @Alan Tsai 的學習筆記

11. 還是自己來好了
@Alan Tsai 的學習筆記

12. 問題是什麼？
• .NET 就學不完了
• 這麼多前端框架
• 還有大魔王 JavasScript
• TypeScript
@Alan Tsai 的學習筆記

13. 總結
• 技術不一致
• 開發環境不同
• 生態不同
• 到底是要 PascalCase 還是 CamalCase 就搞死你
• 維護困難
• 共用物件要定義兩次
@Alan Tsai 的學習筆記

14. 用 JavaScript 統一世界
@Alan Tsai 的學習筆記

15. @Alan Tsai 的學習筆記

16. @Alan Tsai 的學習筆記

17. What is Blazor
@Alan Tsai 的學習筆記

18. https://...
JS
.NET
@Alan Tsai 的學習筆記

19. Blazor
• 使用 .NET 作為前端 Web UI 的操作 – 取代 JavaScript
• 可以呼叫 JavaScript 或者瀏覽器的 API
• 用 C# 和 Razor 開發出可以重複使用的 UI – Component
• 讓前端和後端程式碼可以共用
@Alan Tsai 的學習筆記

20. Blazor History
2018
Experiment
2019/04
Preview
2019/09
Release
Sever
2020/05
Release
WebAssembly
Later
Other
Platform

21. 模式
Blazor WebAssemblyBlazor Server
ASP.NET Core Blazor hosting models
@Alan Tsai 的學習筆記

22. Blazor Server
• 優點
• 啟動速度快
• 完整 ASP.NET Framework
• 不需要 WebAssembly
• 機敏訊息存在 Server
• 缺點
• 不能離線使用
• 需要伺服器執行 Server
• 程式跑相對較慢 – 網路傳輸 SignalR ServiceApp Service
@Alan Tsai 的學習筆記

23. Blazor WebAssembly
• 優點
• 速度快 – 接近原生
• 可以離線使用
• 不用伺服器 – 靜態網站
• 大部分新瀏覽器原生支援
• 缺點
• 瀏覽器做所有的事情 – 慢
• 啟動比較慢 – 下載檔案
• 需要 WebAssembly
Azure Static Web App Azure Blob Statice Site
@Alan Tsai 的學習筆記

24. 速度提升
A talk for trailblazers - Blazor in .NET 5
@Alan Tsai 的學習筆記

25. Debug 變得簡單
• 下中斷點
• 可以看當下的參數
Debug ASP.NET Core Blazor WebAssembly
@Alan Tsai 的學習筆記

26. 應該用 Server 還是 WebAssembly？
@Alan Tsai 的學習筆記

27. @Alan Tsai 的學習筆記

28. Server vs WebAssembly
@Alan Tsai 的學習筆記

29. Try .NET
Introduction to C#
• 全面使用 Blazor
• 節省了大量的 Server
資源需求
@Alan Tsai 的學習筆記

30. @Alan Tsai 的學習筆記

31. DiabloBlazor
• 雙 WebAssembly
• C# WebAssembly PWA
• C++ WebAssembly Game
• https://github.com/n-stefan/diabloblazor
• https://n-stefan.github.io/diabloblazor/
@Alan Tsai 的學習筆記

32. How to develop Blazor?
@Alan Tsai 的學習筆記

33. 環境準備
• 開發工具
• Visual Studio
• Visual Studio Code
• 任何喜歡的編輯器
• 安裝
• Visual Studio + Web Development
• Visual Studio Code + C# Extension
• .NET Core SDK
@Alan Tsai 的學習筆記

34. Visual Studio 建立新專案
@Alan Tsai 的學習筆記

35. dotnet cli
dotnet new blazorwasm
dotnet new blazorserver
@Alan Tsai 的學習筆記

36. Demo：建立 Blazor App
@Alan Tsai 的學習筆記

37. 全部 C# 控制
@Alan Tsai 的學習筆記

38. Demo：建立 ToDo App
@Alan Tsai 的學習筆記

39. 建立一個 ToDo 頁面
@Alan Tsai 的學習筆記

40. Demo：
在 ASP .NET Core 用 Component
@Alan Tsai 的學習筆記

41. Future of Blazor
@Alan Tsai 的學習筆記

42. Blazor Server Web app
Every interaction handled on server
Prerendered HTML (optional)
Blazor WebAssembly Web app with client-side execution
Loaded from web server
Can work offline via Service Worker
Blazor PWA – OS installed Appears as native app (own window)
Works offline or online
Blazor Hybrid Native .NET renders to Electron / WebView
Appears as native app (own window)
Works offline or online
Web
Desktop
+ Mobile
Blazor Native Same programming model, but
rendering non-HTML UI@Alan Tsai 的學習筆記

43. Meet WebWindow, a cross-platform webview library for .NET Core
@Alan Tsai 的學習筆記

44. Meet WebWindow, a cross-platform webview library for .NET Core
@Alan Tsai 的學習筆記

45. 結語
@Alan Tsai 的學習筆記

46. 總結
• C# 才是王道
• 還是可以透過 Interop 操作 JavaScript
• 不要糾結是 Server 還是 WebAssembly 版本
• 用就對了 -可以直接轉
• 注意寫法
@Alan Tsai 的學習筆記

47. 下一步
• 如果有在用 ASP .NET Core MVC
• 可以直接使用 Component
• Integrating Blazor Components into Existing Asp.Net Core MVC
Applications
• 有很多 Component Boundle
• 再不行自己做
@Alan Tsai 的學習筆記

48. 參考資料
• Awesome Blazor
• 影片
• .NET Conf 2020
• Main
• Focus on Blazor
• Introduction to ASP.NET Core Blazor
• 官方文件
• Microsoft Learn
@Alan Tsai 的學習筆記

49. 特別感謝