新しい WebAssembly プロジェクトにより、Web コンポーネントがバックエンド言語に導入されます

オープンソースの WebAssembly プロジェクトは、Web コンポーネントを他の言語に提供し、開発者がデジタルアセット間で Web コンポーネントを共有できるようにします。

「New Wasm Project Brings Web Components to Backend Languages」 (著者 Loraine Lawson)から翻訳。

WebAssembly では基本的に、Rust や Python などの非フロントエンド言語を Web ブラウザーで実行できます。しかし、Web 開発者でありEnhanceメンテナーのRyan Bethel 氏は、「このパラダイムを逆転させ、Wasm を使用して Python または Rust 環境で Web コンポーネントを実行できないだろうか」と考えています。

結局のところ、答えは「はい」です。微調整すれば、これは可能です。 Bethel と Enhance チームは問題を解決し、 4 月 8 日にEnhance Wasmをリリースしました。

「 Wasm エコシステムが機能するためには、Rust、Python、Java、およびその他すべてのランタイムも Wasm を実行できます」と、Enhance を設立し、自身も Web 開発者である Beginの CEO、Brian LeRoux氏は説明します。「これで、その逆ができるようになりました。ブラウザコードを取得して、Java、Python、PHP、Rust、またはその他の言語で実行できます。Web コンポーネント定義に基づいて HTML を生成する Enhance インタープリタを使用しています。 Wasm に再コンパイルしています。」

ルルー氏は、その影響は、数値属性のタイトルをさまざまな言語で再利用するといった Web の問題の解決から、ボタン、ドロップダウンメニュー、その他の共通のデザイン要素を言語を超えてコンポーネントとして使用できる世界共通のデザインを作成する可能性まで多岐にわたると説明しました。繰り返し使用されます。

これがどのように機能するかを理解するには、オープンソースのフルスタック HTML フレームワークであるEnhanceについて知ることが役立ちます。 Enhance の重要性を理解するには、JavaScriptの広範な採用を考慮することが役立ちます。

LeRoux 氏は、10 年前にはプログラマーが約 2,000 万人いたと指摘しましたが、現在GitHub ではその数を 1 億人の開発者と推定しています。彼は、彼らのほとんどは、Rust などの低レベルのプログラミング言語を学習することによってではなく、HTML、CSS、JavaScript (特に JavaScript) を学習することによってプログラマーになったと考えています - Stack Overflow の開発者調査によると、JavaScript が最も多くなっています11 年連続で最も一般的に使用されているプログラミング言語。

「私たちの想定では、（ソフトウェア開発者の）最大のセグメントはフロントエンド開発者であり、率直に言って、彼らが学んでいることの多くは10年も前のものでもあります」とルルー氏は語った。フロントエンドの構築方法については、多くの前提がブラウザによって拒否されました。」

しかしルルー氏は、ブラウザは今後も改良され続けるだろうと指摘した。それでも、今日のフロントエンドを取り巻く前提条件の多くは、JavaScript をより現代的にし、「コンポーネントやモジュールなどの構文をよりきれいにする」ために JavaScript を変換することに関するものだと同氏は述べた。

「良いニュースは、現在ではブラウザにコンポーネントとモジュールが組み込まれているということです。したがって、これを実現するためのフレームワークの必要性は、クラウド用語を使うと、差別化されておらず、面倒な作業になります。」と LeRoux 氏は続けました。

React は大量のコードを作成しますか?

JavaScript、特にReact は、ブラウザーがすでに作成できるコンポーネントを複製するために、多くのコードを提供します。これによりユーザーエクスペリエンスが低下するだろうと同氏は述べた。

「Enhance のアイデアは、プラットフォーム用のコードの作成とブラウザ用の下位レベルのコードの作成に戻ることです。ブラウザが完璧だと言っているわけではありません。どこでも紙を切り取って使用されています。」 Web コンポーネントなどには問題があり、どこでも耳にするのは FUD だけではありません。ユーザーエクスペリエンスの状態や、低レベルのブラウザープリミティブを扱う開発者のエクスペリエンスについて、多くの人が不満を抱いています。 Enhance の全体的な目標は、Web コンポーネントを使った構築を楽しくすることです。」

同氏は、開発者が Web コンポーネントを作成するとき、HTML 要素を拡張する JavaScript を作成する傾向があると述べました。ただし、ページ上のほとんどの要素は実際にはインタラクティブではありません。「おそらく、特定のWebページ上の要素の90％はJavaScriptを受け付けず、フォームを送信せず、スクロールイベントやインターセプト、フォームの送信やクリックなどを解釈しません」と同氏は述べた。「したがって、サーバーに Web コンポーネントをレンダリングさせたいのですが、必ずしもクライアント側の JavaScript を実行したいわけではありません。」」

同氏によると、Enhanceは開発者にカスタム要素を含むページを提供するという。開発者は JavaScript を使用できますが、必要ない場合もあると LeRoux 氏は付け加えました。

「実際のところ、こうした余分な作業をすべて実行すると、パフォーマンスが大幅に低下するため、おそらくそれは望まないでしょう」と彼は付け加えた。

平均的な Web サイトには 1 ～ 2 MB の JavaScript が含まれています。 LeRoux 氏は、Enhance のホームページには豊富なアニメーションがあるにもかかわらず、JavaScript が 4 ～ 5 KB しかなく、HTMLとCSSに依存していると指摘しました。

「私たちの仮説では、新しいソフトウェア開発者の最大のグループはフロントエンドであり、率直に言って、彼らが学んでいることの多くは 10 年前のものでもあります。」 - Begin official の Web 開発者兼最高経営責任者、Brian LeRoux 氏。

