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.
特別感謝