私は についてたくさん書いてきました。私はとても熱中していたので、それについての (Book of Vaadin のほかに) と Vaadin 7 用の 、そして 書きました。それでも、JVM の世界でこれほど多くの人が Vaadin について聞いたことがないとは驚きです。 Vaadin 最初の本 更新版 関連 Web サイト を この投稿では、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>  </properties> <dependencyManagement> <dependencies> <dependency> <groupId>com.vaadin</groupId> <artifactId>vaadin-bom</artifactId>  <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>  </dependency> </project> 他のプロパティとともに Vaadin のバージョンを設定します。 すべての依存関係のバージョンを一定に保ちます。  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 } } コンポーネントを Vaadin サーブレット ルートに関連付けます。 サブコンテキスト 静的なページタイトルを設定します。動的なタイトルが必要な場合は、  実装できます。 HasDynamicTitle を   クラスを定義します。 RootComponent   はVaadinがHTML  としてレンダリングするクラスです。 VerticalLayout div  Vaadin Spring Boot スターターがリストの挿入を処理します。  Vaadin は最初のブラウザ要求時に 関数を実行します。 init() 次のコード スニペットはそこに配置されます。 コンポーネントの追加 上記のスニペットでは、Vaadin が提供する である から継承しました。 コンポーネント VerticalLayout  Vaadin デザイン システムには、UI の構築に使用できるコンポーネントのセットが含まれています。コンポーネントには、クライアント側開発用の TypeScript API に加えて、サーバー側 Java API があります。 コンポーネントを使用するには、まずコンポーネントを作成し、それを含むレイアウトに追加します。  --  Vaadin アプリケーションでの UI の作成 一部のコンポーネントは他のコンポーネントを含むことができ、サブコンポーネントをどのようにレイアウトするかを認識しています。たとえば、  コンポーネントを上から下に列に配置し、  コンポーネントを左から右に行に配置します。 VerticalLayout HorizontalLayout レイアウトにコンポーネントを追加するのは簡単です。   add(Label("Hello")) //1 add(Label("world!"))   関数のコンテキスト内。 init() これは完璧に動作しますが、Kotlin を使用しているため、  使用して状況を改善できます。上記のスニペットを次のように書き直すことができます。 Karibu-DSL を   label("Hello") //1 label("world!")     インターフェース上の Karibu DSL 拡張関数です。 label() HasComponent  Karibu は素晴らしいですが、少し欠点があります。API 全体に対する拡張機能が提供されていないのです。たとえば、  コンポーネントにフッターを追加するには、通常の API にフォールバックする必要があります。 Grid   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 } 新しい コンポーネントを値で初期化します。 Checkbox チェックボックスの値が変更されると、ラムダが実行され、基礎となるモデルの値が変更されます。  JavaScript コードは必要ありません。Vaadin が独立してインタラクションを管理します。 結論 この投稿は、AJAX と SSR のコンテキストにおける Vaadin の簡単な紹介にすぎませんでした。  Web アプリでプログラミングを学び、リクエスト/レスポンス モデルに慣れている開発者の多くは、Vaadin に触れると反応が鈍くなります。彼らの主な主張は API がないことです。私の意見では、これは利点です。一部のアプリ、特にビジネス アプリは、専用のモバイル クライアントを開発する必要があるほど進化していません。  Vaadin には、冒頭で述べたように、デフォルトの CSS セットが付属しています。このデフォルトのテーマにより、Vaadin アプリケーションは最初から見栄えがよくなり、ユーザーに快適で視覚的に魅力的な作業環境が提供されます。ただし、いつでも別のテーマを統合したり、独自のテーマを開発したりすることもできます。 しかし、本当のメリットは、やはり組織レベルにあります。紹介記事では、フロントエンドとバックエンドの開発を分離すると、統合時に問題が発生すると述べました。Vaadin ではそのような分離がないため、フロントエンドとバックエンドの間に統合ステップがないため、プロジェクト計画がより予測可能になります。同様に、テーマ設定も開発と並行して行うことができます。 この投稿の完全なソースコードは GitHub で見つかります:   https://github.com/ajavageek/compare-frontends?embedable=true さらに進むには: ヴァーディン Flowとは何ですか? ヴァーディンの詳細 2024年10月13日に で最初に公開されました A Java Geek

Read all my posts!

Read My Stories

Follow @nicolas_frankel on Twitter

このオーディオは、ストーリーの元の言語で制作されています。

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

About Author

コメント

ラベル

この記事は

Related Stories

デジタルノマドの皆さん、タイの新しい DTV ビザについて知っておくべきこと

フォーラムからフィードへ: ソーシャルメディアアルゴリズムがデジタルインタラクションを形作る仕組み

タップして稼ぐ：テレグラムはソラナより先に次の100億人の暗号通貨ユーザーを獲得する可能性がある

クラウド移行を成功させるための完全ガイド: 戦略とベストプラクティス

デジタルノマドの皆さん、タイの新しい DTV ビザについて知っておくべきこと

フォーラムからフィードへ: ソーシャルメディアアルゴリズムがデジタルインタラクションを形作る仕組み

タップして稼ぐ：テレグラムはソラナより先に次の100億人の暗号通貨ユーザーを獲得する可能性がある

クラウド移行を成功させるための完全ガイド: 戦略とベストプラクティス

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps