Quinoa - Modern UIを手間なく作成するためのQuarkusエクステンション

Quarkusと共に、ReactやAngularといったWebフレームワークとの連携は、自然なニーズです。多くのユーザーは、Quarkusの初期段階から、スムーズな統合を要望していました ( #588 ）。そのため、Quarkus用のQuinoaエクステンションを作成しました。

Quarkusが誕生して以来（3年前）、この問題を解決するために 多くのブログ記事 が作成されましたが、そのほとんどはfrontend-maven-pluginを利用したものでした。code.quarkus.ioの作成者として、私もこの状況に直面し、他の多くの人と同様に、このプラグインを使用してギャップを埋めました。このプラグインは確かに仕事をし、当面のニーズを満たすには十分でした。残念ながら、全体的なプロセスはもっと合理的で簡単に始められるはずです。多くの設定、リソースを正しい場所にコピーするためのトリッキーなセットアップ、適切なタイミングでフロントエンドをテストすることが必要です。ライブコーディングでは、2つのプロセスを起動し、それを一緒に動作させるためのプロキシが必要です。

この経験を背景に、私は私たちの生活を少し楽にするために何か貢献する良い立場にありました。私は、すべてのニーズ、問題、提案、ブログ記事に目を通し、Quarkusで健康的でモダンなユーザーインターフェース（UI）を作成するための新しいエクステンション、Quinoa（Quarkus UI with NO HAssle : の略）を考え出しました。

Quinoaは、Web UIのビルド/結合/ライブ設定にまつわるすべてのタスクを隠蔽し、Webアプリケーションのロジックに専念できるようにします。フルスタックのシングルページアプリケーションやマイクロサービス（マイクロフロントエンド）を作成する場合でも、物事をより簡単にすることができます。

Node.jsには、モダンなフロントエンドのWebアプリケーションを作成するための優れたツールがあります。Quarkusには、クラウドで信頼性の高いモダンなバックエンドを構築するための幅広いエコシステムがあります（マイクロサービス、レスト、DB、イベント、クラウド・ネイティブ…​）。Quinoaは、この2つの世界の長所を得るための接着剤です。

NodeJSプロジェクトがQuinoaと互換性を持つための唯一の前提条件は、 build スクリプトを持っていることです。これは、特定のディレクトリに静的なファイル（index.html、javascript、css、…​）を生成する必要があります。チームはさまざまなので、全員が満足できるように、ウェブUIをQuarkusプロジェクト内（デフォルトは src/main/webui ）または外（ビルド時にディスク上で利用可能である限り）に置くことが可能です。

パッケージマネージャ （NPM、Yarn、PNPM）を 設定 する必要はありません（可能です）。プロジェクトのロックファイルによって自動的に検出されます。

生成されたUI静的ファイルは、Quinoaで処理されます。Quarkusのビルド時に、jarまたはネイティブバイナリにバンドルされます。実行時には、Quarkusの他の静的リソースと同じように効率的に提供されます。UI開発者は、シングルページアプリのルーティングを有効にするよう求めていましたが、現在は ブール値で設定 するだけです。

さて、ライブコーディングはどうでしょうか。これはQuarkusの人気機能で、ほとんどのNodeJS UIフレームワークにはすでにこのようなモードがあります。Quinoaには2つのオプションがあります。

どちらの方法でも、Quarkusのdevモードを起動すると、Web UIがシームレスに提供されます（デフォルトでは http://0.0.0.0:8080 ）。どちらも実行可能なオプションで、バックエンドとフロントエンドの両方を同時にライブコーディングすることができます。かなり素晴らしいでしょう？