さぁ、Vaadinをはじめよう(自分が)

なぜ始めるのか

それなりに整ったUIのWebアプリケーションを簡単に作れる…らしい。
コンポーネントを中心とした書き方なので、SwingとかJavaFX(JavaFX、いい奴だったな…)になれてる私には親しみやすそう。
あと、JavaScriptにちょっと疲れたので。

Vaadinって何？

フロントエンド側もJavaで書けるようになる素敵なフレームワーク。
GWT…？知らない子ですね。

この資料がめちゃくちゃわかりやすくて有難い。
全部 Java で作っちゃえ!😁 Vaadin 8 によるオール Java Web アプリ開発の仕組みと実践

こんな感じで業務システムでよく使いそうなコンポーネントがたくさん。
FullCalendarみたいでっかいカレンダーもアドオンであるみたいですね。

https://demo.vaadin.com/sampler/

Vaadin 10 と 8

これを書いている現在、公式に行くとVaadin FlowとVaadin Framework 8という2つがあって何のこっちゃ状態です。
どちらを選べばよいのやら。

Vaadin 10からVaadin FrameworkはVaadin Flowへ

現行バージョンであるVaadin 8までは、Vaadin Frameworkという名前だったが、次期バージョンのVaadin 10からは名称が変わってVaadin Flowという名称になるとのこと。
(それよりずーっと前はまた別の名称だったみたいですね)

この辺に書いてありますね。

Vaadin Flow - the next piece of Vaadin 10 is now in developer preview | Blog | Vaadin

Vaadin FlowとVaadin Framework 8って何が違うの？

この辺の資料を読む限り、開発者からしてみると大きくは変わってないのかな。

Differences between V10 and V8 Applications - Vaadin Flow | Vaadin 10 Docs | Vaadin

これ以外にはこれまでのGWTで作ったコンポーネントをやめて、HTMLとWeb Componentsを使っているとのこと。

リリースとサポート期間

そんなこんなで、絶賛Beta中のVaadin Flowですが、これから勉強しようというときに10と8、どちらを取るべきかと悩みます。
参考までにリリースとサポート期間を見てみました。

Stability in production – Bleeding edge in development | Blog | Vaadin

ここにある通り、Vaadin 10からリリースは3か月ごとに行われる。
んで、2年ごとにLTSのバージョンをリリースしてそのバージョンは5年間サポートするとのこと。
これとは別にVaadin 8も5年間サポートだそうな。
なんか最近Javaでこんな図を見たような…

お勉強の予定

なんだかんだと公式ではVaadin 10押しみたいですが、とありあえず今回はVaadin 8を扱います。
独学では躓いたときに資料が多いほうがいいですからね。

公式のチュートリアルをやる
Vaadin+Spring Bootで簡単なフォームアプリケーションを作る
コンポーネントを一通り使ってみよう
Kotlinで書き直してみよう
サーバにデプロイしてみよう(AWS編)

慣れてるJavaでしばらく使ってそれとなくわかってきたらKotlinで書いていくという進め方。
最後のデプロイ云々はAWSの練習もやりたいので、あんまり関係ないけど寄り道です。

チュートリアル

チュートリアルに沿って進め行きます。 https://vaadin.com/docs/v8/framework/tutorial.html

1.Overview

まずは動かさないと始まらない、環境構築から。
IDEはIntelliJ IDEAかEclipseどちらでも行けそうなんだけど、慣れてるEclipseでやっていきます。
書いてる時点の最新Oracle JDK8u171とJava EE用のEclipse Oxygenをサクッとインストール。
それにしても、いつみても30億のデバイスで走ってんな。

2.Creating a Project from an Archetype

スクリーンキャプチャに加えて、ご丁寧に動画まであるので、特に書くこともないのですが…
Mavenのvaadin-archetype-applicationというアーキタイプでプロジェクトを作成する。
今回は最新の8.4.1で作ります。

