More Related Content Similar to 不會 Javascript 沒關係,用 Blazor 來解決前端需求 - 成為 Full Stack .NET 開發者吧 - .NET Conf 2020 Stud4.TW (20) 不會 Javascript 沒關係,用 Blazor 來解決前端需求 - 成為 Full Stack .NET 開發者吧 - .NET Conf 2020 Stud4.TW2. 簡單自我介紹
• Alan Tsai
• 蔡孟玹
• 後端工程師
• .NET 技術爲主
• 喜歡學習不同東西
• Azure
• Data Science、Chatbot
• DevOps、Container
• 架構、加强開發的 Tools
• 翻譯文章/軟體
• 看小說
@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 的學習筆記
6. 歡迎訂閲、按贊 + 分享
@Alan Tsai 的學習筆記
contact@alantsai.net
• Alan Tsai 的學習筆記
• https://blog.alantsai.net
• FB粉絲頁
• http://fb.alantsai.net
• Youtube
• http://yt.alantsai.net
19. Blazor
• 使用 .NET 作為前端 Web UI 的操作 – 取代 JavaScript
• 可以呼叫 JavaScript 或者瀏覽器的 API
• 用 C# 和 Razor 開發出可以重複使用的 UI – Component
• 讓前端和後端程式碼可以共用
@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 的學習筆記
31. DiabloBlazor
• 雙 WebAssembly
• C# WebAssembly PWA
• C++ WebAssembly Game
• https://github.com/n-stefan/diabloblazor
• https://n-stefan.github.io/diabloblazor/
@Alan Tsai 的學習筆記
33. 環境準備
• 開發工具
• Visual Studio
• Visual Studio Code
• 任何喜歡的編輯器
• 安裝
• Visual Studio + Web Development
• Visual Studio Code + C# Extension
• .NET Core SDK
@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 的學習筆記
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 的學習筆記
Editor's Notes Thanks for joining us! Have a great conference!