これは、Web サイトを構築するには React JavaScript が必要だと言われてきた人にとっては画期的なニュースです。 Enhance で人々が直面する課題の 1 つは、たとえば、React では複雑なオブジェクトをプロパティに渡すことができることです。 HTML ではこれが許可されていません。属性はスタイルを渡すためにのみ使用され、複雑なオブジェクトは使用されません。この種のことは React 開発者を驚かせることが多い、と彼は言いました。

「React はブラウザの動作を曖昧にし、不気味な谷を作り出し、実際に多くの人にとって非常に悪い学習体験になります」と彼は言いました。「あなたが Web 開発者で、10 年間 React を使用して Web サイトを構築してきた場合、ブラウザーがどのように動作するかを理解していないことに気づくと少しがっかりし、イライラするかもしれません。そのため、彼らはさまざまな作業を行います。怒りから始まり、絶望し、受け入れて次に進むという感情。」

Begin の CEO 兼開発者である Brian LeRoux が、Enhance Web サイトで使用されているコードを披露します。

ブラウザーが進歩するにつれて、JavaScript を使用する理由の多くがなくなったと同氏は付け加えた。

「私たちは Web の基本を非常に効率的に使用できます。現在では、90 年代の Web サイトと、現在の Web サイトを読み込むことができる、非常に下位互換性のある Web ブラウザーを利用できます。それをもっと新しくしろと言う必要すらなくなり、私たちは以前ほどそれを活用しなくなりました。」

同氏によると、Enhance はパフォーマンスを重視し、長く使えるウェブサイトを構築したい人向けだという。

「最新のJavaScript フレームワークは、壊れることが多く、非常に脆いように感じます。毎年新しい大きなカンファレンスが開催され、すべての大きな変更が発表され、みんなが歓声を上げます。私は、これはお祭りだ、と思っています。ウェブページを配信するという計画外の仕事[…]」と彼は言った。「したがって、業界は間違いなくこの問題について徹底的に調査する必要があります。」

作成強化Wasm

Bethel Read Shopify の使用

小規模になるように設計された新しい JavaScript ランタイムであるQwik.jsを使った実験。 Shopify は、インタープリターを取得し、それを Wasm でコンパイルし、JavaScript とバンドルして、その JavaScript を Wasm をサポートするランタイムで実行できることを前提としています。 Bethel と Enhance チームは、別の方法で Web コンポーネントを他の言語で実行できるかどうかを確認したいと考えていました。

同氏は、チームがWeb コンポーネント定義から HTML を生成し、それを Wasm にコンパイルする Enhance インタープリタを使用していると説明しました。彼は、うまく機能するソリューションを得るには約 10 個のプロトタイプが必要だと言います。その秘密は、 WebAssembly で構築するためのクロスランゲージフレームワークであるExtismというスタートアップから来ています。

「Extism のおかげで、このコードを非常に迅速に取得して、さまざまなプラットフォームすべてで実行できるようになりました」と彼は言いました。「Wasmtime [WebAssembly のランタイム] は Java では使用できませんでした。ネイティブシェルを使用しない限り PHP では使用できないものがもう 1 つありましたが、今ではどこでも使用できるようになりました。アイデアは、次のセットを作成することです。」 Web コンポーネントを作成し、任意のバックエンドで実行します。」

チームは4 月 8 日のブログ投稿で Enhance を紹介し、これを「フロントエンド開発にとって飛躍的な瞬間」と呼びました。

「サーバーサイドのレンダリングは、パーソナライズされた Web アプリケーションの重要な要件です」とチームは書いています。「Web 標準の安定性、パフォーマンス、アクセシビリティを優先する組織は、さまざまなバックエンドランタイムでワークロードを実行します。これで、ランタイムギャップをカバーするブラウザーネイティブの Web インターフェイスを構築できるようになりました。」

Enhance Wasm はオープンソースであり、起動時にNode、Deno、Python、Ruby、PHP、Java、C#、Rust、Goをサポートします。

Wasm のユースケースを強化する

リリース直後、開発者は Enhance を使用して、Web プロパティの見出しのスタイルを変更しました。ルルー氏は、これは買収を通じて成長し、完全に独立した 4 ～ 5 つの異なるテクノロジー部門を持つ大企業で特に有用だと述べています。たとえば、彼の妻は、買収したスタートアップからの複数のシステムを所有する大手テクノロジー企業であるLaunchDarklyで働いています。同氏は、これらのシステムには PHP ブログと Go アプリケーションがあり、さまざまなデジタルプロパティにさまざまなテクノロジが実装されているため、デザインシステムを維持するのは頭の痛い問題であると述べました。

「実行時の再実装ごとに設計システムを維持する必要がある場合、Enhance Wasm を使用すると、これらの定義をすべて Web コンポーネントを使用して実行でき、1 つの定義セットからこれらのプロパティすべてにわたって実行できます。」と同氏は述べています。だからこそ、説得力があるのです。」

チームはまた、有名なデザイナーのブラッド・フロスト氏とも話し合いました。彼は、Google のマテリアルや Salesforce の Lightning に似た、誰もがアクセスできることを目的としたグローバルデザインシステムを提案しました。

Enhance チームは、W3C Web Components Working GroupおよびOpen UI Groupにも参加しています。

「最終的な目標は、多くのものをブラウザ自体に組み込むことです」とル・ルー氏は言います。「ボタンのデザインシステムを現在共有する必要はありません。ボタンはすでにプラットフォームに組み込まれているはずです...タブ。カルーセルやアコーディオンなど、あらゆる Web サイトにこれらのコンポーネントがあり、理想的にはクライアント側の JavaScript なしで動作するのが便利です。」

この記事はYunyunzhongsheng ( https://yylives.cc/ ) で最初に公開されたもので、どなたでもご覧いただけます。