SlideShare uma empresa Scribd logo
1 de 37
Baixar para ler offline
.NET Core 3.0 で Blazor を使用した
フルスタック C# Web アプリ
の構築
2019/10/12 Fukuoka.NET Conf 2019
ジェイエムテクノロジー株式会社
ジョニー
#fukuten #dotnetconf
about:config
ジョニー
@joni2nja
https://joni.carrd.co/
https://medium.com/@joni2nja​
https://github.com/jo-ninja​
https://youtu.be/MetcuX1OHD0
https://...
JS
C#
.NET
( ̄- ̄?) ̄- ̄?) ̄- ̄?)何?
C++ / Binary / Text (linear assembly bytecode)
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築
JavaScript の仕組み
https://...
JavaScript Runtime
Parser
Compiler
JIT
Web APIs (DOM,
File Storage, …)
Inline JavaScript (*.html)
JavaScript (*.js)
WebAssembly の仕組み
https://...
JavaScript Runtime
Parser
Compiler
JIT
Web APIs (DOM,
File Storage, …)
Inline JavaScript (*.html)
JavaScript (*.js)
WebAssembly (*.wasm)
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)
クライアント側 or サーバー側 Blazor
https://...
DOM
Razor Components
.NET
WebAssembly
https...
DOM
.NET Core
SignalR
Blazor WebAssembly Blazor サーバー
Razor Components
.NET
.NET Core 3.02020年5月
クライアント側 or サーバー側 Blazor
Blazor WebAssembly Blazor サーバー
.NET Core 3.02020年5月
😎🆒
 ダウンロードサイズが小さく、読み込み時間が短縮🚀
 フル機能の超高速 .NET Core ランタイムで実行
 コードはクライアント側へ提供されない
 DLL をブラウザへダウンロードされない
 シンプルなアーキテクチャ
 Web API / BFF (Back-end for Front-end) 構築不要
😓
 レイテンシー
 オフラインサポートなし
 より多くのサーバー リソースを消費する
😎🆒
 💯SPA、インタラクティブ
 クライアントリソースのフル活用
 オフライン、静的サイト、PWA
シナリオをサポート
😓
 ダウンロードサイズ大きい
 WebAssembly が必要
 現時点まだプレビュー中
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/
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
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築
Fiddler
https://blazor.net
Blazor で独自のピザストア UI を構築する
https://aka.ms/blazorworkshop
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
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築
https://aka.ms/awesomeblazor
https://gitter.im/aspnet/blazor
https://aka.ms/blasteroids
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築
• 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!
.NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築

Mais conteúdo relacionado

Mais procurados

いつでもどこでも .NET
いつでもどこでも .NETいつでもどこでも .NET
いつでもどこでも .NETYuta Matsumura
 
Microsoft learnご紹介vol2
Microsoft learnご紹介vol2Microsoft learnご紹介vol2
Microsoft learnご紹介vol2ru pic
 
オンライン中心だから地方のコミュニティも見てみませんか? - Fukuoka.NETの紹介
オンライン中心だから地方のコミュニティも見てみませんか? - Fukuoka.NETの紹介オンライン中心だから地方のコミュニティも見てみませんか? - Fukuoka.NETの紹介
オンライン中心だから地方のコミュニティも見てみませんか? - Fukuoka.NETの紹介Yuta Matsumura
 
これから始める Bot Builder 開発のコツと舞台裏
これから始める Bot Builder 開発のコツと舞台裏これから始める Bot Builder 開発のコツと舞台裏
これから始める Bot Builder 開発のコツと舞台裏Yuta Matsumura
 
The Twelve-Factor (A|M)pp with C#
The Twelve-Factor (A|M)pp with C#The Twelve-Factor (A|M)pp with C#
The Twelve-Factor (A|M)pp with C#Yuta Matsumura
 
Xamarinでも有能な .NET Core
 Xamarinでも有能な .NET Core  Xamarinでも有能な .NET Core
Xamarinでも有能な .NET Core Yuta Matsumura
 
