Vaadin について知っておくべきこと - バッテリー内蔵のサーバーサイド AJAX フレームワーク

私はVaadinについてたくさん書いてきました。私はとても熱中していたので、それについての最初の本(Book of Vaadin のほかに) と Vaadin 7 用の更新版、そして関連 Web サイト を書きました。それでも、JVM の世界でこれほど多くの人が Vaadin について聞いたことがないとは驚きです。

この投稿では、AJAX と SSR のコンテキストで Vaadin を紹介したいと思います。

Vaadin の簡単な紹介

Vaadin の美しさはそのシンプルさにあります。バックエンド コードのみを記述します。これはよくお読みのとおりです。Vaadin 開発者に必要なのは、Java または任意の JVM 言語と Vaadin API だけです。実行時に、Vaadin はクライアント側のコード( HTML、JavaScript、CSS) を作成します。このアプローチにより、開発者はアプリケーションのコア機能に集中でき、開発プロセスの生産性が向上します。

Vaadin は、通常のデスクトップベースのフレームワークと同様に、コンポーネントとレイアウトに基づいて構築されます。Swing または JavaFX を知っていれば、すぐに使いこなせるでしょう。

上で CSS について触れましたが、Vaadin では、テーマと呼ばれる専用の再利用可能なパッケージで CSS を開発できます。さらに嬉しいことに、テーマの開発はバックエンドの開発と並行して行うことができ、後者に縛られることはありません。コードで特定のテンプレートを使用したり、HTML に特定のクラスを追加したりする必要はありません。

Vaadin セットアップ

Spring Boot のコンテキストで Vaadin を設定するのは簡単です。

 <project> <properties> <java.version>17</java.version> <kotlin.version>1.9.24</kotlin.version> <vaadin.version>24.4.9</vaadin.version> <!--1--> </properties> <dependencyManagement> <dependencies> <dependency> <groupId>com.vaadin</groupId> <artifactId>vaadin-bom</artifactId> <!--2--> <version>${vaadin.version}</version> <type>pom</type> <scope>import</scope> </dependency> </dependencies> </dependencyManagement> <dependencies> <dependency> <groupId>com.vaadin</groupId> <artifactId>vaadin-spring-boot-starter</artifactId> <!--3--> </dependency> </project>

1. 他のプロパティとともに Vaadin のバージョンを設定します。
2. すべての依存関係のバージョンを一定に保ちます。
3. Vaadin Spring Boot 統合ライブラリを追加します。

