Stackblitzは先頃、WebContainersと呼ばれる新しいプロダクトをリリースした。これにより、開発者はブラウザ内にフルスタックのNode.js環境を作成できる。この環境は瞬時にロードされ、VS Code、フルターミナル、NPMなどがバンドルされている。
ブラウザ内でカスタムコードを記述して実行することは、新しい機能ではない。実際、ベンダーはこのようなソリューションを何年にもわたって提供してきた。これらの機能を提供するために、ベンダーは、コードをブラウザにストリーミングする前に実行するリモート開発環境に依存していた。
これらのソリューションにより、開発者はブラウザでサポートされていない機能にアクセスして言語を実行できたが、いくつかの欠点もあった:
- 新しいリモートコンテナの起動には、かなりの時間がかかる場合がある。
- リモートマシンでコードを実行するにはコストがかかる。
- このソリューションには安定したインターネット接続が必要であり、本質的にオフライン作業をサポートしていない。
- コードをリモートサーバに送信するため、セキュリティ上の懸念が生じる。
前述の欠点に対処するために、StackblitzはNext.jsおよびGoogleのチームと協力して、ブラウザ内にNode.js開発環境を生成するプログレッシブWebアプリケーションであるWebContainersを作成した。
これを実現するために、Stackblitzは、WebAssembly、WASI (またはWebAssembly System Interface)、およびWeb APIの最新機能を使用して、ブラウザ内でNode.jsを実行できるコンテナを作成する。次に、サービスワーカはNode.jsサーバにマップされ、HTTPリクエストを処理する。
この結果、オフラインで実行でき、驚くほど高速で (Stackblitzによるとビルドは最大20％速く、パッケージのインストールは yarn/npm より5倍以上速く)、ブラウザサンドボックスの背後で実行するためコードの実行にセキュアな環境を提供できるWebアプリケーションが得られる。
WebContainersはまだベータ版であり、現在Chromiumベースのブラウザでのみ実行されることを覚えておくことが重要だ。この制限は主にFile System Access APIなどの最近の/非標準のWeb APIに依存していることが原因であると思われ、公式のGithubページによると将来のリリースで対処する必要があるとのことだ。
Stackblitzは、WebContainersの現在の機能に加えて、プライベートNPMレジストリ、SQLite、およびESモジュールのサポートを含むいくつかの重要な拡張機能を追加することを約束している。さらに将来的には、RubyやPythonなどの追加言語をサポートすることも可能かもしれない。
コアWebContainersプロジェクトはオープンソースではないが、開発者は公式のGithubリポジトリを介して追加のフレームワークにサポートを追加し、公式のDiscordチャネルを介して会話に参加することをお勧めする。