Vuecketのご紹介

ロシアのバージョン

Vuecketは、統合WebフレームワークであるVueJSをクライアント側とのApache Wicketのサーバー側で。両方の長所を活用し、フルスタックアプリケーションの開発をさらに迅速かつ簡単にします。もちろん、Vuecketは現在（2020年8月）1か月未満であり、「火と血」の生産サーバーのバプテスマをまだ通過していないため、これらはすべて大きな言葉です。しかし、主要なオープンソース製品であるOrienteer（ビジネスアプリケーションの迅速な開発のためのプラットフォーム）の開発中に開発したすべての最高のものがすでに含まれています。そして、Vuecketがあなたの助けを必要としているのは、まさにその若い年齢のためです。あなたが好きなもの、あまり良くないもの、改善が必要な場所などを共有してください。



Vuecketを構築する際の基本原則は次のとおりです。

1. 宣言的であることは必須ではありません。Vuecketは、特別なコード要件を規定していません。これは、既存のVue.JSまたはApacheWicketプロジェクトにかなり迅速かつ簡単に適用できます。
2. パレートの原則に従ってください。Vuecketは、箱から出して必要な機能の80％を提供する必要がありますが、残りの20％には優れた便利な拡張ポイントが必要です。

これらの原則がVue.JSとApacheWicketにも適用されることは容易に理解できます。



では、Vuecketをどの程度正確に使い始めるのでしょうか。Markdownをサポートするチャット/ゲストボードを作成することをお勧めします。私はあまり苦しめません：完成したアプリケーションはここにあり、コードはここにあります。

プロジェクトを作成します

`mvn archetype：generate`を使用してプロジェクトを生成しましょう。これを行うには、たとえば、次のコマンドを使用できます。

mvn archetype:generate -DarchetypeGroupId=org.apache.wicket -DarchetypeArtifactId=wicket-archetype-quickstart -DarchetypeVersion=8.9.0 -DgroupId=com.mycompany -DartifactId=mychat -DarchetypeRepository=https://repository.apache.org/ -DinteractiveMode=false

Vuecketにはまだ独自のMavenプロジェクトテンプレートがありません。おそらく将来的にはこれも追加する予定です。それでは、Vuecket自体を接続しましょう。次の依存関係をプロジェクト `pom.xml`に追加します。

<dependency>
	<groupId>org.orienteer.vuecket</groupId>
	<artifactId>vuecket</artifactId>
	<version>1.0-SNAPSHOT</version>
</dependency>

マークダウンでのテキストの出力

Wicketプロジェクトには、デフォルトでWicketウェルカムページがすでに含まれています。Vuecketがすでに機能していることを確認するために、いくつかのコードを追加しましょう。たとえば、Hello WorldをMarkdownに表示して、テキスト自体がApacheWicketコンポーネントのサーバー側に設定されるようにします。vue-markdownライブラリを使用してMarkdownをレンダリングします。



HomePage.htmlで、Wicketグリーティングの代わりに、次を追加します。

<div wicket:id="app">
	<vue-markdown wicket:id="markdown">This will be replaced</vue-markdown>
</div>

そしてHomePage.javaで次のコード：

public HomePage(final PageParameters parameters) {
	super(parameters);
	add(new VueComponent<String>("app")
			.add(new VueMarkdown("markdown", "# Hello World from Vuecket")));
}

しかし、VueMarkdownクラスはどこにありますか？そして、それを次のように定義します。

@VueNpm(packageName = "vue-markdown", path = "dist/vue-markdown.js", enablement = "Vue.use(VueMarkdown)")
public class VueMarkdown extends Label {
	public VueMarkdown(String id) {
		super(id);
	}
	public VueMarkdown(String id, Serializable label) {
		super(id, label);
	}
}

@VueNpmアノテーションに注意してください。このWicketコンポーネントでVuecketを有効にする必要があります。これにより、NPMから必要なすべてが読み込まれ、ブラウザーがすでにVueコンポーネントをMarkdown用に正しくレンダリングできるようになります。





では、ここで何が起こったのでしょうか。なぜそれが機能するのでしょうか。

• アプリケーション用とマークダウン出力用の2つのVueコンポーネントをページに追加して、ページをマークアップしました。
• サーバー側（HomePage.java内）でVueコンポーネントとWicketコンポーネントをバンドルしました
• どのVue.JSライブラリをレンダリングする必要があるかをVuecketに伝えました 'vue-markdown'
• そして、すべてが簡単です。Wicketは、ページをブラウザにレンダリングするときに、Wicketコンポーネントを追加するときに設定した「#Hello World from Vuecket」という行を使用し、Vuecketは、ブラウザが必要なVueJSライブラリをロードし、VueJSアプリケーションを起動し、レンダリングされたマークダウンとしてすでに挨拶をレンダリングするのに役立ちました。