Vaadin は、デフォルトでルートにマップされる通常の Java サーブレット上に構築されます。Vaadin Spring Boot 統合により、デフォルトをオーバーライドできます。コードベースは複数のフレームワークを統合しているため、関連するプロパティを介して/vaadinにマップします。

 vaadin.url-mapping=/vaadin/*

クライアントからの最初のリクエストで、Vaadin は JavaScript エンジンのコードを返します。エンジンは、構成された UI を取得してクライアント側をスキャフォールディングするための後続のリクエストを行います。それ以降、エンジンはすべてのユーザー操作を処理し、必要に応じて UI を更新します。

Vaadinとの最初のステップ

プロジェクトをセットアップしたら、リクエストを受信したときに Vaadin が表示するコンポーネントを構成する必要があります。

 @Route("/") //1 @PageTitle("Vaadin") //2 class TodoView(todos: ArrayList<Todo>) : VerticalLayout() { //3-4-5 init { //6 // ... //7 } }

1. コンポーネントを Vaadin サーブレットサブコンテキストルートに関連付けます。
2. 静的なページタイトルを設定します。動的なタイトルが必要な場合は、 HasDynamicTitle を実装できます。
3. RootComponentクラスを定義します。
4. VerticalLayoutはVaadinがHTML divとしてレンダリングするクラスです。
5. Vaadin Spring Boot スターターがリストの挿入を処理します。
6. Vaadin は最初のブラウザ要求時にinit()関数を実行します。
7. 次のコード スニペットはそこに配置されます。

コンポーネントの追加

上記のスニペットでは、Vaadin が提供するコンポーネントであるVerticalLayoutから継承しました。

Vaadin デザイン システムには、UI の構築に使用できるコンポーネントのセットが含まれています。コンポーネントには、クライアント側開発用の TypeScript API に加えて、サーバー側 Java API があります。

コンポーネントを使用するには、まずコンポーネントを作成し、それを含むレイアウトに追加します。

-- Vaadin アプリケーションでの UI の作成

一部のコンポーネントは他のコンポーネントを含むことができ、サブコンポーネントをどのようにレイアウトするかを認識しています。たとえば、 VerticalLayoutコンポーネントを上から下に列に配置し、 HorizontalLayoutコンポーネントを左から右に行に配置します。

レイアウトにコンポーネントを追加するのは簡単です。

 add(Label("Hello")) //1 add(Label("world!"))

1. init()関数のコンテキスト内。

これは完璧に動作しますが、Kotlin を使用しているため、 Karibu-DSL を使用して状況を改善できます。上記のスニペットを次のように書き直すことができます。

 label("Hello") //1 label("world!")

1. label() HasComponentインターフェース上の Karibu DSL 拡張関数です。

Karibu は素晴らしいですが、少し欠点があります。API 全体に対する拡張機能が提供されていないのです。たとえば、 Gridコンポーネントにフッターを追加するには、通常の API にフォールバックする必要があります。

 appendFooterRow().apply { getCell(completedProp).component = Button("Clean up") { todos.removeIf { it.completed } refresh() } }

プラス面としては、Karibu はオープンソースなので、何か追加したいことがあればいつでも貢献できます。

UI に関連する特定のコンポーネントは、一般的な理解には重要ではありません。興味がある場合は、いつでもソース コードを確認できます。

ユーザーインタラクション

メインフレームがコンピューティングの王様だった頃は、ターミナル経由でアクセスしていました。UI はかなり制限されており、レンダリングは「ダム」ターミナルで行われていました。パーソナル コンピュータでは、レンダリング機能がサーバーからクライアントに移動されました。この時点で、開発者はトリガー経由でコンポーネントに動作を関連付けました。たとえば、ユーザーがボタンをクリックしたときにHello world!印刷するようにバインドできます。

Web アプリケーションはこのパラダイムを変えました。以前の記事で示したように、すべてのインタラクションは、同期または非同期の要求応答フローにマッピングされます。Vaadin は、私たちを元のパラダイムに戻します。

 Checkbox(todo.completed).apply { //1 addValueChangeListener { todo.completed = it.value } //2 }

1. 新しいCheckboxコンポーネントを値で初期化します。

   
   

2. チェックボックスの値が変更されると、ラムダが実行され、基礎となるモデルの値が変更されます。

JavaScript コードは必要ありません。Vaadin が独立してインタラクションを管理します。

結論

この投稿は、AJAX と SSR のコンテキストにおける Vaadin の簡単な紹介にすぎませんでした。

Web アプリでプログラミングを学び、リクエスト/レスポンス モデルに慣れている開発者の多くは、Vaadin に触れると反応が鈍くなります。彼らの主な主張は API がないことです。私の意見では、これは利点です。一部のアプリ、特にビジネス アプリは、専用のモバイル クライアントを開発する必要があるほど進化していません。

Vaadin には、冒頭で述べたように、デフォルトの CSS セットが付属しています。このデフォルトのテーマにより、Vaadin アプリケーションは最初から見栄えがよくなり、ユーザーに快適で視覚的に魅力的な作業環境が提供されます。ただし、いつでも別のテーマを統合したり、独自のテーマを開発したりすることもできます。

しかし、本当のメリットは、やはり組織レベルにあります。紹介記事では、フロントエンドとバックエンドの開発を分離すると、統合時に問題が発生すると述べました。Vaadin ではそのような分離がないため、フロントエンドとバックエンドの間に統合ステップがないため、プロジェクト計画がより予測可能になります。同様に、テーマ設定も開発と並行して行うことができます。

この投稿の完全なソースコードは GitHub で見つかります:

さらに進むには:

• ヴァーディン
• Flowとは何ですか?
• ヴァーディンの詳細

2024年10月13日にA Java Geekで最初に公開されました