Nodebox: 任意のブラウザーで実行される Node.js ランタイム

現在、Sandpack 2.0 を発表しています。これは Nodebox を導入するもので、Node.js ランタイムであり、任意のブラウザーでサーバー側のコードを高速化できます。

365 日前、私たちは Sandpackをリリースしました、開始ソースのブラウザ内バンドラーで、実際に動作するコード例をサイトに迅速に配置できます。

これ以上のオプションを維持することはできませんでした。 私たちは、Sandpack が非常に効率的であることを知っていたので (CodeSandbox 自体を強化するのはバンドラーです!)、事実上、誰でも簡単に自由に入手できるようにすることは理にかなっています。 この技術を利用して、人々はどのような形態の極寒の物体を作成するのでしょうか? 印象的な React.js ベータ ドキュメント から、称賛に値する製品 までSideGuide, 私たちは、このテクノロジーがブラウザーの速度の境界を押し広げていたことに驚きました.

しかし、JavaScript の世界は動きが速い! 新たな挑戦は展示を保護し、ランタイムの実行を超えて魅力的であり、サーバーの実装を煩わしくすることで、複雑さの増大による複雑さを解消します。 それで、どうですか…ノードは強化を与えますか？ これにより、サーバー実行の必要性の高まりが解消されることは最も生産的ではありませんが、セットアップの説明を提示せずにNodeイニシアチブを高速化するためにアクセスしやすくすることで、開発者に確実に力を与えます.

そのため、私たちは皆、Nodebox テクノロジーを使用した Sandpack 2.0 の開始を手放すことに非常に怒っています。 )このサンドボックス 🥳

任意のブラウザでノードを起動

たまたま聞いたことがある、または気になっている場合 サンドパック、あなたはおそらくそれが何であるかを知っているでしょう: JavaScript アプリケーションをブラウザで直接操作する. しかし、バージョン 1 では、「すべての JavaScript アプリケーション」に必要な警告は、クライアント ランタイムの実行が最も生産的であるということでした。

アプリがサーバーまたはクライアントのランタイム実行に依存している場合を除いて、Sandpack では問題なく動作します。 これは、バージョン 2 の方向性に取り組んだときの主な意図でした. Node.js ブラウザ内。 Nodebox はブランド独自の可能性をもたらし、Sandpack を使用して、あらゆるブラウザで想像できるほぼすべての JavaScript アプリケーションを高速化できます。

これはおそらく巨大かもしれないと判断します — 現在、Sandpack v1 が有効にしたものより良くない場合、必要に応じて事実です。 Nodebox では、git-clone

は必要ありません。 、特定のノードのバリエーション、ターミナルでのスクリプトの高速化などをダウンロードします。PC を解放することなく、ブラウザで数秒でノードのチャレンジを高速化できます。 さらに、Sandpack のカスタマイズ可能な UI、低フットプリント、試行錯誤された開発者の旅をすべて 1 つのパッケージで取り戻します.

しかし、十分な話です. 実際に Sandpack 2.0 をいくつかの極寒の例でテストする時が来ました。 注意してください: これらはすべて編集可能ですので、必要に応じて微調整してください!

輸出 デフォルト 特性 ハウス (

ファイル} h1> div> ); } 輸出 特性 getServerSideProps() { 戻る { props: ){ ファイル: “世界” }、 } }

“@codesandbox/sandpack-react” <サンドパック テンプレート=”nextjs”/>