諸々ダウンロードとビルドが終わるとUIという抽象クラスを継承したMyUIというクラスができてました。
これが、最初のサンプルというかスタブのようです。
レイアウト用のコンポーネントにテキストフィールドとボタンが追加されていて、ボタンを押すとラベルが表示されるようです。

Button button = new Button("Click Me");
button.addClickListener(e -> {
    layout.addComponent(new Label("Thanks " + name.getValue() + ", it works!"));
});

この辺りはJavaFXなどなどで見慣れた書き方ですね。
ボタンにクリック時のリスナを登録して、クリックされたときに中の処理が実行されるというやつ。

チュートリアル通りにJettyで実行。
おー、動いた。
既にスタイルが適用されているのか、ちょっぴりモダンで素敵な感じ。
f:id:takeda_san:20180508225450p:plain

3.Adding a demo "backend"

サーバサイドのドメイン(とサービス)クラスをコピペする。
このあとのステップの準備ですね。
Eclipseで任意のパッケージにソースコードをペーストすると、.javaファイルが出来るの知らなかった…

4. Listing entities in a Grid

顧客リストを表形式で表示する。
表はGridというコンポーネントを使って表示する。
Gridには任意のモデルのリストを渡してデータを格納する。
grid.setColumns("firstName", "lastName", "email");で格納したカラムと同じ名前のプロパティがデータとして表示される。
今回の例だとモデルのCustomerの3つのプロパティが対応付けられている。

f:id:takeda_san:20180510223113p:plain

デフォルトでソート機能が付いてて素晴らしい。

5. Creating live filtering for entities

テキストフィールドからの入力で表のデータを絞り込めるようにする。
filterText.addValueChangeListener(e -> updateList());でテキストフィールドの変更を検知するリスナーが追加できる。
また、filterText.setValueChangeMode(ValueChangeMode.LAZY);でいつイベントを発生させるかを設定できる。
即時、フォーカスアウト時などバリエーションあり。
今回のLAZYは、一定間隔遅延してイベントが発生する、その時にイベントが既に発生している場合はキャンセルされる。
つまりは、連続してイベントが発生しないようになっているらしい。
入力の変化のたびにサーバとの通信が発生すると負荷がかかるので、このような設定がデフォルトであるのはうれしい。

f:id:takeda_san:20180510230119g:plain

ちょっと遅れてフィルターがかかってるの、わかりますかね。

6. Creating a form to edit Customer objects

顧客情報を入力するフォームを作成する。
このチュートリアルではVaadin DesignerというGUIでレイアウトを作成するツールを使うか、Javaのコードで追加するか選べる。
Vaadin Designerって、JavaFXでいうところのScene Builder的なあれですかね。
(Scene Builder、アイツもいいヤツだったよ…)

Vaadin Designerは、有料のPROかPRIMEじゃないと使えないので今回はJavaのコードで追加しましょう。
PROで月90ドルか…個人だとちょっとお高い。

フォームクラスを作成して、それをメインのUIから呼び出す。

f:id:takeda_san:20180510232408p:plain

日付ピッカーもあるんですねぇ。

7. Connecting the form to the application

さっき追加したフォームを実際に動くようにする。
表が選択されたときにフォーム側にその行の顧客情報を渡すリスナーを追加する。
単一選択の時だけ発火するリスナーとか、賢いな。

grid.asSingleSelect().addValueChangeListener(event -> {
    if (event.getValue() == null) {
        form.setVisible(false);
    } else {
        form.setCustomer(event.getValue());
    }
});

f:id:takeda_san:20180510233205g:plain

感想

業務アプリケーションを作るには、最適なフレームワークじゃなかろうか。
標準のまま使えるクオリティのコンポーネント、クライアントサイド・サーバサイドをあまり意識しないで書けることなどからデザイナーさんなしでプログラマーが数人でサクッと作るようなシステムなら効率よさそう。
というわけで、次からは自分でちょっとしたアプリケーションをつくっていくぞ！

takeda_san’s blog

KotlinとVRを頑張っていく方向。