不會 Javascript 沒關係,用 Blazor 來解決前端需求 - 成為 Full Stack .NET 開發者吧 - .NET Conf 2020 Stud4.TW

Alan Tsai
Alan Tsaia Microsoft MVP, MCT, Blogger, Youtuber and ASP .NET Developer at Wishing-Soft
不會 JavaScript 沒關係
用 Blazor 來解決前端需求
成為 Full Stack .NET 開發者吧
Alan Tsai
@Alan Tsai 的學習筆記
簡單自我介紹
• Alan Tsai
• 蔡孟玹
• 後端工程師
• .NET 技術爲主
• 喜歡學習不同東西
• Azure
• Data Science、Chatbot
• DevOps、Container
• 架構、加强開發的 Tools
• 翻譯文章/軟體
• 看小說
@Alan Tsai 的學習筆記
教就是最好的學習方式 - 喜歡考證驗證所學
@Alan Tsai 的學習筆記
喜歡技術分享
• 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 的學習筆記
喜歡技術分享
• 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 的學習筆記
歡迎訂閲、按贊 + 分享
@Alan Tsai 的學習筆記
contact@alantsai.net
• Alan Tsai 的學習筆記
• https://blog.alantsai.net
• FB粉絲頁
• http://fb.alantsai.net
• Youtube
• http://yt.alantsai.net
Agenda
• Why Blazor?
• What is Blazor?
• How to develop Blazor?
• Future of Blazor
@Alan Tsai 的學習筆記
Why Blazor?
@Alan Tsai 的學習筆記
人對於網頁的操作體驗要求越來越高
@Alan Tsai 的學習筆記
@Alan Tsai 的學習筆記
還是自己來好了
@Alan Tsai 的學習筆記
問題是什麼?
• .NET 就學不完了
• 這麼多前端框架
• 還有大魔王 JavasScript
• TypeScript
@Alan Tsai 的學習筆記
總結
• 技術不一致
• 開發環境不同
• 生態不同
• 到底是要 PascalCase 還是 CamalCase 就搞死你
• 維護困難
• 共用物件要定義兩次
@Alan Tsai 的學習筆記
用 JavaScript 統一世界
@Alan Tsai 的學習筆記
@Alan Tsai 的學習筆記
@Alan Tsai 的學習筆記
What is Blazor
@Alan Tsai 的學習筆記
https://...
JS
.NET
@Alan Tsai 的學習筆記
Blazor
• 使用 .NET 作為前端 Web UI 的操作 – 取代 JavaScript
• 可以呼叫 JavaScript 或者瀏覽器的 API
• 用 C# 和 Razor 開發出可以重複使用的 UI – Component
• 讓前端和後端程式碼可以共用
@Alan Tsai 的學習筆記
Blazor History
2018
Experiment
2019/04
Preview
2019/09
Release
Sever
2020/05
Release
WebAssembly
Later
Other
Platform
模式
Blazor WebAssemblyBlazor Server
ASP.NET Core Blazor hosting models
@Alan Tsai 的學習筆記
Blazor Server
• 優點
• 啟動速度快
• 完整 ASP.NET Framework
• 不需要 WebAssembly
• 機敏訊息存在 Server
• 缺點
• 不能離線使用
• 需要伺服器執行 Server
• 程式跑相對較慢 – 網路傳輸 SignalR ServiceApp Service
@Alan Tsai 的學習筆記
Blazor WebAssembly
• 優點
• 速度快 – 接近原生
• 可以離線使用
• 不用伺服器 – 靜態網站
• 大部分新瀏覽器原生支援
• 缺點
• 瀏覽器做所有的事情 – 慢
• 啟動比較慢 – 下載檔案
• 需要 WebAssembly
Azure Static Web App Azure Blob Statice Site
@Alan Tsai 的學習筆記
速度提升
A talk for trailblazers - Blazor in .NET 5
@Alan Tsai 的學習筆記
Debug 變得簡單
• 下中斷點
• 可以看當下的參數
Debug ASP.NET Core Blazor WebAssembly
@Alan Tsai 的學習筆記
應該用 Server 還是 WebAssembly?
@Alan Tsai 的學習筆記
@Alan Tsai 的學習筆記
Server vs WebAssembly
@Alan Tsai 的學習筆記
Try .NET
Introduction to C#
• 全面使用 Blazor
• 節省了大量的 Server
資源需求
@Alan Tsai 的學習筆記
@Alan Tsai 的學習筆記
DiabloBlazor
• 雙 WebAssembly
• C# WebAssembly PWA
• C++ WebAssembly Game
• https://github.com/n-stefan/diabloblazor
• https://n-stefan.github.io/diabloblazor/
@Alan Tsai 的學習筆記
How to develop Blazor?
@Alan Tsai 的學習筆記
環境準備
• 開發工具
• Visual Studio
• Visual Studio Code
• 任何喜歡的編輯器
• 安裝
• Visual Studio + Web Development
• Visual Studio Code + C# Extension
• .NET Core SDK
@Alan Tsai 的學習筆記
Visual Studio 建立新專案
@Alan Tsai 的學習筆記
dotnet cli
dotnet new blazorwasm
dotnet new blazorserver
@Alan Tsai 的學習筆記
Demo:建立 Blazor App
@Alan Tsai 的學習筆記
全部 C# 控制
@Alan Tsai 的學習筆記
Demo:建立 ToDo App
@Alan Tsai 的學習筆記
建立一個 ToDo 頁面
@Alan Tsai 的學習筆記
Demo:
在 ASP .NET Core 用 Component
@Alan Tsai 的學習筆記
Future of Blazor
@Alan Tsai 的學習筆記
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 的學習筆記
Meet WebWindow, a cross-platform webview library for .NET Core
@Alan Tsai 的學習筆記
Meet WebWindow, a cross-platform webview library for .NET Core
@Alan Tsai 的學習筆記
結語
@Alan Tsai 的學習筆記
總結
• C# 才是王道
• 還是可以透過 Interop 操作 JavaScript
• 不要糾結是 Server 還是 WebAssembly 版本
• 用就對了 -可以直接轉
• 注意寫法
@Alan Tsai 的學習筆記
下一步
• 如果有在用 ASP .NET Core MVC
• 可以直接使用 Component
• Integrating Blazor Components into Existing Asp.Net Core MVC
Applications
• 有很多 Component Boundle
• 再不行自己做
@Alan Tsai 的學習筆記
參考資料
• Awesome Blazor
• 影片
• .NET Conf 2020
• Main
• Focus on Blazor
• Introduction to ASP.NET Core Blazor
• 官方文件
• Microsoft Learn
@Alan Tsai 的學習筆記
特別感謝
1 of 49

