比較一覧に戻る
クロスプラットフォーム UI

Perry vs Electron

Electron は Web 技術(HTML / CSS / JS)でクロスプラットフォームのデスクトップアプリを構築できるよう、Chromium と Node.js をアプリと一緒にバンドルします。Perry は TypeScript を直接ネイティブマシンコードへコンパイルし、UI を実プラットフォームウィジェット(AppKit、UIKit、GTK4、Win32、JNI)でレンダリングします。Electron の売りは Web 技術の再利用、Perry の売りは TypeScript からのネイティブ UI 付き小型ネイティブバイナリです。

Electron とは?

Electron はレンダリングに Chromium、システムアクセスに Node.js を使用してクロスプラットフォームデスクトップアプリケーションを構築するためのオープンソースフレームワークです。各 Electron アプリは Chromium と Node の独自コピーを出荷するため、hello world でも Electron アプリのインストーラは通常 80–150 MB になります。Electron は VS Code、Slack、Discord、Figma のデスクトップクライアントなど、広く使用されているアプリを支えてきました。Linux、macOS、Windows のデスクトップをターゲットにしています。モバイル、ウォッチ、TV のファーストパーティの選択肢はありません。

Perry とは?

Perry はブラウザエンジンも、Chromium も、Node ランタイムもなしに TypeScript を直接ネイティブマシンコードへコンパイルします。UI レイヤ(perry/ui)は SwiftUI スタイルの宣言的システムで、macOS の AppKit、iOS / iPadOS / tvOS の UIKit、Linux の GTK4、Windows の Win32、Android の JNI 経由でネイティブプラットフォームウィジェットにマップされます。hello-world バイナリは ~330 KB、stdlib(Fastify、mysql2 など)を伴うフルアプリでも約 48 MB です。

並べて比較

機能PerryElectron
レンダリングネイティブプラットフォームウィジェット(AppKit、UIKit、GTK4、Win32、JNI)バンドルされた Chromium(HTML / CSS / JS)
バンドルされるエンジンなし(--enable-js-runtime のときのみオプションの V8)Chromium + Node.js
hello-world インストーラサイズ~330 KB~80–150 MB
フルアプリのインストーラ(stdlib + フレームワーク)~48 MB通常 100–200+ MB
RAM 使用量ネイティブ(典型値:数十 MB)複数の Chromium プロセス(典型値:数百 MB)
モバイル / ウォッチ / TVあり――iOS、iPadOS、Android、watchOS、tvOS、Wear OSなし(デスクトップ専用)
UI 言語宣言的 SwiftUI スタイル API を伴う TypeScriptHTML / CSS / JS(Web スタック)
自動更新 / パッケージングperry publish(Homebrew、APT、App Store、Play Store)electron-builder、electron-updater(成熟したエコシステム)
成熟度1.0 未満安定版、10 年以上のプロダクション実績

Perry が優れている点

  • +バイナリサイズ。Perry の hello world は ~330 KB ですが、Electron の hello world は通常 80–150 MB――各アプリが独自の Chromium を出荷するためです。
  • +メモリフットプリント。Perry アプリは単一のネイティブプロセスとして動作します。Electron アプリは複数の Chromium プロセス(レンダラ、GPU、ユーティリティなど)を実行し、アイドル時に数百 MB の RAM を消費します。
  • +ネイティブのルックアンドフィール。Perry は実プラットフォームウィジェットでレンダリングするため、アプリは OS のお作法(フォーカスリング、アクセシビリティ、IME、スクロールの物理)を自動的に継承します。
  • +モバイル、ウォッチ、TV。ひとつの Perry コードベースが iOS / iPadOS / Android / watchOS / tvOS / Wear OS にコンパイルされます。Electron はデスクトップ専用です。
  • +コールドスタート。ネイティブバイナリは Chromium と Node の起動コストを払いません。
  • +タイトなコードでの実 CPU パフォーマンス。Perry は計算系マイクロベンチで Node(Electron が使用)に対し、ほとんどのカーネルで倍数差でリードしています(perry/benchmarks 参照)。

Electron が優れている点

  • +成熟度。Electron は 10 年以上にわたりプロダクションで使用され、VS Code、Slack、Discord、その他多くのアプリを実戦投入されたツールで支えています。
  • +Web スタックの再利用。チームがすでに Web UI を構築しているなら、Electron は書き直しなしにそれをデスクトップアプリとして出荷できます。
  • +プラットフォーム間の UI の一貫性が容易――Chromium はどの OS でも同じ描画をします。一部のプロダクトはまさにそれを望みます。
  • +膨大な npm ライブラリのエコシステムがランタイムで動作します。Perry は一部をネイティブ実行し、オプトインの V8 で残りをカバーします。
  • +成熟したパッケージングツール(electron-builder、electron-updater、コード署名ヘルパー)と幅広いコミュニティサポート。
  • +devtools、ホットリロード、流麗な CSS / HTML イテレーションなど、Web ネイティブの機能と速度は無類です。

Perry を選ぶべきとき

小さなネイティブバイナリ、低メモリ使用量、プラットフォームごとのネイティブなルックアンドフィール、またはデスクトップに加えてモバイル / ウォッチ / TV にも出荷するひとつの TypeScript コードベースが欲しいなら Perry を選んでください。

Electron を選ぶべきとき

既存の Web UI があり最小の書き直しでデスクトップアプリとして出荷したいとき、デスクトップで最大限のクロスプラットフォーム UI 一貫性が必要なとき、または幅広い純粋 JS ライブラリにランタイム依存するときは Electron を選んでください。

結論

Electron と Perry はクロスプラットフォーム軸の両端に位置します。Electron はバイナリサイズとメモリを Web 技術の再利用と引き換えます。Perry は Web スタックをネイティブバイナリとネイティブ UI と引き換えます。Electron アプリのインストーラが 150 MB を超えて膨らむのを、あるいはアイドル時の RAM が 0.5 GB を超えるのを目にしたことがあるなら、Perry はその特定の問題への答えです――ただし別の、ネイティブ志向の UI モデルを引き換えに。

Perry を試す

今日から TypeScript をネイティブにコンパイルしましょう。

はじめる