Reactで書き、Rustで届ける

現代のインターフェースはReactで設計されます。そのため、制御盤から券売機まで、非常に多くの専用デバイスが、ブラウザエンジンを丸ごと載せています。世の中で最も大きく、最も攻撃されているプログラムのひとつを、いくつかのボタンと「Touch Start to begin」という言葉を描くために。

私たちは、ブラウザなしで現代的なデザインの進め方を使いたいと考えました。そこで作ったのがScreen Compilerです。

画面はReactで書く

デザイナーとフロントエンド開発者は、いつもの道具をそのまま使えます。コンポーネント、props、デザイントークン、使い慣れたエディタ。画面はTSXで書きます（これはScreen Compilerのテスト用画面のひとつを短くしたものです）。

<Column gap={SPACE_SM} padding={SPACE_LG}>
  <Text id="title">Welcome</Text>
  <Text>Touch Start to begin.</Text>
  <Spacer />
  <Button id="start" onPress={onStart}>Start</Button>
</Column>

届けるのは、ただのRust

ビルド時に、お手元のマシンまたはCIで、Screen CompilerはこれをNoWayOSのユーザーインターフェースランタイム向けのRustに変換します。

let n1 = b.text("Welcome")?; // welcome.tsx:17:9 <Text>
let n2 = b.text("Touch Start to begin.")?; // welcome.tsx:18:9 <Text>
let n4 = b.spacer(None)?; // welcome.tsx:20:9 <Spacer>
let n5 = b.button("Start", actions::START)?; // welcome.tsx:21:9 <Button>

どの行も、元になったTSXの位置を指しています。デバイスに届くのはこのコードだけです。JavaScriptエンジンも、ブラウザも、攻撃されるウェブページもありません。Screen Compiler自体がデバイスに載ることはありません。

正確に変換するか、何もしないか

推測で変換するコンバータは、信頼できません。Screen Compilerは、宣言されたTSXのサブセットを正確に変換し、それ以外はすべて、ファイル、行、列を示して拒否します。近似は決してしません。出力するRustには、unsafeもunwrapもpanicもありません。

そのうえで、変換された画面はすべてNoWayOSのレンダラーで描画され、承認済みの画像とピクセル単位で比較されます。1ピクセルでも動けば、ビルドがそう知らせます。

現在の状況

Screen Compilerは開発中です。最初のサブセットは完成しており、次のサブセットに取り組んでいます。MITライセンスのオープンソースで、GitHubでNoWayOSと並んで公開しています。Reactで設計し、重要なデバイスを作っているチームの方は、ぜひご連絡ください。