Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

pvcresin
December 16, 2022

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

2022-12-16 Eight LT 2022

pvcresin

December 16, 2022
Tweet

More Decks by pvcresin

Other Decks in Technology

Transcript

  1. Electron Web 技術でデスクトップアプリを作成するフレームワーク Chromium とNode.js をバイナリに組み込む VS Code 、Slack などなど

    フロントエンド技術によるネイティブライクなUI 達 Monaco Editor :エディタ Xterm.js :ターミナル 7
  2. File System Access API ユーザのローカルのファイルをブラウザで直に読み書きできる 単にFile にを読み取れるだけのFile API とは別物 ユースケース

    File API ファイルを読み取る、アップロードする File System Access API 直に書き込み、ファイルの作成・削除も可能 10
  3. VS Code for the Web ブラウザ上で動くVS Code (デスクトップ版に比べて制限あり) GitHub で

    . キーを押すと起動(github.dev やvscode.dev ) GitHub 上のコードやローカルの編集などができる これにリモートの実行環境がつくとGitHub Codespaces と呼ばれる 13
  4. WebAssembly ( WASM ) ブラウザやNode.js 上で高速動作するバイナリ形式( .wasm ) C 、C++

    、Rust など様々な言語からコンパイルして生成 ネイティブ水準の速度で複数の言語で記述されたコードを動作させ ることが可能 ブラウザ上で動いたものの例 Ruby 、SQLite 、FFmpeg 、DOOM3 (ゲーム) 15
  5. Wasmer 様々な"OS" 上で動くWASM の実行環境で、様々な言語に組み込める = 好きな言語でWASM 、好きな言語でサーバ、様々なOS で動く → Java

    (JVM )の代替になれるかも memfs などのin-memory な仮想のファイルシステムライブラリと組 み合わせることで、ブラウザ内を"OS" と認識させることができる ブラウザ + 仮想ファイルシステム → WebAssembly (WASI 準拠) → 仮想ファイルにアクセス 17
  6. そして VS Code for the web Web Worker WebAssembly (+

    WASI ) 仮想ファイルシステム を合わせると... 18
  7. WebContainer Stackblitz が作ったブラウザ内でNode.js が動く、WASM ベースの 「ミニOS 」by 公式 技術的要素(想像 ※)

    Node.js のWebAssembly (WASI 準拠) 仮想ファイルシステム(memfs? ) 仮想ネットワーキング(ServiceWorker ) シェルのWebAssembly (WASI 準拠)← (Stackblitz の秘術) ※ コードが公開されておらず、部分的な情報しかないため半分想像 21
  8. WebContainer の体験 環境 ブラウザ + 仮想ファイルシステム + 仮想ネットワーキング → Node.js

    のWebAssembly (WASI 準拠) → 仮想ファイルにアクセス ビルド WASM のNode.js でビルド → SharedWorker 内にサーバが立つ ユーザ localhost にリクエスト → Service Worker がNode.js 役のShared Worker に処理を投げる 22