ASP.NET CoreとAzure AD B2Cを使ったサクっと認証
ASP.NET CoreとAzure AD B2Cを使ったサクっと認証ASP.NET CoreとAzure AD B2Cを使ったサクっと認証
ASP.NET CoreとAzure AD B2Cを使ったサクっと認証Yuta Matsumura
 
SendGrid SDKを捨てた話
SendGrid SDKを捨てた話SendGrid SDKを捨てた話
SendGrid SDKを捨てた話Yuta Matsumura
 
そろそろレガシーな.Net開発をやめなイカ?
そろそろレガシーな.Net開発をやめなイカ?そろそろレガシーな.Net開発をやめなイカ?
そろそろレガシーな.Net開発をやめなイカ?Yuta Matsumura
 
.NET Core時代のCI/CD
.NET Core時代のCI/CD.NET Core時代のCI/CD
.NET Core時代のCI/CDYuta Matsumura
 
.NET の今と今後に思うこと
.NET の今と今後に思うこと.NET の今と今後に思うこと
.NET の今と今後に思うことAkira Inoue
 
Windowsサービスも.NET Coreで作ろう
Windowsサービスも.NET Coreで作ろうWindowsサービスも.NET Coreで作ろう
Windowsサービスも.NET Coreで作ろうkeitasudo1
 
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要.NET 6 と Blazor で作るクロスプラットフォームアプリ概要
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要Akira Inoue
 
.NET 5 and Windows app dev
.NET 5 and Windows app dev.NET 5 and Windows app dev
.NET 5 and Windows app dev一希 大田
 
クラウドやOSSで“デザイン”するモダンなシステムアーキテクチャ
クラウドやOSSで“デザイン”するモダンなシステムアーキテクチャクラウドやOSSで“デザイン”するモダンなシステムアーキテクチャ
クラウドやOSSで“デザイン”するモダンなシステムアーキテクチャYuta Matsumura
 
30min Serverless xTuber
30min Serverless xTuber30min Serverless xTuber
30min Serverless xTuberTakaaki Suzuki
 
.NET の過去、現在、そして未来
.NET の過去、現在、そして未来.NET の過去、現在、そして未来
.NET の過去、現在、そして未来Akira Inoue
 
若手がコミュニティを盛り上げよう!
 若手がコミュニティを盛り上げよう!  若手がコミュニティを盛り上げよう!
若手がコミュニティを盛り上げよう! Yuta Matsumura
 
Database tools for .NET Core
Database tools for .NET CoreDatabase tools for .NET Core
Database tools for .NET CoreYuta Matsumura
 

Mais procurados (20)

いつでもどこでも .NET
いつでもどこでも .NETいつでもどこでも .NET
いつでもどこでも .NET
 
Microsoft learnご紹介vol2
Microsoft learnご紹介vol2Microsoft learnご紹介vol2
Microsoft learnご紹介vol2
 
オンライン中心だから地方のコミュニティも見てみませんか? - Fukuoka.NETの紹介
オンライン中心だから地方のコミュニティも見てみませんか? - Fukuoka.NETの紹介オンライン中心だから地方のコミュニティも見てみませんか? - Fukuoka.NETの紹介
オンライン中心だから地方のコミュニティも見てみませんか? - Fukuoka.NETの紹介
 
これから始める Bot Builder 開発のコツと舞台裏
これから始める Bot Builder 開発のコツと舞台裏これから始める Bot Builder 開発のコツと舞台裏
これから始める Bot Builder 開発のコツと舞台裏
 
The Twelve-Factor (A|M)pp with C#
The Twelve-Factor (A|M)pp with C#The Twelve-Factor (A|M)pp with C#
The Twelve-Factor (A|M)pp with C#
 
Xamarinでも有能な .NET Core
 Xamarinでも有能な .NET Core  Xamarinでも有能な .NET Core
Xamarinでも有能な .NET Core
 
