Web IDEの進化とそれを支える技術

2022-12-16 Eight LT 2022

1. Web IDE の進化とそれを支える技術 @pvcresin 2022-12-16 Eight LT 2022
2. 鳥山らいか / pvcresin 仕事：Eight のWeb フロントエンド周りのサポートや改善 好きなこと：散歩・お笑い・アニメ・断捨離 2
3. Web IDE とは ブラウザ上でコーディングを行うことができる統合開発環境 （IDE ）サービス ローカルでの環境構築が必要ないため、手軽に始められる ※ここではIDE だけでなくエディタも含める 3
4. 主な機能 コードエディタ ページのプレビュー（iframe ） 公開・Fork 共同編集（WebSocket API ） +α （外部ライブラリ読み込み、package 管理、デプロイなど） 4
5. 様々な Web IDE サービス 使ったことあるものだけ軽くピックアップ JSFiddle ：シンプルなエディタ CodePen ：少し高機能 CodeSandbox ：VS Code が動いてリッチ Cloud9 ：サーバサイドのコードがリモートで動く 5
6. キーとなる技術 6
7. Electron Web 技術でデスクトップアプリを作成するフレームワーク Chromium とNode.js をバイナリに組み込む VS Code 、Slack などなど フロントエンド技術によるネイティブライクなUI 達 Monaco Editor ：エディタ Xterm.js ：ターミナル 7
8. Web Workers API メインスレッドとは別の、バックグラウンドのスレッドでスクリプ トを実行する仕組み（マルチスレッド） アプリのUI の操作性や動作速度を向上 種類 Dedicated Worker ( 専用ワーカー) Shared Worker ( 共有ワーカー) Service Worker 8
9. Service Worker メインスレッドと外部の通信に割り込むことができる、ネットワー クプロキシ リクエストを加工したり、キャッシュを使用したりできる → 仮想ネットワーキング、オフライン対応 9
10. File System Access API ユーザのローカルのファイルをブラウザで直に読み書きできる 単にFile にを読み取れるだけのFile API とは別物 ユースケース File API ファイルを読み取る、アップロードする File System Access API 直に書き込み、ファイルの作成・削除も可能 10
11. そして フロントエンド技術によるネイティブライクなUI 達 Service Worker File System Access API を合わせると... 11
12. VS Code for the Web 12
13. VS Code for the Web ブラウザ上で動くVS Code （デスクトップ版に比べて制限あり） GitHub で . キーを押すと起動（github.dev やvscode.dev ） GitHub 上のコードやローカルの編集などができる これにリモートの実行環境がつくとGitHub Codespaces と呼ばれる 13
14. キーとなる技術（ 2 回目） 14
15. WebAssembly （ WASM ） ブラウザやNode.js 上で高速動作するバイナリ形式（ .wasm ） C 、C++ 、Rust など様々な言語からコンパイルして生成 ネイティブ水準の速度で複数の言語で記述されたコードを動作させ ることが可能 ブラウザ上で動いたものの例 Ruby 、SQLite 、FFmpeg 、DOOM3 （ゲーム） 15
16. WASI WASM がファイルやネットワークなどを安全に扱うための仕様 例 Node.js → WebAssembly （WASI 準拠） → ファイルにアクセス 16
17. Wasmer 様々な"OS" 上で動くWASM の実行環境で、様々な言語に組み込める = 好きな言語でWASM 、好きな言語でサーバ、様々なOS で動く → Java （JVM ）の代替になれるかも memfs などのin-memory な仮想のファイルシステムライブラリと組 み合わせることで、ブラウザ内を"OS" と認識させることができる ブラウザ + 仮想ファイルシステム → WebAssembly （WASI 準拠） → 仮想ファイルにアクセス 17
18. そして VS Code for the web Web Worker WebAssembly （+ WASI ） 仮想ファイルシステム を合わせると... 18
19. Stackblitz 19
20. Stackblitz ブラウザ内でNode.js が動くWeb IDE サービス リモートサーバでコードを実行しないため、反映が速い オフラインで作業可能 20
21. WebContainer Stackblitz が作ったブラウザ内でNode.js が動く、WASM ベースの 「ミニOS 」by 公式 技術的要素（想像 ※） Node.js のWebAssembly （WASI 準拠） 仮想ファイルシステム（memfs? ） 仮想ネットワーキング（ServiceWorker ） シェルのWebAssembly （WASI 準拠）← （Stackblitz の秘術） ※ コードが公開されておらず、部分的な情報しかないため半分想像 21
22. WebContainer の体験 環境 ブラウザ + 仮想ファイルシステム + 仮想ネットワーキング → Node.js のWebAssembly （WASI 準拠） → 仮想ファイルにアクセス ビルド WASM のNode.js でビルド → SharedWorker 内にサーバが立つ ユーザ localhost にリクエスト → Service Worker がNode.js 役のShared Worker に処理を投げる 22
23. 未来 別の言語のWASM に置き換えれば、ブラウザ内で様々な言語のサー バが立てられる ブラウザを入れれば、遅延が少ない快適な環境が構築できる未来が 来る かも！ 23