Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは

May 29~30, 2019 に開催された "de:code 2019" の Day1 EXPOシアターセッションで、Blazor について発表した際のスライド資料です。CC BY License、又は The Unlicense のデュアルライセンスで再利用可能です。

アニメーション付 PowerPoint 原ファイルは以下の URL から入手可能です。
https://1drv.ms/p/s!Ahj5X4eD4NFdgvpnYa4h1jR5JnFlmg

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは

  1. 1. de:code 2019 MW81 がんばらなくても C# で Single Page Web アプリ ケーションが書けてしまう「 Blazor」とは Microsoft MVP for Visual Studio and Development Technologies 坂本 純一 (@jsakamoto)
  2. 2. Blazor の概要とその仕組み
  3. 3. Client-side Server-side
  4. 4. Client-side
  5. 5. Blazor とは? SPA フレー ムワーク 実行環境 開発環境 (SDK)
  6. 6. JavaScript への変換ではない。 .NET のバイナリが動く。
  7. 7. 仕組み ※このような動作原理なので、既存の NuGet パッケージライブラリもそのまま使えたりする。
  8. 8. あくまでも HTML 標準
  9. 9. あくまでも HTML 標準
  10. 10. Demo
  11. 11. Demo
  12. 12. C# で SPA が書けることの 何が嬉しいのか
  13. 13. • .NET Core SDK Visual Studio 2019 + Blazor 拡張 Visual Studio Code + C#拡張 開発環境の構築が容易 ※1 … 2019年5月現在、v.3.0.0 Preview 5 ※2 … JetBrains Rider など他のエディタ/IDE は未評価 ※3 … 2019年5月現在、Preview 版 推奨
  14. 14. だけ 簡潔なプロジェクト構造
  15. 15. 容易な開発環境構築 + 簡潔なプロジェクト構造 | | がんばらなくても SPA が 書けてしまう。
  16. 16. 既に C# で開発している場合は さらなる特典
  17. 17. ビルドシステム (MSBuild) LINQ 属性 リフレクション IntelliSense、CodeLens etc… パッケージシステム (NuGet) 単体テスト (xUnit とか) いつもの C# 開発で SPA 開発できる
  18. 18. サーバー側も .NET なら型情報が共有できる Person.dll Server Client (Blazor)
  19. 19. サーバー側も .NET なら型情報が共有できる Person.dll Server Client (Blazor)
  20. 20. サーバー側も .NET なら型情報が共有できる Person.dll var person = new Person { Name = "Taro"; }; return person; Server Client (Blazor)
  21. 21. サーバー側も .NET なら型情報が共有できる Person.dll var person = new Person { Name = "Taro"; }; return person; Server Client (Blazor) {"name":"Taro"}
  22. 22. サーバー側も .NET なら型情報が共有できる Person.dll var person = new Person { Name = "Taro"; }; return person; var person = await Http.GetJsonAsync<Person>(URL); person.Greeting(); ⇒ "Hello, I’m Taro" Server Client (Blazor) {"name":"Taro"}
  23. 23. サーバー側も .NET なら型情報が共有できる Person.dll var person = new Person { Name = "Taro"; }; return person; var person = await Http.GetJsonAsync<Person>(url); person.Greeting(); ⇒ "Hello, I’m Taro" Server Client (Blazor) {"name":"Taro"}
  24. 24. 属性による制約記述 • モデルクラスのプロパティに、属性で制約を記述することで…
  25. 25. 属性による制約記述
  26. 26. 属性による制約記述 [New!] - ブラウザ側検証も有効に
  27. 27. C# で SPA が書けることの 何が嬉しいのか
  28. 28. C# で SPA が書けることで、 開発生産性の向上 を期待できる
  29. 29. Sever-side そして Server-side Blazor
  30. 30. 仕組み
  31. 31. 仕組み
  32. 32. 仕組み
  33. 33. 仕組み
  34. 34. 仕組み
  35. 35. 仕組み
  36. 36. 仕組み
  37. 37. 仕組み
  38. 38. 仕組み Internet
  39. 39. Server-side Blazor の利点 ロード時間が短い • mono.wasm や DLL を読み込ま ないため 検索エンジン対応 • 初回HTTP要求時、レンダリング済 みコンテンツが返る 成熟・安定したランタイム • デバッグも容易 処理性能が速い • mono.wasm はインタープリタ Server-side Blazor
  40. 40. Server-side ならではの さらなる面白さ
  41. 41. サーバー側とクライアント側を、 Web API で結ばなくてよい。
  42. 42. サーバー側データベースのクエリ結果を、 そのまま HTML にバインド (!) 古典的なサーバー側 Webアプリ実装みたい なのに、これで SPA として動く!
  43. 43. ますます、がんばらなくても 済んでしまう。
  44. 44. • 常時接続が必要 Server-side Blazor の弱点
  45. 45. リリース時期
  46. 46. 2019年9月 Server-side Blazor https://devblogs.microsoft.com/dotnet/introducing-net-5/
  47. 47. 2020年の第一四半期の可能性? Client-side Blazor https://twitter.com/lupusa1/status/1126185956002938880
  48. 48. 学習リソース Blazor 公式サイト • https://blazor.net Blazor アプリケーションプログラミング自習書 (日本語) • https://j.mp/selflearn-blazor-jp
  49. 49. まとめ
  50. 50. Blazor を選択することで… 簡潔なプロジェクト構造 強力な開発支援 開発の本質に集中、 リリースを迅速化 ユーザーと開発者 の幸せへ…
  51. 51. Blazor も又、銀の弾丸ではない。 しかし Blazor を選択することが 適している人たちも又、存在する。
  52. 52. あなたも その一人かもしれませんね?
  53. 53. がんばらなくても SPA が書けてしまう Blazor。
  54. 54. あなたも はじめてみませんか?
  55. 55. © 2018 Microsoft Corporation. All rights reserved. 本情報の内容(添付文書、リンク先などを含む)は、作成日時点でのものであり、予告なく変更される場合があります。 © 2019 Jun-ichi Sakamoto All rights reserved. 本情報の内容 (添付文書、リンク先などを含む) は、de:code 2019 開催日 (2019年5月29~30日) 時点のものであり、予告なく変更される場合があります。 本コンテンツの著作権、および本コンテンツ中に出てくる商標権、団体名、ロゴ、製品、サービスなどはそれぞれ、各権利保有者に帰属します。 Lean, Practice, Share.

×