ASP.NET CoreとAzure AD B2Cを使ったサクっと認証
ASP.NET CoreとAzure AD B2Cを使ったサクっと認証ASP.NET CoreとAzure AD B2Cを使ったサクっと認証
ASP.NET CoreとAzure AD B2Cを使ったサクっと認証
 
SendGrid SDKを捨てた話
SendGrid SDKを捨てた話SendGrid SDKを捨てた話
SendGrid SDKを捨てた話
 
そろそろレガシーな.Net開発をやめなイカ?
そろそろレガシーな.Net開発をやめなイカ?そろそろレガシーな.Net開発をやめなイカ?
そろそろレガシーな.Net開発をやめなイカ?
 
.NET Core時代のCI/CD
.NET Core時代のCI/CD.NET Core時代のCI/CD
.NET Core時代のCI/CD
 
.NET の今と今後に思うこと
.NET の今と今後に思うこと.NET の今と今後に思うこと
.NET の今と今後に思うこと
 
.NET Coreのいろは
.NET Coreのいろは.NET Coreのいろは
.NET Coreのいろは
 
Windowsサービスも.NET Coreで作ろう
Windowsサービスも.NET Coreで作ろうWindowsサービスも.NET Coreで作ろう
Windowsサービスも.NET Coreで作ろう
 
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要.NET 6 と Blazor で作るクロスプラットフォームアプリ概要
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要
 
.NET 5 and Windows app dev
.NET 5 and Windows app dev.NET 5 and Windows app dev
.NET 5 and Windows app dev
 
クラウドやOSSで“デザイン”するモダンなシステムアーキテクチャ
クラウドやOSSで“デザイン”するモダンなシステムアーキテクチャクラウドやOSSで“デザイン”するモダンなシステムアーキテクチャ
クラウドやOSSで“デザイン”するモダンなシステムアーキテクチャ
 
30min Serverless xTuber
30min Serverless xTuber30min Serverless xTuber
30min Serverless xTuber
 
.NET の過去、現在、そして未来
.NET の過去、現在、そして未来.NET の過去、現在、そして未来
.NET の過去、現在、そして未来
 
若手がコミュニティを盛り上げよう!
 若手がコミュニティを盛り上げよう!  若手がコミュニティを盛り上げよう!
若手がコミュニティを盛り上げよう!
 
Database tools for .NET Core
Database tools for .NET CoreDatabase tools for .NET Core
Database tools for .NET Core
 

Semelhante a .NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築

Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Shotaro Suzuki
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Shotaro Suzuki
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Shotaro Suzuki
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Shotaro Suzuki
 
New Features of DotNet 6 Blazor WASM
New Features of DotNet 6 Blazor WASMNew Features of DotNet 6 Blazor WASM
New Features of DotNet 6 Blazor WASMShotaro Suzuki
 
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発Yuta Matsumura
 
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発Akira Inoue
 
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた日本マイクロソフト株式会社
 
マイクロソフトWeb開発の今と今後
マイクロソフトWeb開発の今と今後マイクロソフトWeb開発の今と今後
マイクロソフトWeb開発の今と今後Akira Inoue
 
2021/03/19 パブリッククラウドを活かす運用プロセス自動化
2021/03/19 パブリッククラウドを活かす運用プロセス自動化2021/03/19 パブリッククラウドを活かす運用プロセス自動化
2021/03/19 パブリッククラウドを活かす運用プロセス自動化Issei Hiraoka
 
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ 【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ 日本マイクロソフト株式会社
 
実践 Web App for Containers! ~コンテナ開発の基礎からDevOps環境の構築まで~
実践 Web App for Containers! ~コンテナ開発の基礎からDevOps環境の構築まで~実践 Web App for Containers! ~コンテナ開発の基礎からDevOps環境の構築まで~
実践 Web App for Containers! ~コンテナ開発の基礎からDevOps環境の構築まで~Saki Homma
 
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介david9142
 
ASP.NETの進化とASP.NET Core Blazorの凄さ
ASP.NETの進化とASP.NET Core Blazorの凄さASP.NETの進化とASP.NET Core Blazorの凄さ
ASP.NETの進化とASP.NET Core Blazorの凄さSho Okada
 