👉開始アップ
このクラウド サンドボックスで上記のインスタンスを作成し、ビルドを開始します!
自宅で、各地でノードを作る
すっごい…
Sandpack 2.0 を使用すると、Nodebox がサーバー側の例の動作を許可するため、ドキュメントを完全に元のレベルに引き上げることができます。  Subsequent.js や Vite ベースのサンプル、Node スクリプトのチュートリアルなどを少しずつ追加してください。ブラウザーやツールに関係なく、医師を訪問するすべての人が高速化されます。 私たちの
マークオリジナルのサンドパックドクターを垣間見ることができます 興味をそそる問題全体を見つめるために、インタラクティブなドキュメントでプロットするスペースにいる必要があります.
これはまた、使い捨てのサーバー側のケース  が現実になりました。 ノード エミュレーションの応用科学とは異なり、Sandpack 2.0 を使用すると、テーマ設定可能でカスタマイズ可能なサーバー イニシアチブを迅速に実行できます。フットプリントはほとんどなく、サーバー、登録、ソース調整、インストール、および作業手順は必要ありません。
CodeSandbox では、戦いのヒントや簡単な瞬間にさえ専念しています。好奇心が抜け落ちます。 プログラミングは、正確なライフスタイルの複雑さを解消するための非常に効率的なソフトウェアです。実際には、アクセシビリティを発明する必要があります。  Sandpack により、任意のサイトがマッター マテリアルのコーディング部分を作成できるようになり、現在、Nodebox を使用してサーバー コードを正常に作成できるようになりました。 人々がサンドパック 2.0 で学び、遊んでいる様子を垣間見ることができます。  — クリスチャン・アルフォニ
 
最後に、Sandpack 2.0 は完全なオリジナルを開きます技術的なつぶやきの素材の作成者、ドキュメントの管理者、現在のオンライン ツールの開発者、およびブラウザ内のサーバー環境が不可欠であるその他の創造的な用途の可能性の世界.
それを締めくくるにはすべてオフ、Sandpack 2.0 を使用しているときは、常に 1 クリックで頑丈な流行の雰囲気からかけ離れています。 元の CodeSandbox ジャーニー  で任意のインスタンスを起動する それを構築して保護するために、必要に応じて複雑にします.
ボンネットの下のノードボックス
ジャスパー・デ・ムーア
 Nodebox メンテナー
CodeSandbox といくつかの内部ニーズにより、Nodebox に取り組み始めました。任意のブラウザーで Node を高速化するための簡単なプロットを求める他の開発者からの外部要求
Nodebox は、Node.js の過剰なレベルの抽象化です。 これは、Node.js の小さなよく知られている点のペアを実装していないことを示唆していますが、すべてのブラウザーで受け入れられるようにさまざまな調整を行いました。 そのため、Nodebox はアプリケーションの互換性を目標としており、現在は Node.js 機能のパリティではありません。
Nodebox を作成する際の最優先事項の 1 つは効率性でした。  Sandpack トランスパイラを Rust の使用法で完全に書き直し、キャッシングを微調整し、他のいくつかの最適化を行いました。 停止結果は？ 確かに早い！ 例として、私たちの Vite テンプレートは、500 ミリ秒のホット開始時間を維持します 🎉.
私たちは、Subsequent.js 用にすぐに使える拡張機能を備えたトランスポート Nodebox です。 、Vite および Astro ですが、私たちは、あなたが想像できるあらゆるサーバー側フレームワークについて事実を強化するために成長しています。 ただし、napi や別の低レベルの C++/Rust パッケージを実際に高速化することはできない可能性があるため、Node.js (最も生産性の高い WebAssembly および JavaScript モジュール) で使い尽くす必要があるかもしれません。  Postgres、MongoDB、MySQL も 2 番目にあり、ブラウザで拡張する raw ソケットが不足しているため、現在サポートされていません。
さらに、私たちは 2 番目です。
async_hooks のように、欠落しているいくつかの API に取り組んでいます。 , vm 、worker_threads 、コンピューター化されたプロセスの終了 (顧客は手動で 
process.exit を呼び出す必要があります プロセスが終了するよりも早く) 同期 exec/spawn を実行します。  Nodebox は iOS Safari で動作しますが、ブラウザのメモリ リークを改善するため、ベータ版では完全に安定しています。 そのうちのいくつかは 3 月に予定されています 
Vite 4 を強化する
衝動React、Vue、Astro、Svelte
500ms
Vite テンプレートのホット開始時間
自動セットアップ依存関係
 
 
WebContainersとの不一致 
WebContainers とは対照的に、Nodebox は常にそうであることを再認識しました。 では、以下にそれらの違いの概要を示します。
 
