Jamie Birch氏は先頃、Windows、Linux、およびMacOSでデスクトップアプリケーションを開発するためのフレームワークであるSvelte NodeGuiを発表した。Electronより軽量な代替手段であるSvelte NodeGuiを使用すると、開発者はSvelteフロントエンドフレームワークとコンパイラ、Qtウィジェットツールキット、およびHTMLとCSSのサブセットを使用してアプリケーションを作成できる。
Svelte NodeGuiのドキュメントには、新しいフレームワークの背後にある理論的根拠と利点が次のように示されている:
Svelte NodeGuiは、NodeGui用のSvelteレンダラです。これは、クロスプラットフォームのグラフィカルユーザーインターフェイス (GUI) ライブラリ
Qtへの効率的なJavaScriptバインディングです。Qtは、デスクトップアプリケーションを構築するための最も成熟した効率的なライブラリの1つです。これにより、Svelte NodeGuiは、他の一般的なJavascriptデスクトップGUIソリューションと比較して、メモリとCPUの効率が非常に高くなりました。Svelte NodeGuiで構築された hello world アプリは、20Mb未満のメモリで実行されます。
一部の開発者は、基本的な hello world Electronアプリケーションのサイズが大きく115MBまたは275MBであると報告している。Svelte NodeGuiは、そのWebアプリケーションをChromium Webブラウザと一緒に出荷しないことで、より良好なメモリ消費でより小さな実行可能ファイルをコンパイルすることにうまく対処する。
逆に、Svelte NodeGuiアプリケーションは、ブラウザAPIもすべての範囲のHTMLとCSSも利用できない。Svelte NodeGuiアプリはユーザインターフェイスがQtウィジェット (QMainWindow、QCheckBoxなど) で構成されたNode.jsアプリであり、Qtのスタイルシート構文でサポートされたCSSのサブセットでスタイルを設定でき、Flexbox (Webブラウザの一次元のレイアウト方式) でレイアウトされる。Qtウィジェットの表面積は、HTMLネイティブ要素の表面積よりも小さい場合がある。これにより、開発者はQtでサポートされているHTMLのサブセットを使用するように制限される。Svelte NodeGuiには、ボタン、イメージタグ、編集可能なテキスト領域、プログレスバー、ネイティブOSウィンドウなどの13のタグやUIコンポーネントが付属している。
Qtウィジェットはイベント (シグナルと呼ばれる) を発行する場合があり、イベントハンドラでプログラムと関連付けて受信することができる。NodeGuiは、アプリケーションが受信できる一連の内部イベント (QEvents) も提供する。Svelte NodeGuiのドキュメントには、レイアウトメカニズムとイベント構文を示す次の例が記載されている:
<script lang="ts">
import { onMount } from "svelte";
import { Direction } from "@nodegui/nodegui";
import type { QPushButtonSignals } from "@nodegui/nodegui";
let additionalButtons: string[] = [];
let direction: Direction = Direction.LeftToRight;
function addHandler(): void {
additionalButtons = [...additionalButtons, `Button ${additionalButtons.length}`];
}
function removeHandler(): void {
additionalButtons = [...additionalButtons.slice(0, additionalButtons.length - 1)];
}
function toggleDirection(): void {
direction = ((direction + 1) % 4) as Direction;
}
onMount(() => {
(window as any).win = win; // Prevent garbage collection.
win.nativeView.show();
return () => {
delete (window as any).win;
};
});
</script>
<window bind:this={win}>
<boxView direction={direction}>
<button text="Add" on={addHandler} />
<button text="Remove" on={removeHandler} />
<button text="Toggle direction" on={toggleDirection} />
{#each additionalButtons as additionalButton (additionalButton)}
<button text={additionalButton}/>
{/each}
</boxView>
</window>
前のコードサンプルが示すように、通常のSvelteシングルファイルコンポーネント構文を使用してアプリケーションロジックを記述する。Svelteの onMount ライフサイクルフックは、ネイティブアプリケーションウィンドウを表示するために使用される。ウィンドウのコンテンツは window タグ内にカプセル化されており、ユーザがボタンをクリックして切り替えることができる特定の方向に配置された4つのボタンで構成されている。トグルで、結果のデスクトップアプリケーションのユーザインターフェイスは、次の2つのレイアウト間で切り替わる:
(出典: documentation)
開発者はフェッチブラウザAPIを使用することはできないが、既存の大規模なNode.jsパッケージのセット (Node Fetchなど) を選択できる。インストールしたネイティブNode.jsモジュールも使用できる。開発者は、Node.jsアプリケーションと同じように、Chromium Developer Toolsを使用してSvelte NodeGuiアプリケーションをデバッグできる。
このリリースは、HackerNewsに活発な議論を生み出した。あるユーザは、残りの作業を求めながら、デスクトップアプリケーションの新しいオプションを歓迎している:
本当によさそうだ! 一見すると、これはおそらく私がHNに投稿した中で最高のElectronの代替のように思えます。
一貫性のあるGUIレイヤとは別に、Electronはクロスプラットフォームのビルドとアップグレードのための成熟したツールで、私は多くのチームが固執する過小評価の理由だと思います。それはDIYにはかなり苦痛です。
NodeGUIは現在クロスコンパイルをサポートしていないようですが、それはロードマップにありますか? アップグレード/自動アップグレードのツールはどうですか? コード署名は?
react-electron-boilerplate、neutralino、および tauri は、Webテクノロジーを使用した軽量デスクトップアプリケーションの開発のための追加オプションだ。Googleは最近、単一のコードベースからモバイル、web、デスクトッププラットフォーム向けのアプリケーションを作成する開発者をサポートに努めたクロスプラットフォームUIツールキットであるFlutter 2をリリースした。あるHackerNewsの読者は、さらに埋め込み可能なHTML/CSS/scriptエンジンであるSciterへのJavaScriptインターフェースを提供するSciter.jsに言及した:
VanilaJSとSciter.JSの同じデモ : https://github.com/c-smile/sciter-js-sdk (スクリーンショットを参照してください)
5MBまでのバイナリ、それに HTML/CSS と QuickJS と NodeJS ランタイム。
対して Node.JS と QT の NodeGUI は 50MB以上。
そして、SvelteJSはSciter.JSでもすぐに使用できます。
Qtは、商用ライセンスとオープンソースライセンスの下でデュアルライセンスされている。親のNodeGuiプロジェクトの作成者は、ソフトウェアディストリビューションに対するライセンスの影響を強調した:
LGPLライセンス要件に準拠している限り、Qtを商用アプリに無料で使用できます。デスクトップアプリの場合、比較的簡単に実行できます。Qtライブラリ + 追加のライセンスおよびクレジット情報に動的にリンクしていることを確認する必要があります。詳細はこちらです。
Svelte NodeGuiは、MITライセンスの下で配布されているオープンソースプロジェクトだ。