はじめてのAzure Web App for Containers! -コンテナの基礎から DevOps 環境の構築まで-
はじめてのAzure Web App for Containers! -コンテナの基礎から DevOps 環境の構築まで-はじめてのAzure Web App for Containers! -コンテナの基礎から DevOps 環境の構築まで-
はじめてのAzure Web App for Containers! -コンテナの基礎から DevOps 環境の構築まで-Saki Homma
 
ASP.NET vNext / Visual Studio "14" に見る .NET の未来像
ASP.NET vNext / Visual Studio "14" に見る .NET の未来像ASP.NET vNext / Visual Studio "14" に見る .NET の未来像
ASP.NET vNext / Visual Studio "14" に見る .NET の未来像Akira Inoue
 
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...Shotaro Suzuki
 
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発Daizen Ikehara
 

Semelhante a .NET Core 3.0 で Blazor を使用した​フルスタック C# Web アプリ​の構築 (20)

Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
 
New Features of DotNet 6 Blazor WASM
New Features of DotNet 6 Blazor WASMNew Features of DotNet 6 Blazor WASM
New Features of DotNet 6 Blazor WASM
 
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
 
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
 
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた
 
マイクロソフトWeb開発の今と今後
マイクロソフトWeb開発の今と今後マイクロソフトWeb開発の今と今後
マイクロソフトWeb開発の今と今後
 
2021/03/19 パブリッククラウドを活かす運用プロセス自動化
2021/03/19 パブリッククラウドを活かす運用プロセス自動化2021/03/19 パブリッククラウドを活かす運用プロセス自動化
2021/03/19 パブリッククラウドを活かす運用プロセス自動化
 
Mvc conf session_5_isami
Mvc conf session_5_isamiMvc conf session_5_isami
Mvc conf session_5_isami
 
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ 【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
 
実践 Web App for Containers! ~コンテナ開発の基礎からDevOps環境の構築まで~
実践 Web App for Containers! ~コンテナ開発の基礎からDevOps環境の構築まで~実践 Web App for Containers! ~コンテナ開発の基礎からDevOps環境の構築まで~
実践 Web App for Containers! ~コンテナ開発の基礎からDevOps環境の構築まで~
 
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
 
【BS2】.NET 6 最新アップデート
【BS2】.NET 6 最新アップデート【BS2】.NET 6 最新アップデート
【BS2】.NET 6 最新アップデート
 
ASP.NETの進化とASP.NET Core Blazorの凄さ
ASP.NETの進化とASP.NET Core Blazorの凄さASP.NETの進化とASP.NET Core Blazorの凄さ
ASP.NETの進化とASP.NET Core Blazorの凄さ
 
はじめてのAzure Web App for Containers! -コンテナの基礎から DevOps 環境の構築まで-
はじめてのAzure Web App for Containers! -コンテナの基礎から DevOps 環境の構築まで-はじめてのAzure Web App for Containers! -コンテナの基礎から DevOps 環境の構築まで-
はじめてのAzure Web App for Containers! -コンテナの基礎から DevOps 環境の構築まで-
 
ASP.NET vNext / Visual Studio "14" に見る .NET の未来像
ASP.NET vNext / Visual Studio "14" に見る .NET の未来像ASP.NET vNext / Visual Studio "14" に見る .NET の未来像
ASP.NET vNext / Visual Studio "14" に見る .NET の未来像
 
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...
 
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
 

Mais de Joni

ASP.NET Core の ​ パフォーマンスを支える ​ I/O Pipeline と Channel
ASP.NET Core の ​ パフォーマンスを支える ​ I/O Pipeline と ChannelASP.NET Core の ​ パフォーマンスを支える ​ I/O Pipeline と Channel
ASP.NET Core の ​ パフォーマンスを支える ​ I/O Pipeline と ChannelJoni
 