More Related Content

What's hot(20)

ASP.NET Core: The best of the new bitsASP.NET Core: The best of the new bits
ASP.NET Core: The best of the new bits
Ken Cenerelli1.6K views
Angular  2.0Angular  2.0
Angular 2.0
Mallikarjuna G D165 views
Composer 經典食譜Composer 經典食譜
Composer 經典食譜
Shengyou Fan1.6K views
Introduction to .NET CoreIntroduction to .NET Core
Introduction to .NET Core
Marco Parenzan3.6K views
Solid NodeJS with TypeScript, Jest & NestJSSolid NodeJS with TypeScript, Jest & NestJS
Solid NodeJS with TypeScript, Jest & NestJS
Rafael Casuso Romate6.7K views
Microsoft dot net frameworkMicrosoft dot net framework
Microsoft dot net framework
Ashish Verma3.6K views
Introduce Google KubernetesIntroduce Google Kubernetes
Introduce Google Kubernetes
Yongbok Kim6.6K views
Angular 2Angular 2
Angular 2
Zoubir REMILA327 views
.Net Core.Net Core
.Net Core
Bertrand Le Roy10.1K views
BlazorBlazor
Blazor
Sandun Perera377 views
使用 switch/case 重構程式碼使用 switch/case 重構程式碼
使用 switch/case 重構程式碼
Weizhong Yang8.5K views
Clean backends with NestJsClean backends with NestJs
Clean backends with NestJs
Aymene Bennour402 views
Nextjs13.pptxNextjs13.pptx
Nextjs13.pptx
DivyanshGupta922023479 views

Similar to 不會 Javascript 沒關係,用 Blazor 來解決前端需求 - 成為 Full Stack .NET 開發者吧 - .NET Conf 2020 Stud4.TW

Kamigo reviews 20191127Kamigo reviews 20191127
Kamigo reviews 20191127Jia Yu Lin
177 views100 slides

Similar to 不會 Javascript 沒關係,用 Blazor 來解決前端需求 - 成為 Full Stack .NET 開發者吧 - .NET Conf 2020 Stud4.TW(20)

More from Alan Tsai(20)

不會 Javascript 沒關係,用 Blazor 來解決前端需求 - 成為 Full Stack .NET 開發者吧 - .NET Conf 2020 Stud4.TW

Editor's Notes

  1. Thanks for joining us! Have a great conference!