Githubは支援を約束します

メッセージを入力してプレビューする

このステップでは、アプリケーションを複雑にします。メッセージを入力してプレビューします。

メッセージを入力するためのtextareaをHomePage.htmlに追加し、このフィールドとvue-markdownをVueJS変数「text」にバインドしてみましょう。

<div wicket:id="app">
	<textarea v-model="text" style="width:100%" rows="5"></textarea>
	<vue-markdown wicket:id="markdown" :source="text">Will be replaced</vue-markdown>
</div>

すでに「text」変数を使用していますが、データVueコンポーネントに追加する必要があります。Vuecketでこれを行うにはいくつかの方法がありますが、最も長く行きましょう。

• Vueアプリケーション用に独自のVueComponentを作成する
• * .vueファイルに関連付けましょう
• * .vueファイルにロジックを記述しましょう。現時点では、「テキスト」フィールドのみです。

行う変更の一部を次に示します。

//HomePage.java:
public HomePage(final PageParameters parameters) {
	super(parameters);
	add(new ChatApp("app")
			.add(new VueMarkdown("markdown")));
}
//ChatApp.java:
@VueFile("ChatApp.vue")
public class ChatApp extends VueComponent<Void> {
	public ChatApp(String id) {
		super(id);
	}
}

さて、ChatApp.vue自体：

<script>
module.exports = {
    data: function() {
        return {
            text : ""
        }
    }
}
</script>

この章では、次の方法を学習しました。使い慣れた* .vueファイルを作成し、それらをApacheWicketコンポーネントに関連付ける



GitHubコミット

メッセージのリストを表示し、新しいメッセージを追加します

この章では、VuecketまたはWicketに固有のものはありません。純粋なVueJSが輝いています。

タスクを分解する場合は、次のことを行う必要があります。

• メッセージを保存するには、Vueアプリケーションにリストボックスを追加します
• リストに新しいメッセージを追加するメソッドを追加します
• メッセージのリストを表示し、マークダウンを忘れないでください

まず、ChatApp.vueを変更して、必要なロジックを追加しましょう。メッセージのリストを含む新しいフィールド `messages`と、新しいメッセージを追加するための` addMessage`メソッドです。また、リストにメッセージを追加するときは、元の入力フィールドをクリアすることをお勧めします。メッセージの場合、テキストだけでなく、追加/送信の日付も保存します。将来的には、このメッセージの送信者、優先度、必要な強調表示などの追加フィールドで拡張できるようになります。

<script>
module.exports = {
    data: function() {
        return {
            text : "",
            messages: []
        }
    },
    methods: {
    	addMessage : function() {
    		this.messages.push({
    			message: this.text,
    			date: new Date()
    		});
    		this.text = "";
    	}
    }
}
</script>

また、HomePage.htmlを変更し、メッセージのリストの表示を追加し、Ctrl-Enterを押したときにaddMessageメソッドへの呼び出しを追加します。

<div wicket:id="app">
	<div v-for="(m, index) in messages">
		<h5>{{ index }}: {{ m.date }}</h5>
		<vue-markdown :source="m.message"></vue-markdown>
	</div>
	<textarea v-model="text" 
			  style="width:100%" 
			  rows="5" 
			  @keyup.ctrl.enter="addMessage"
			  placeholder="Enter message and Ctrl-Enter to add the message">
	 </textarea>
	<vue-markdown wicket:id="markdown" :source="text">Will be replaced</vue-markdown>
</div>

この章では、VueJSを使用してリストにメッセージを追加し、後者を表示するアプリケーションについてのみ説明しました。



GitHubは支援を約束します

コラボレーションをオンにする

それ以前にゲストブックのコンテンツがページの訪問者ごとに一意であった場合、この章ではサーバーとの通信を有効にし、すべての訪問者との同期を可能にします。このためには、ブラウザ側のオブジェクトをサーバー側のオブジェクトと同期できるソリューションであるVuecket DataFibersが必要です。そして最も興味深いのは、クライアント側でこれのために何もする必要がないということです！かっこいいね？コードを行こう！ただし... ChatApp.javaコンポーネントには2つの新しい行しかありません。

private static final IModel<List<JsonNode>> MESSAGES = Model.ofList(new ArrayList<JsonNode>());

public ChatApp(String id) {
	super(id);
	addDataFiber("messages", MESSAGES, true, true, true);
}

ここで何が起こったのか：

