.NET Core 3.0 で Blazor を使用したフルスタック C# Web アプリの構築
- 1. .NET Core 3.0 で Blazor を使用した フルスタック C# Web アプリ の構築 2019/10/12 Fukuoka.NET Conf 2019 ジェイエムテクノロジー株式会社 ジョニー #fukuten #dotnetconf
- 5. C#
- 6. .NET
- 8. C++ / Binary / Text (linear assembly bytecode)
- 10. JavaScript の仕組み https://... JavaScript Runtime Parser Compiler JIT Web APIs (DOM, File Storage, …) Inline JavaScript (*.html) JavaScript (*.js)
- 11. WebAssembly の仕組み https://... JavaScript Runtime Parser Compiler JIT Web APIs (DOM, File Storage, …) Inline JavaScript (*.html) JavaScript (*.js) WebAssembly (*.wasm)
- 12. Blazor WebAssembly の仕組み https://... JavaScript Runtime Parser Compiler JIT Web APIs (DOM, File Storage, …) Ref: https://daveaglick.com/posts/blazor- razor-webassembly-and-mono Thanks @daveaglick! mono.js mono.wasm blazor.webassembly.js Blazor Page (*.html) mscorlib.dll, netstandard.dll, ... MyApp.dll (Blazor app)
- 13. クライアント側 or サーバー側 Blazor https://... DOM Razor Components .NET WebAssembly https... DOM .NET Core SignalR Blazor WebAssembly Blazor サーバー Razor Components .NET .NET Core 3.02020年5月
- 14. クライアント側 or サーバー側 Blazor Blazor WebAssembly Blazor サーバー .NET Core 3.02020年5月 😎🆒 ダウンロードサイズが小さく、読み込み時間が短縮🚀 フル機能の超高速 .NET Core ランタイムで実行 コードはクライアント側へ提供されない DLL をブラウザへダウンロードされない シンプルなアーキテクチャ Web API / BFF (Back-end for Front-end) 構築不要 😓 レイテンシー オフラインサポートなし より多くのサーバー リソースを消費する 😎🆒 💯SPA、インタラクティブ クライアントリソースのフル活用 オフライン、静的サイト、PWA シナリオをサポート 😓 ダウンロードサイズ大きい WebAssembly が必要 現時点まだプレビュー中
- 15. While .NET Core 3.0 was still in preview we tested Blazor Server to see what its baseline scale characteristics look like. We put a Blazor Server app under load with active clients and monitored the latency of the user interactions. In our tests, a single Standard_D1_v2 instance on Azure (1 vCPU, 3.5 GB memory) could handle over 5,000 concurrent users without any degradation in latency. A Standard_D3_V2 instance (4 vCPU, 14GB memory) handled well over 20,000 concurrent clients. https://devblogs.microsoft.com/aspnet/blazor-server-in-net-core-3-0-scenarios-and-performance/
- 16. ASP.NET Web Forms vs. Blazor ASP.NET Web Forms Blazor React/Vue/Angular のようなクライアント側 Web UI フ レームワーク UI 操作 ≠ HTTP リクエスト・レスポンス仕組み サーバー側、ページベースアーキ テクチャー UI 操作 ⇒ HTTP リクエスト⇒ レ スポンス ページ自身へポストバック or ASP.NET AJAX / UpdatePanel コントロール ページライフサイクル ViewState でページ情報を維持 RenderTree → in-memory representation of the DOM
- 28. Fiddler
- 30. Blazor で独自のピザストア UI を構築する https://aka.ms/blazorworkshop
- 31. https://www.telerik.com/blazor-ui “Telerik UI for Blazor components have been built from the ground-up to ensure you experience shorter development cycles, quick iterations and cut time to market” “DevExpress UI for Blazor ships with 12 UI components (including a Data Grid, Pivot Grid, Charts and Scheduler) so you can design rich user experiences for both Blazor server-side and Blazor client-side platforms.” https://www.devexpress.com/blazor “The Syncfusion ASP.NET Core Blazor Components library is the only suite that you will ever need to build an application, containing over 60 high-performance, lightweight, modular, and responsive UI controls in a single package.” https://www.syncfusion.com/blazor-components
- 36. • Blazor: https://blazor.net • Docs: https://blazor.net/docs • .NET Core 3.0: https://dot.net/get-core3 • Visual Studio: https://visualstudio.com/ • Workshop: https://aka.ms/blazorworkshop • Community: https://aka.ms/awesomeblazor Try Blazor today!