🐥note.

小鳥とMicrosoft <3 なエンジニアの技術Blog📚

Blazorの未来

本エントリはBlazor Advent Calender 2019の25日目の記事です。

Blazorのことをつい最近知った方々を対象に、「Blazorは今後どのような方向へ進化していくのか」という点を簡単にまとめてみました。
※12/22(日)の時点でAdvent Calenderの開いてる記事が残り2つになっていたので、誰も書かなかったら投稿しようかな、と用意しておいた小ネタです。

目次

BlazorがWebからNativeアプリまで全てをカバーする未来

2019年の.NET Confで"The Future of Blazor on the Client"というタイトルでBlazorの未来に関する発表がなされました。以下がその発表の動画です。

www.youtube.com

そして以下の画像は上記発表のスライドの一枚です。

f:id:piyo_esq:20190928101144p:plain
Blazorの未来を表す一枚

それぞれ見ていきます。

Blazor Server

Web app
Every interaction handled on server Prerendered HTML(optional)

.NET Core 3.0で正式リリースされたServer side Blazorです。
詳細は割愛します。

Blazor WebAssembly

Web app with client-side execution Loaded from web server
Can work offline via Service Worker

.NET Core 3.1 LTSでPreview状態のClient side Blazorです。
※Blazor WebAssemblyという呼び方が正しいそうです。
詳細は割愛します。

Blazor PWA - OS Installed

Apears as native app(own window)
Works offline or online

PWA(Progressive Web Apps)対応したBlazorをOSにインストールする、というケースです。

BlazorのPWA化は現時点でも可能ですが、Service Workerの作成などはちょっと手間ですよね。来年リリース予定の.NET 5ではもっと楽にPWA対応できるよう、BlazorのPWA対応をサポートする機能(詳細は不明)のPreviewを追加するとのことです。

Blazor Hybrid

Native .NET renders to Electron / WebView Appears as native app(own window)
Works offline or online

Electronやネイティブアプリ上のWebViewでBlazorで作ったWebサービスを表示することで、あたかもネイティブアプリっぽく動かすケースです。

現段階ではElectron.NETWebWindowといったライブラリを使用することでWindows/Mac/LinuxのプラットフォームをサポートしたDesktop Applicationの作成が可能です。iOS/Androidなどの場合はネイティブアプリにWebViewをポン置きしてサーバ上にホストしたBlazorへアクセスする形でしょうか?

先に挙げたWebWindowはBlazorの産みの親であるSteve Sanderson氏が作成した実験的なライブラリで、Blazor界(?)ではちょっと話題になりました。
※参考 : Reddit - Meet WebWindow, a cross-platform webview library for .NET Core

WebWindowの凄いところは、メモリ使用量, バイナリサイズ共に軽量 かつ クロスプラットフォーム対応している点です。中身はC++で作成されているようで、ElectonのようにNode.jsやChromiumも不要です。Electronはメモリ使用量が多いためメモリ搭載量が少ないPCでは非常に悲しい思いをするのですが、WebWindowはメモリ使用量が90MB程度で済むためElectronに比べるとかなり軽量です。
※ただしWebWindowは実験的位置づけのライブラリなので、Product Readyではない点にご注意を。

WebWindowの詳細は氏のBlogをご参照ください。。

blog.stevensanderson.com

Blazor Native

Same programming model, but redering non-HTML UI

BlazorのRendering Layerを別Rendererに置き換えるというケースです。
※元々Blazorは初期設計段階からUI Rendering Layerを置き換え可能なFrameworkとして設計されているそうです。

NDC OsloでSteve Sanderson氏がBlazorのRendering LayerをFlutterに置き換えたアプリのデモを行っています。
※Flutter + Blazor で Blutterだそうです

www.youtube.com

NDC SydneyでもiOS/Android上でRendering Layerを入れ替え、Native UIがRenderingされている謎のBlazorアプリのデモを行っています。

www.youtube.com

残念ながらBlazor NativeはMicrosoft調査中という位置づけに置いており、実際に本機能がリリースされるかどうかは未定です。

Blazor Roadmap

BlazorのRoadMapのまとめです。

f:id:piyo_esq:20190928101505p:plain
Blazor Roadmap
(引用元: The Future of Blazor on the Client)

もっと中身のあること教えてよ

2020年1月14日に予定されている.NET ConfのAgendaが先日公開されてました。

focus.dotnetconf.net

AgendaによるとSteve Sanderson氏がBlazor Futures (WebAssembly, PWAs, Hybrid, Native)という内容でセッションするようです。
恐らくこちらのセッションを見ることで幸せになれるのではないでしょうか。。

おわり

BlazorはASP.NET WebFormsの後継という位置づけでリリースされたものの、Webの世界に限定されたFrameworkではなく、Desktop ApplicationやMobile ApplicationのFrameworkとしても利用できる未来が垣間見れました。まだ.NET Core 3.1 LTSがリリースされたばかりですが、来年の.NET 5とBlazorの成熟が楽しみですね。

それでは皆様よい年末をお過ごしください🎍✨ 以上です。