Download to read offline
Uploaded byAlan Tsai
不會 Javascript 沒關係，用 Blazor 來解決前端需求 - 成為 Full Stack .NET 開發者吧 - .NET Conf 2020 Stud4.TW
本文介绍了Blazor的概念和发展，强调了Blazor作为前端框架可以替代JavaScript的优势。文中还讨论了Blazor Server与Blazor WebAssembly的优缺点，并提供了开发环境的准备及示例项目。最后，作者呼吁开发者在使用Blazor时注重通过C#编写易于维护的前后端代码。
不會 Javascript 沒關係，用 Blazor 來解決前端需求 - 成為 Full Stack .NET 開發者吧 - .NET Conf 2020 Stud4.TW
- 1. 不會 JavaScript 沒關係 用Blazor 來解決前端需求 成為 Full Stack .NET 開發者吧 Alan Tsai @Alan Tsai 的學習筆記
- 2. 簡單自我介紹 • Alan Tsai •蔡孟玹 • 後端工程師 • .NET 技術爲主 • 喜歡學習不同東西 • Azure • Data Science、Chatbot • DevOps、Container • 架構、加强開發的 Tools • 翻譯文章/軟體 • 看小說 @Alan Tsai 的學習筆記
- 3. 教就是最好的學習方式 - 喜歡考證驗證所學 @AlanTsai 的學習筆記
- 4. 喜歡技術分享 • 2020 GlobalAzure • 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. 歡迎訂閲、按贊 + 分享 @AlanTsai 的學習筆記 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.
- 9.
- 10.
- 11.
- 12. 問題是什麼？ • .NET 就學不完了 •這麼多前端框架 • 還有大魔王 JavasScript • TypeScript @Alan Tsai 的學習筆記
- 13. 總結 • 技術不一致 • 開發環境不同 •生態不同 • 到底是要 PascalCase 還是 CamalCase 就搞死你 • 維護困難 • 共用物件要定義兩次 @Alan Tsai 的學習筆記
- 14. 用 JavaScript 統一世界 @AlanTsai 的學習筆記
- 15.
- 16.
- 17. What is Blazor @AlanTsai 的學習筆記
- 18.
- 19. Blazor • 使用 .NET作為前端 Web UI 的操作 – 取代 JavaScript • 可以呼叫 JavaScript 或者瀏覽器的 API • 用 C# 和 Razor 開發出可以重複使用的 UI – Component • 讓前端和後端程式碼可以共用 @Alan Tsai 的學習筆記
- 20.
- 21. 模式 Blazor WebAssemblyBlazor Server ASP.NETCore 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 fortrailblazers - Blazor in .NET 5 @Alan Tsai 的學習筆記
- 25. Debug 變得簡單 • 下中斷點 •可以看當下的參數 Debug ASP.NET Core Blazor WebAssembly @Alan Tsai 的學習筆記
- 26. 應該用 Server 還是WebAssembly？ @Alan Tsai 的學習筆記
- 27.
- 28. Server vs WebAssembly @AlanTsai 的學習筆記
- 29. Try .NET Introduction toC# • 全面使用 Blazor • 節省了大量的 Server 資源需求 @Alan Tsai 的學習筆記
- 30.
- 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 developBlazor? @Alan Tsai 的學習筆記
- 33. 環境準備 • 開發工具 • VisualStudio • Visual Studio Code • 任何喜歡的編輯器 • 安裝 • Visual Studio + Web Development • Visual Studio Code + C# Extension • .NET Core SDK @Alan Tsai 的學習筆記
- 34. Visual Studio 建立新專案 @AlanTsai 的學習筆記
- 35. dotnet cli dotnet newblazorwasm dotnet new blazorserver @Alan Tsai 的學習筆記
- 36. Demo：建立 Blazor App @AlanTsai 的學習筆記
- 37. 全部 C# 控制 @AlanTsai 的學習筆記
- 38. Demo：建立 ToDo App @AlanTsai 的學習筆記
- 39. 建立一個 ToDo 頁面 @AlanTsai 的學習筆記
- 40. Demo： 在 ASP .NETCore 用 Component @Alan Tsai 的學習筆記
- 41. Future of Blazor @AlanTsai 的學習筆記
- 42. Blazor Server Webapp 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, across-platform webview library for .NET Core @Alan Tsai 的學習筆記
- 44. Meet WebWindow, across-platform webview library for .NET Core @Alan Tsai 的學習筆記
- 45.
- 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.
Editor's Notes
- #57 Thanks for joining us! Have a great conference!