Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Interoperability of webassembly with javascript
Similaire à Interoperability of webassembly with javascript (20)
Plus de Takao Tetsuro
Plus de Takao Tetsuro (20)
Interoperability of webassembly with javascript
- 2. Profile システム構築のプロセス評価、改善、策定、開発フレームワー クの設計、実装管理、プリセールスやプロジェクトの立ち上げな ど ブログ : http://blog.processtune.com プロフィール : Facebook, Twitter or MVP コミュニティ : .NETラボの運営スタッフ Microsoft MVP : July 2010 ～ Jun 2022 Current expertise : MVP for Developer Technologies
- 3. コード解説 03 ストリームでのSVG受け取り、 SVG色付操作 Contents Static Web App インターオペラビリティ 01 02 04 Static Web Appの仕組み マイクロサービスと Static Web App Blazor WebAssemblyとJavaScriptの 相互接続のまとめ アーキテクチャの検討
- 4. Static Web Appの仕組み Static Web App 01
- 5. Platform デ ー タ ・ プ レ ー ン ドメイン コンテンツ配信の仕組み アプリケーション層 Webサーバー CDN RMI/gRPC ユーザー XML-RPC <XML /> RPC 外部サービス 開発者 ブルー/グリーン・テスト インクリメンタル・デプロイ サービス サービス サービス サービス コントロール プレーン Contents Contents Contents XML Web Directory HTML Video Audio eBook HTML CSS JavaScript images State 管理 Function Data storage State 管理 機能群 Data storage
- 6. Platform コンテンツ配信の種類 Platform デ ー タ ・ プ レ ー ン アプリケーション層 Webサーバー CDN RMI/gRPC XML-RPC <XML /> RPC サービス サービス サービス サービス コントロール プレーン Contents Contents Contents XML Web Directory HTML Video Audio eBook HTML CSS JavaScript images Web App HTMLクライアント XMLクライアント メディアクライアント Native App HTMLクライアント XMLクライアント メディアクライアント RPCクライアント Mobile App HTMLクライアント XMLクライアント メディアクライアント RPCクライアント HTML XML Image Video eBook Web Directory (Wget, rsync, FTP etc.) II Static Webで配信可能 AWS CloudFront* Azure CDN + Azure Front Door Service II 動的サイト アクセラレーション Akamai CDN Fastly KeyCDN Cloudflare CDN (Cloudflare Railgun) ※TCPコネクションのマルチプレキシング、TCPコネクションのペリス タシー／プーリング、およびTCPウィンドウサイズの最適化です CDN HTML Images CSS JavaScript Angular React Blazor Vue
- 7. コンテンツ配信の通信 Platform アプリケーション層 サービス サービス サービス サービス HTML Images CSS JavaScript Angular React Blazor Vue CDN Webサーバー Http Request Http Response Http Request Http Response Http Request Http Response Blazor Server State 管理 Http Request Http Response
- 10. Authorization サンプルアプリのアーキテクチャ Request Response ログインユーザーの アイコンURL 色付けした内容 他ユーザーのアイコンURL 他ユーザーのアイコン色 ユーザー情報サービス ユーザー Identities Request Response State 管理サービス SVGs Free icon site ブルー/グリーン・テスト インクリメンタル・デプロイ login Login 状態 Login 状態 Login 要求 Login 状態 Login 要求 State Users Login 要求 他のユーザーが使って いるアイコンと色 自分の アイコン フリーアイコンサイト のアイコン一覧 色 選択 Request Response OK 未Login
- 11. サンプルアプリのデバッグ
- 12. Blazor WebAssemblyの作成 ← dotnet new --list ↓ dotnet new blazorwasm -h
- 13. Extentionの追加
- 14. Graph SDKの追加
- 16. フォルダを開く
- 18. 最初のダウンロード
- 19. 起動の設定
- 20. 実行
- 21. 終了の確認
- 22. Sign inリンクだけ設定しておく www/index.html MainLayout.razor NavMenu.razor Program.cs WebAssembly (.NETランタイム他) + blazor.webassembly.js JavaScript function SetSignInText (){…} SignIn | About Index.razor or Counter.razor or FetchData.razor MainLayout.razor App.razor _Imports.razor
- 23. Sign inリンクだけ設定しておく www/index.html MainLayout.razor NavMenu.razor Program.cs WebAssembly (.NETランタイム他) + blazor.webassembly.js JavaScript function SignIn(){…} SignIn | About Index.razor or Counter.razor or FetchData.razor MainLayout.razor App.razor _Imports.razor
- 24. Sign inリンクだけ設定しておく www/index.html MainLayout.razor NavMenu.razor Program.cs WebAssembly (.NETランタイム他) + blazor.webassembly.js SignIn | About Index.razor or Counter.razor or FetchData.razor App.razor _Imports.razor JavaScript function SetSignInText (){…} MainLayout.razor
- 37. コード解説 03 ストリームでのSVG受け取り、 SVG色付操作 Contents Static Web App インターオペラビリティ 01 02 04 Static Web Appの仕組み マイクロサービスと Static Web App Blazor WebAssemblyとJavaScriptの 相互接続 アーキテクチャの検討
- 38. コード解説 03 ストリームでのSVG受け取り、 SVG色付操作 Contents Static Web App インターオペラビリティ 01 02 04 Static Web Appの仕組み マイクロサービスと Static Web App Blazor WebAssemblyとJavaScriptの 相互接続 アーキテクチャの検討
- 39. コード解説 03 ストリームでのSVG受け取り、 SVG色付操作 Contents Static Web App インターオペラビリティ 01 02 04 Static Web Appの仕組み マイクロサービスと Static Web App Blazor WebAssemblyとJavaScriptの 相互接続 アーキテクチャの検討
- 40. slidesgo : 本プレゼンテーションのテンプレートWebサイト（本プレゼンテーションのURL） https://slidesgo.com/ (https://slidesgo.com/theme/darkle-slideshow#search-Darkle+Slideshow&position-0&results-1) Cloud Native Computing Foundation (CNCF) : https://www.cncf.io/ Introducing gRPC, a new open source HTTP/2 RPC Framework : https://developers.googleblog.com/2015/02/introducing-grpc-new-open-source-http2.html Announcing HTTP/2 support in Azure App Service : https://azure.microsoft.com/ja-jp/blog/announcing-http-2-support-in-azure-app-service/ WHATWG : https://whatwg.org/ Azure 上のコンテンツ配信ネットワークとは : https://docs.microsoft.com/ja-jp/azure/cdn/cdn-overview Azure CDN 製品の機能比較 : https://docs.microsoft.com/ja-jp/azure/cdn/cdn-features Railgun™配信元ネットワークオプティマイザー : https://www.cloudflare.com/ja-jp/website-optimization/railgun/ WebSocket : https://docs.microsoft.com/ja-jp/windows/uwp/networking/websockets Azure Web PubSub : https://azure.microsoft.com/en-us/services/web-pubsub/ Reference Links 1
- 41. Azure SignalR サービスとは : https://docs.microsoft.com/ja-jp/azure/azure-signalr/signalr-overview Amazon CloudFront gets whole site delivery and acceleration : https://blogs.gartner.com/lydia_leong/2012/05/14/amazon-cloudfront-gets-whole-site-delivery-and-acceleration/ Axios : https://axios-http.com/ Axios : GitHub https://github.com/axios/axios ASP.NET Core Blazor アプリで <head> コンテンツを制御する : https://docs.microsoft.com/ja-jp/aspnet/core/blazor/components/control-head-content?view=aspnetcore-6.0 認証コード フローを使用して、ユーザーをサインインさせ、 JavaScript シングルページ アプリ (SPA) から Microsoft Graph API を呼び出す : https://docs.microsoft.com/ja-jp/azure/active-directory/develop/tutorial-v2-javascript-auth-code Blazor WebAssembly アプリでユーザーのサインインを行い、保護された API を呼び出す : https://docs.microsoft.com/ja-jp/azure/active-directory/develop/tutorial-blazor-webassembly Use streaming in ASP.NET Core SignalR : https://docs.microsoft.com/en-us/aspnet/core/signalr/streaming?view=aspnetcore-5.0 Azure Web PubSub : GitHub https://github.com/Azure/azure-webpubsub gRPC services with ASP.NET Core : Visual Studio https://docs.microsoft.com/en-us/aspnet/core/grpc/aspnetcore?view=aspnetcore-5.0&tabs=visual-studio Reference Links 2
- 42. High-performance Services with gRPC: What's new in .NET 5 : https://channel9.msdn.com/events/dotnetConf/2020/High-performance-Services-with-gRPC-Whats-new-in-NET- 5?term=gRPC%20HTTP2&pubDate=year&lang-ja=true&lang-en=true gRPC Web with .NET : https://channel9.msdn.com/Shows/On-NET/gRPC-Web-with-NET?term=gRPC%20HTTP2&pubDate=year&lang- en=true&pageSize=15 .NET Core での gRPC のトラブルシューティング : https://docs.microsoft.com/ja-jp/aspnet/core/grpc/troubleshoot?view=aspnetcore-5.0 APACHE KAFKA : https://kafka.apache.org/ Quickstart: Create a serverless simple chat application with Azure Functions and Azure Web PubSub service : https://docs.microsoft.com/en-us/azure/azure-web-pubsub/quickstart-serverless?tabs=javascript NET での gRPC でサポートされているプラットフォーム : https://docs.microsoft.com/ja-jp/aspnet/core/grpc/supported-platforms?view=aspnetcore-5.0 Cloud Endpoints for gRPC : https://cloud.google.com/endpoints/docs/grpc/about- grpc#:~:text=gRPC%20is%20a%20high%20performance,create%20distributed%20applications%20and%20services. Using Docker in WSL 2 : https://code.visualstudio.com/blogs/2020/03/02/docker-in-wsl2 docker docs : https://docs.docker.com/ Reference Links 3
- 43. Microsoft.Extensions.Http : https://www.nuget.org/packages/Microsoft.Extensions.Http Microsoft.Graph : https://www.nuget.org/packages/Microsoft.Graph Microsoft Graph SDK をインストールする : https://docs.microsoft.com/ja-jp/graph/sdks/sdk-installation Microsoft.Graph : https://www.nuget.org/packages/Microsoft.Graph Microsoft.Graph.Auth : https://www.nuget.org/packages/Microsoft.Graph.Auth/1.0.0-preview.7 Microsoft.AspNetCore.Components.WebAssembly.Authentication : https://www.nuget.org/packages/Microsoft.AspNetCore.Components.WebAssembly.Authentication dotnet add package : https://docs.microsoft.com/ja-jp/dotnet/core/tools/dotnet-add-package スタンドアロン Blazor WebAssembly のデバッグ : https://docs.microsoft.com/ja-jp/aspnet/core/blazor/debug?tabs=visual-studio-code&view=aspnetcore-5.0#vscode Debugging : Visual Studio Code https://code.visualstudio.com/docs/editor/debugging User and Workspace Settings : Visual Studio Code https://code.visualstudio.com/docs/getstarted/settings Reference Links 4
- 44. Free Online Icon Generator for Apple and Favicon Icons : https://iconifier.net/index.php Blazor JavaScript の相互運用性 (JS 相互運用) : https://iconifier.net/index.php?iconified=20211021204722_BlazorIcon.png Reference Links 5
- 45. CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, infographics & images by Freepik Thank You Do you have any questions? tetsuro.takao@processtune.com blog.processtune.com https://mvp.microsoft.com/en-us/PublicProfile/4029060
Notes de l'éditeur
- モダンWebアプリケーションで、スタティックWebアプリは選択肢のひとつとして注目されています。Web APIやサーバーレス・ファンクションで小さな機能を作ってマイクロサービス化、マッシュアップするアーキテクチャは、インクリタルデプロイやブルーグリーンテストのようなCD/CIライフサイクルマネージメントに向いているからです。
- コンテンツを配信するというのは、乱暴な言い方をすれば問題解決領域から得られたコンテンツを何かしらのプラットフォームでユーザーに届けると言えると考えます。クラウドネイティブなソリューションでは、コンテンツ配信の仕掛けをどのように作るか？を計画する際に、コンテンツ配信を如何にコスト効率よく運用していくか？についても考慮する必要があります。 開発者からの目線で考えると、変更がつきもののクラウドネイティブソリューションでは、変更の際の範囲、影響、正常動作検証作業、リソース管理単位が最も小さいことが理想的です。 そのためドメインではマイクロサービス化した複数の機能の組み合わせでソリューションを構築し、適切なプラットフォームから配信する方法が選択肢のひとつになります。
- プラットフォームから配信するコンテンツがHTMLやXML、VideoやeBookなどのスタティックなコンテンツであれば、サービスサイドの動的なコンテンツ作成を必要とすることなくAzure CDNなどのContents Delivery Network（CDN）を利用することができます。また、CDNの中には動的サイトアクセラレーション（DSA）というサービスサイドレンダリングを行う機能（サービスサイドプログラムや外部Web APIを利用したサービスサイドマッシュアップによってコンテンツを動的に生成する方式）をサポートするCDNサービスプロバイダーがあります。AWS CloudFrontは、DSAの一部の機能TCP制御の最適化（スライド右上）を行っています。【クリック】DSAを利用しないCDNを使ってインタラクティブ操作を行うためにはエッジ側のHTMLクライアントから通信を開始する必要がありJavaScriptを使って動的にコンテンツを変化させていきます。
- CDNではスタティックなコンテンツが配信されます。つまり、通常のJavaScriptやJavaScriptフレームワークであるReact、Angular、Vueはサーバーサイドレンダリングモデルですので、最初のリクエストに対する最初のレスポンスでコンテンツは一度レンダリングされます。ステートの変更は再度リクエストを発行することになります。 Blazorの場合サーバーホスティングモデルがありSignalRでステートの変更はサービスサイドからプッシュされますが、CDNでスタティックなコンテンツを配信したい場合はBlazor WebAssemblyモデルを使用することになります。
- CDNでスタティックなコンテンツを配信する場合、ステートの変更を常に意識する必要があるためユーザーの操作、またはポーリングによってサービスを再リクエストします。この時の仕組みをもう少し掘り下げます。 React、Angular、VueなどのJavaScriptフレームワークはPromise based HTTPクライアントであるAxiosなどのフレームワークで再リクエスト部分の製造の省力化を図れます。Blazor WebAssemblyを採用する場合もAxiosを使えますが、.NETをエッジ側のブラウザで実行するので.NETアーキテクチャを利用するほうがさらに効率的にコンテンツ配信を構築できます。 そのような理由から、CDNによるスタティックなコンテンツ配信というシナリオの学習の入口としてBlazor WebAssemblyは親しみやすい技術ということです。 重要なことは、ユーザーインタラクティブな機能を作成する場合、サービス側との通信の発生を最小限に抑えながら最新のステートを得るようにします。そのため、エッジ側のJavaScriptとWebAssemblyの相互通信を計画しながら作業内容をエッジ側にオフロードする設計が必要になります。
- エッジ側にオフロードする設計のサンプルとして、ストリームでフリーのSVGを受け取り、エッジ側でユーザーが色付けして自分のアイコンを作るというものです。このアプリをスタティックWebアプリとして構築するのでこのような構成になります【スライドを説明】。
- サンプルアプリソリューションを稼働させるためにはBlazorのデバッグ機能が必要になります。Visual Studio Codeの機能拡張「Blazor WASM デバッグ拡張機能」をインストールします。
- プログラムはdotnetのテンプレートから作成します。Windowsターミナル（コマンドプロンプト）で「dotnet new list」でテンプレートの一覧が出ます。「dotnet new blazorwasm –h」でオプションの一覧が出ます。スタティックなWeb AppはBlazor WebAssemblyでホストはしないアプリとして作成するのでオプションを確認します。既定でfalseなのでそのまま「dotnet new blazorwasm」を実行できます。プロジェクトを作成するディレクトリを必要に応じて用意し、Windowsターミナルでカレントディレクトリにしてから実行してください。 ホストしても良いのですが、ASP.NETサーバーのStart.csを変更する記事がインターネットには多数配信されています。間違ってそれを適用すればASP.NETサーバーに依存することになり、Blazor WebAssemblyの可搬性は失われます。ASP.NETサーバーで稼働すること、他に移植しないことが分かっているものについてはホストしたBlazor WebAssemblyを作成しても問題ありません。
- Extentionも追加しておきます。このセッションでは必要ありませんが、重要な作業なのでいくつかの例をご紹介します。
- Graph SDKはBlazor WebAssembly用のMicrosoft Graph Authentication APIをサポートしたものが配信されています。
- 新たなGraph Authに対応するWebAssembly側パッケージも用意されています。
- カレントディレクトリには様々なファイルが作成されますので、Windowsエクスプローラーで確認してください。Visual Studio Codeでこのフォルダを開きます。
- 最初に開いたときに必要なファイルのダウンロードが自動的に開始します。
- 最初のダウンロードが終わったらデバッグの起動の設定を行います。「Properties-launchSettings.json」の「profiles-SVGIconColoring(プロジェクト名)-applicationUrl」のアドレスを「.vscode-launch.json」の「configurations-url」として設定しておきます。
- Run & Debugで実行を行います。ブラウザが起動して、しばらくアセンブリをダウンロードしてコンテンツが表示されます。この最初のレイテンシを覚えておいてください。
- スタックはサーバーとブラウザが起動しています。ブラウザを閉じるとサーバーのスタックだけ残ります。続けて実行パネルの赤い四角をクリックするとサーバーも終了します。
- 今回は認証の実装を行いませんが、Blazor WebAssemblyとJavaScriptの相互通信を簡単に説明するため、サインインのリンクとJavaScriptのプロンプト表示、入力された名前をサインインのリンクに表示するという一連の流れをコーディングします。コンテンツのページヘッダの部分の「About」の手前に「SignIn」というリンクを設定します。これは「Shared-MainLayout.razor」を編集します。
- HTML側はAboutの前にこの2行を追加します。AタグにセットされているBlazorの「@onclick」に「SignIn」を呼ぶように指定してありSignInではSetSignInTextというJavaScriptファンクションを呼ぶように指定しています。JavaScriptとのインターオペラビリティとしてBlazorではIJSRuntimeクラスが提供されており、JavaScriptを非同期で呼び出す際にその処理を待つInvokeAsync、処理を待たないInvokeVoidAsyncがあります。 初期状態では「SignIn」という赤い文字が表示されており、それをクリックするとJavaScriptが実行され、実行結果が表示されるというものです。
- DOMに書かれたBlazorのonclickイベントがBlazorのSignInタスクを呼び出し、JavaScriptのSetSignInTextファンクションを呼び出しました。JavaScriptは必ずindex.html（またはindex.htmlにインクルードしたJavaScriptに定義します）。
- ここではJavaScriptのpromptでユーザーが入力した名前を返すようにしています。入力されなかった場合はそのまま赤い文字「SignIn」を返します。
- 画面の流れ
- フリーSVGサイトのアイコンはユーザーの最初のサイトアクセスで表示するようにします。ユーザーがログインしているかしていないかに関わらず一覧は表示できますので、サービス側で呼び出します。
- サービス側でレンダリングするコンポーネント「Pages-Index.razor」で作成していきます。SVGsコレクションにIcon Fontsから取得したSVGを下部の「@code」で詰め込んでいますのでforeachでHTMLを書き出だしています。一覧の下部にユーザーが選択した画像が表示されるようになっています。その下に「message」としてプログラムのプロンプトを設置しています。アラートやワーニング、インフォを表示する場所です。
- SVGsコレクションの作成のコードの中身は、アイコンのURL、IMGタグのSRCアトリビュートの値、アイコンのSVG、アイコンのURLです。基本的にはURLで取得しますが、ユーザーが選択肢し、その後オリジナルのURLが無効になったりオフライン時の操作用として、ユーザーが色を変えたい時などに使います。MarkupString型を使っているのは、のちにHTMLコンテンツなどに出力するときにBlazor既定のサニタイズに影響を受けない取り扱い易い形で保持するためです。
- SVGsコレクションの作成のコードの中身は、HttpClientでSVGを取得してきます。今回はサンプルとしてID155117から10個取得してきます。今後の拡張として、非同期で順次10個ずつ取得するようなコードを書くことができます。読み込んだレスポンスはストリームなのでXmlDocumentのLoadXmlメソッドで読み込んでOuterXmlプロパティのシリアライズされた値をXMLタグのまま保持するようにMarkupString型に変換して格納しています。また、その際にURLを保持しています。
- 初期画面でアイコンの一覧が表示されます。
- 最後にアイコンが選択された時の動きを作成していきます。これはJavaScriptの機能になるのでindex.html側に定義します。のちにユーザーの選択状態を保存できるように「currentUser」オブジェクトを用意しておいて選択したアイコンのXML（SVG）と色、アイコンのURLとユーザーのIDを保持するようにします。選択されたアイコンのHTML DOMのIDにはアイコンのURLが設定してあります。 このアイコンはコピーして選択エリア（アイコンの色を編集する作業エリア）に貼り付けるので、DOMのIDを「selectedImage」に変更しています。画像が残っていたら削除して新たにコピーすることでユーザーのアイコンの変更で作業エリアのアイコンが変更されるようにします。そしてペンのアイコンを3本作って作業エリアの左に並べ右に選択されたアイコンを表示しています。
- ペンにはJavaScriptのsetColorファンクションが設定してあるので、ペンの選択でペンの色を取得し現在のユーザーのオブジェクトの色属性と選択されたアイコンの作業エリアのコピーの色の設定に使います。作業エリアのアイコンのsrc属性からSVGのXMLを取得しDOMParserでパースします。SVGのアイコンはgタグをいくつか持っています。アイコンのようにシンプルなXMLの場合固定のインデックス0番で問題ありません。そのノードを指定された色で塗っています。
- Static Web AppはCDNを利用したメンテナンス効率のの良いCD/CI環境を構築するためのひとつの選択肢であること、特にサービスメッシュパターンを採用しているのであればメッシュエンドポイントに集約したしたサイドカーやステートマネージメント機能と各マイクロサービスがきれいに分離できます。 特に現在はCDNが動的サイトアクセラレーションをサポートしており、またその手法もDSNのすべてを行っている企業からAWSのようにTCPのチューニングのみを行っているところまで多岐にわたります。
- アーキテクチャを検討する際はリクエストとレスポンスの関係を意識しながらステート管理を計画していくこと重要であり、どのフレームワークを採用するかかについては人員配置を考慮した調達を考慮すればよいのですが、それより重要なことはユーザーストーリーのどの部分をエッジ側に配置し、どの部分をサービスサイドに任せるかの計画が重要です。 また、CDNでの静的コンテンツ配信を目的にASP.NETサーバーから解放されるBlazor WebAssemblyにおいてはCORS制限に引っかかるGraph APIでのAuthについて、マイクロソフトが最新のSDKを提供し始めていることも重要なポイントでした。
- コード解説では、ソリューションのリソースのどの位置に何を配置するかが重要でした。ユーザーインタラクティブな部分をすべてJavaScriptに任せるのも良いのですが、エッジ側でシリアライズされるXMLなどの再オブジェクト化などを考慮すると.NETランタイムで行わせる方が楽だったりします。 ユーザーストーリーのトランザクション境界分離の側面とプログラム効率の配分、シリアライズ／デシリアライズのコスト配分が重要です。