The English version of quarkus.io is the official project site. Translated sites are community supported on a best-effort basis.

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

Quinoa Bowl

Quinoa…​正直最初はあまり好きではなかったのですが、妻がアボカドや生サーモンと一緒にサラダのようにボウルに入れて作ってくれたんです。今では、醤油を少し垂らして食べるのがとても美味しいです。余談ですが、この記事では健康的な食べ物について話すのではなく、QuarkusでモダンなUIをコーディングして楽しむためのエクステンションについて話しています。

このエクステンションはQuarkusのコアエクステンションではなく、Quarkiverseの一部として利用可能です。このアイデアを成熟させるために、初期のフィードバックと貢献をお願いします。

入門

新しいQuinoaプロジェクト(ベースとなるQuinoaスターターコードを含む)を作成します。

quarkus create app quinoa-app -x=io.quarkiverse.quinoa:quarkus-quinoa

そして、ライブコーディングを開始し、* http://0.0.0.0:8080/quinoa.html に移動*します。

quarkus dev

これ は、より深く、React、Angular、Lit、Webpack、Rollupなどの任意のNodeベースのWeb UIフレームワークであなたのアプリを構成するためのQuinoaのガイドです…​

ちょっとした背景説明

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つのオプションがあります。

  • UIライブコーディングサーバーに委譲。 UIサーバーのポートを設定 します。慣習として、Quinoa は UI サーバープロセスを開始するために package.json から start スクリプトを呼び出します。その後、指定されたポートに関連するリクエストを透過的にプロキシします。

  • Quarkusがファイルを監視し、Quinoaは変更時に新しいWeb UIビルドをトリガー(devとprodで異なるビルドを構成することができます)。

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