不會 Javascript 沒關係，用 Blazor 來解決前端需求 - 成為 Full Stack .NET 開發者吧 - .NET Conf 2020 Stud4.TW
Report
•0 likes•490 views
不會 Javascript 沒關係，用 Blazor 來解決前端需求 - 成為 Full Stack .NET 開發者吧 - .NET Conf 2020 Stud4.TW
•0 likes•490 views
Download to read offline
Report
隨著科技的發展，有穩定快速的後端服務還不夠，現在對於前端的操作要求也越來越高，所以前端框架如雨後春筍一般一直冒出來。 這時候最常遇到的問題就是，我會 .NET 作為後端，但是前端又要在學習 Javascript 以及對應框架才有辦法開發太難了。難道不能夠前後端技術統一嗎？如果同樣的軟體內容除了要提供 Web 也想提供桌面版本怎麼辦？ 以前，要解決統一技術只能夠使用 NodeJS，現在 .NET 透過 Blazor 也有完整的 Full Stack Solution。 這節來介紹一下 Blazor，看看如何用本來就會的 .NET 知識進行開發整合，不止可以用 Blazor 做到 SPA 的網站以及和 Azure 整合，未來想用它來建立跨平台可以跑的軟體，甚至可以打包成為 APP也不是不行。 來看看怎麼成為 Full Stack .NET 開發者吧。
Recommended
More Related Content
What's hot
What's hot(20)
Similar to 不會 Javascript 沒關係，用 Blazor 來解決前端需求 - 成為 Full Stack .NET 開發者吧 - .NET Conf 2020 Stud4.TW
Similar to 不會 Javascript 沒關係，用 Blazor 來解決前端需求 - 成為 Full Stack .NET 開發者吧 - .NET Conf 2020 Stud4.TW(20)
More from Alan Tsai
我和阿九Azure有約 38 Azure Blob Storage 如何省錢？ 搞懂Access Tier (Alan Tsai 的學習筆記)Alan Tsai
4.6K views•19 slides
More from Alan Tsai(20)
不會 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. 教就是最好的學習方式 - 喜歡考證驗證所學 @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 的學習筆記
- 10. @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 的學習筆記
- 19. Blazor • 使用 .NET 作為前端 Web UI 的操作 – 取代 JavaScript • 可以呼叫 JavaScript 或者瀏覽器的 API • 用 C# 和 Razor 開發出可以重複使用的 UI – Component • 讓前端和後端程式碼可以共用 @Alan Tsai 的學習筆記
- 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 的學習筆記
- 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
- Thanks for joining us! Have a great conference!