Fiddler 使ってますか?
Fiddler 使ってますか?Fiddler 使ってますか?
Fiddler 使ってますか?Joni
 
Fukuoka.NET Conf 2018: 挑み続ける!Dockerコンテナによる ASP.NET Core アプリケーション開発事例
Fukuoka.NET Conf 2018: 挑み続ける!Dockerコンテナによる ASP.NET Core アプリケーション開発事例Fukuoka.NET Conf 2018: 挑み続ける!Dockerコンテナによる ASP.NET Core アプリケーション開発事例
Fukuoka.NET Conf 2018: 挑み続ける!Dockerコンテナによる ASP.NET Core アプリケーション開発事例Joni
 
ASP.NET パフォーマンス改善
ASP.NET パフォーマンス改善ASP.NET パフォーマンス改善
ASP.NET パフォーマンス改善Joni
 
Introduction to .NET
Introduction to .NETIntroduction to .NET
Introduction to .NETJoni
 
Tips and Tricks of Developing .NET Application
Tips and Tricks of Developing .NET ApplicationTips and Tricks of Developing .NET Application
Tips and Tricks of Developing .NET ApplicationJoni
 
Introduction to Html
Introduction to HtmlIntroduction to Html
Introduction to HtmlJoni
 
Asp #1
Asp #1Asp #1
Asp #1Joni
 
Introduction to ASP.NET
Introduction to ASP.NETIntroduction to ASP.NET
Introduction to ASP.NETJoni
 
Asp #2
Asp #2Asp #2
Asp #2Joni
 
ASP.NET MVCはNullReferenceExceptionを潰している件
ASP.NET MVCはNullReferenceExceptionを潰している件ASP.NET MVCはNullReferenceExceptionを潰している件
ASP.NET MVCはNullReferenceExceptionを潰している件Joni
 

Mais de Joni (12)

ASP.NET Core の ​ パフォーマンスを支える ​ I/O Pipeline と Channel
ASP.NET Core の ​ パフォーマンスを支える ​ I/O Pipeline と ChannelASP.NET Core の ​ パフォーマンスを支える ​ I/O Pipeline と Channel
ASP.NET Core の ​ パフォーマンスを支える ​ I/O Pipeline と Channel
 
Fiddler 使ってますか?
Fiddler 使ってますか?Fiddler 使ってますか?
Fiddler 使ってますか?
 
Fukuoka.NET Conf 2018: 挑み続ける!Dockerコンテナによる ASP.NET Core アプリケーション開発事例
Fukuoka.NET Conf 2018: 挑み続ける!Dockerコンテナによる ASP.NET Core アプリケーション開発事例Fukuoka.NET Conf 2018: 挑み続ける!Dockerコンテナによる ASP.NET Core アプリケーション開発事例
Fukuoka.NET Conf 2018: 挑み続ける!Dockerコンテナによる ASP.NET Core アプリケーション開発事例
 
ASP.NET パフォーマンス改善
ASP.NET パフォーマンス改善ASP.NET パフォーマンス改善
ASP.NET パフォーマンス改善
 
Introduction to .NET
Introduction to .NETIntroduction to .NET
Introduction to .NET
 
Tips and Tricks of Developing .NET Application
Tips and Tricks of Developing .NET ApplicationTips and Tricks of Developing .NET Application
Tips and Tricks of Developing .NET Application
 
Introduction to Html
Introduction to HtmlIntroduction to Html
Introduction to Html
 
C#
C#C#
C#
 
Asp #1
Asp #1Asp #1
Asp #1
 
Introduction to ASP.NET
Introduction to ASP.NETIntroduction to ASP.NET
Introduction to ASP.NET
 
Asp #2
Asp #2Asp #2
Asp #2
 
ASP.NET MVCはNullReferenceExceptionを潰している件
ASP.NET MVCはNullReferenceExceptionを潰している件ASP.NET MVCはNullReferenceExceptionを潰している件
ASP.NET MVCはNullReferenceExceptionを潰している件
 

.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#
  • 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
  • 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!