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.

Blazor 触ってみた

1,076 views

Published on

プログラミング生放送勉強会 第53回@GMOインターネット(大阪)
https://atnd.org/events/99236

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Blazor 触ってみた

  1. 1. Blazor 触ってみた プログラミング生放送勉強会 第53回 @GMOインターネット (大阪) 2018/09/01 SQLWorld お だ
  2. 2. 今日のゴール Blazor についてふんいきわかるー Blazor ちょっとできる
  3. 3. Blazor ってなに?
  4. 4. Blazor って何? https://blazor.net/ Blazor is an experimental .NET web framework using C# and HTML that runs in the browser. ブラウザで動く C# と HTML を使った .NET の 「実験的な」 Web フレームワーク
  5. 5. ブラウザで動くって? Web アプリもブラウザで動いてない? ASP.NET (MVC) と何が違うん?
  6. 6. ブラウザで動くって? Web アプリもブラウザで動いてない? ASP.NET (MVC) と何が違うん? サーバー側で動作するコードを実装して、サー バー側で動かした結果をブラウザで表示している クライアント側(ブラウザ)で動作する コードを実装するのが Blazor!
  7. 7. Q: Is this Silverlight all over again? No, Blazor is a .NET web framework based on HTML and CSS that runs in the browser using open web standards. It requires no plugin and works on mobile devices and older brow https://github.com/aspnet/Blazor/wiki/FAQ
  8. 8. WASM(WebAssembly)で動く! WASM ベースの .NET ランタイムを使っ て「通常の .NET アセンブリ」を動か す! C# で書いたコードが WASM になるわけで は無い
  9. 9. https://blazor.net/
  10. 10. 開発環境
  11. 11. Setup .NET Core 2.1 SDK (2.1.300 or later) VS 2017 (15.7 or later) ASP.NET web development workload selected Blazor Language Services extension VS Marketplace から
  12. 12. 色々あるぞ Blazor
  13. 13. SPA Framework シングルページアプリケーション のため の機能が標準搭載 A component model for building composable UI Routing Layouts Forms and validation Dependency injection JavaScript interop Server-side rendering … https://github.com/aspnet/Blazor
  14. 14. Razor 構文 Blazor = Browser + Razor = Blazor! View は Razor で書く
  15. 15. 実際に見てみよう
  16. 16. 今日のお題 function authenticateUser(username, password) { var accounts = apiService.sql( "SELECT * FROM users" ); for (var i = 0; i < accounts.length; i++) { var account = accounts[i]; if (account.username === username && account.password === password) { return true; } } if ("true" === "true") { return false; } }
  17. 17. 今日のお題 <script> function authenticateUser(username, password) { var accounts = apiService.sql( "SELECT * FROM users" ); for (var i = 0; i < accounts.length; i++) { var account = accounts[i]; if (account.username === username && account.password === password) { return true; } } if ("true" === "true") { return false; } } $('#login').click(function() { var username = $("#username").val(); var password = $("#password").val(); var authenticated = authenticateUser(username, password); if (authenticated === true) { $.cookie('loggedin', 'yes', { expires : 1 }); } else if (authenticated === false) { $("error_message").show(); } }); </script>
  18. 18. 今日のお題 世界最悪のログイン処理コード? https://twitter.com/hassy_nz/status/1027 890455940198400 HTML + JavaScript だと?! クライアントから任意の SQL 投げれそう クライアントに users データ全部持ってく るのはアカン Cookie に簡単な値入れるだけで、認証済に なる …
  19. 19. Blazor で実装したら… .NET の dll になるので… 簡単にバレない!セーフ? Blazor でもアウトです。やらないように! 今回使ったいくつかの機能を紹介します
  20. 20. Component
  21. 21. Routing
  22. 22. Layout
  23. 23. Binding
  24. 24. DI
  25. 25. JavaScript interop
  26. 26. .NET アセンブリなら何でも動く? WASM:[System.PlatformNotSupported Exception] System.Data.SqlClient is not supported on this platform. SqlClient に限らず対応してないものも あって、それは実行時に PlatformNotSupportedException
  27. 27. まとめ まだ「実験的」なプロジェクト 全ての Web 開発者用というわけではない と思う クライアント側の技術なので、サーバー 側は C#(.NET) で無くてもよい そういうとこで採用するかは別として サーバー側とのコード共有 (Req/Res の型) は大きなメリット
  28. 28. ガンガン使って、 Feedback しよう!
  29. 29. 参考資料 Welcome to the Blazor https://blazor.net/ GitHub – aspnet/Blazor https://github.com/aspnet/Blazor Blazor アプリケーションプログラミング自習書 https://github.com/jsakamoto/self-learning-materials-for- blazor-jp

×