WebContainers は、ブラウザーで Node.js を高速化することもできるテクノロジーです。 繰り返しになりますが、応用科学が賞賛する標準ブラウザを使用します SharedArrayBuffer
、これにより、Safari で速度が低下し、ユーザーが余分なスペースを確保する必要があります  Sinister-Starting place-Isolation ヘッダーをサーバーに配置して、コードを高速化します。
 代わりに、最小限のセットアップで任意のブラウザー (iOS と Safari を賞賛) で高速に動作するように、標準のブラウザーに適用された科学を使用せずに Nodebox を実装しました。 ここでの欠点は、Nodebox がより多くのメモリを使い果たし、より多くのスレッドを生成することを維持し、堅牢な Node API の互換性を取り戻すことができないことです (例として、同期
 を使い果たすことはありません)。 フォーク
)。 ここで Nodebox の k は、小さなイニシアチブや例を高速化するために構築されていたため、確実に成功しています。 ブラウザーで強力な流行を発信したい場合は、代わりにマイクロ VM テクノロジを使用することをお勧めします。
詳細なファイルについては、
 よくある質問。
非常に効率的です。 海軍。 すぐに使用できます。
また、今では、一人一人がよりアクセスしやすいインターネットを作ることに飽き飽きすることはありません.
 Nodebox のように非常に効率的かつ迅速に何かを構築するのは楽しいことですが、1 人 1 人に合わせて作成するまで、必要な影響を維持することは絶対にできません。 したがって、Nodebox を  として排出するためのスペースにいることになります) NPM パッケージ。任意のブラウザー、任意のコンテキスト、および任意のアプリケーションで Node.js を高速化するのに役立ちます。
実例として、次の 2 行のコード行を使用して Nodebox で Philosophize.js を高速化する方法を次に示します。
インポート
 { ノードボックス }
 from
 "@codesandbox/nodebox" ; const previewIframe
=file.getElementById ("プレビュー iframe"); const
 nodeboxIframe=file.getElementById (“nodebox-iframe”); (async ()=> {  const nodebox=オリジナル ノードボックス({ iframe:  nodeboxIframe }) );  nodeboxまで起きていてください。 接続();  まで起きていてくださいnodebox.fs.init({ “package.json”:  JSON.stringify({ 依存関係:  { explicit:  “4.18.2”, }, }), “index.js”: `const explicit=require(‘explicit’) const app=explicit() const port=3000 app.regain(‘/’, (req, res)=> { res.ship(‘Hello world’) }) app.listen(port, ()=> { console.log(`例  )アプリ リスニング オン ポート ${ポート}`) })` , }); const shell=ノードボックス.シェル.暗殺(); const { identity  }=起きていて  シェル.runCommand(「ノード」,  ); const { url }= nodebox
まで起きていてください.プレビュー.getByShellId (身元);
 previewIframe.src=url; })();
👉 この状況を このサンドボックス.
What’s Subsequent?
Sandpack には間違いなく知的未来があります!
その後、有効化に取り組んでいます microVMs を Sandpack に入れると、b で簡単に保存できます
 残念なことに、現在、多くの理由で Nodebox の調達を開始していませんが、そのうちの 2 つは調整の範囲外です。 、おそらくこの技術は、おそらくDXの改善に向けた前進の定式化であると判断しています。 それで、私たちはそれを長いスピードでソース化できるかどうかを判断することができます.作成します！ バグに遭遇したり、不足している物質を要求したい場合は、GitHub で議論を開始してください。 Adewaleへの称賛, アレックス, アルテム, バス, ダニーロ ), フィリペ, アイブス, ジャスパー, マルコ , オビンナ,
 オスカー, 
Zeh、および GitHub のすべての Sandpack コントリビューター! 
𝚆𝚊𝚝𝚌𝚑 𝙽𝙾𝚆 📺