• 静的ファイナルとして作成されるため、誰でも利用できるMESSAGESモデルを作成しました。
• クライアント側のメッセージオブジェクトとサーバー側のMESSAGESモデル内のオブジェクトをバインドするデータファイバーを追加しました。
• , data-fiber 3 : load, observe, refresh. Load — , Observe — , Refresh — .

GitHub commit

前の章では、すべてのサイト訪問者にメッセージコレクションへの読み取り/書き込みアクセスを一度に許可することで少しだましました。これを行うことは強くお勧めしません。これは、データファイバーを介して、送信者がサーバー上のすべてのメッセージを自分のメッセージで上書きしたり、消去したりできるためです。データファイバーは、カスタムのブラウザー側オブジェクトを同じユーザーに属するサーバー側のデータオブジェクトにリンクするためにのみ使用する必要があります。これは、静的なモデルやデータがないことを意味します。



どうすれば状況を修正できますか？このために私達はしなければなりません：

• データファイバーを捨てます。これは全面的に機能し、メッセージリストの初期ロードにのみ使用します。
• リストに新しいメッセージを追加するサーバー側の方法を使用します。

したがって、誰もが一般リストに新しいメッセージを追加することしかできませんが、既存のメッセージを削除したり変更したりすることはできません。サーバー側も少し複雑にしましょう。クライアントから受信したJSONだけでなく、必要なフィールドやメソッドなどを含む特殊なメッセージクラスも保存します。サーバー側でデータを処理します。



ユーザーメッセージを保存するためのMessageクラスから始めましょう。ちなみに、これはデータをデータベースに保存できるJPAクラスの可能性があります。

public class Message implements IClusterable {
	@JsonProperty("message")
	private String text;
	private Date date;
	
	public String getText() {
		return text;
	}
	public void setText(String text) {
		this.text = text;
	}
	public Date getDate() {
		return date;
	}
	public void setDate(Date date) {
		this.date = date;
	}	
}

@JsonPropertyに注意してください。したがって、JSONフィールド「message」をJavaフィールド「text」にリダイレクトしました。



次に、ChatApp.javaを変更して、上記の操作を実行します。メッセージを保存するためのvuecketメソッドを追加します。また、コードでは、メッセージのリストが20にカットされていることがわかります（Habrユーザーは非常に熱心です）が、メッセージを削除しても、サーバーログに永久に保存されます。

@VueFile("ChatApp.vue")
public class ChatApp extends VueComponent<Void> {
	
	private static final Logger LOG = LoggerFactory.getLogger(ChatApp.class);
	private static final int MAX_SIZE = 20;
	private static final IModel<List<Message>> MESSAGES = Model.ofList(new ArrayList<Message>());

	public ChatApp(String id) {
		super(id);
		addDataFiber("messages", MESSAGES, true, false, false);
	}
	
	@VueMethod
	public synchronized void addMessage(Context ctx, Message message) {
		List<Message> list = MESSAGES.getObject();
		list.add(message);
		trimToSize(list, MAX_SIZE);
		IVuecketMethod.pushDataPatch(ctx, "messages", list);
	}
	
	private void trimToSize(List<Message> list, int size) {
		//It's OK to delete one by one because in most of cases we will delete just one record
		while(list.size()>size) LOG.info("Bay-bay message: {}", list.remove(0));
	}
}

@VueMethodアノテーションメソッドを参照してください？その中で、新しいメッセージを受け取り、それをリストに保存し、切り取り、すでに更新されたリストをクライアントに送信します。また、Vueアプリケーションの起動時にのみデータを要求するようにデータファイバーが再構成されていることにも注意してください。



また、ChatApp.vueのロジックを変更して、ローカルの「メッセージ」フィールドの代わりに、非同期モード（vcInvoke）でサーバーに新しいメッセージを送信する必要があります。

module.exports = {
    data: function() {
        return {
            text : "",
            messages: []
        }
    },
    methods: {
    	addMessage : function() {
    		this.vcInvoke("addMessage", {
    			message: this.text,
    			date: new Date()
    		});
    		this.text = "";
    	}
    }
}

この章から学んだこと：

• Vuecketのサーバー側メソッドを作成する方法
• ブラウザからサーバー上のメソッドを呼び出す方法
• 必要な変更をクライアントに送信する方法

GitHubは支援を約束します

結論

今日はこれで締めくくります。コードに加えることができる改善点は他にもたくさんありますが、読者の皆様、お任せします。あなたが助けを必要とするならば、書いてください、私たちは助けます！



あなたはフレームワークが好きですか？ご意見をお聞かせください。結局のところ、オープンソースは生きて発展しているというのはあなたの意見です。