VaadinのAbstractJavascriptComponentの部分的な状態の変更

Question

比較的大きなデータセットを表示および更新する必要があるJavaScriptベースのVaadinコンポーネントを実装しています。私はAbstractJavaScriptComponentを拡張してこれをやっています。

私は、RPCを使ってサーバーとユーザーのやりとりを委任し、共有状態を更新するJS側をできるだけ「ダム」に保ちようとしています。 JSコネクタラッパーのonStateChange関数が新しい状態で呼び出されると、それに応じてDOMが更新されます。

私は2つの問題を持っている：

1. 私は小さな部分が更新されるたびにセット全体のデータを転送する必要はありません。
2. 私は毎回UIを完全に再構築したくありません。

私は前の状態を維持し、その部分を比較して何が変更されたかを知り、必要なDOMを変更するだけで解決できます。 しかし、それでも最初の問題が残っています。

私はVaadinの共有状態メカニズムの使用をやめ、その変更を状態に伝達するためにRPCを使用するだけですか？

更新： 私はいくつかのテストを行ってきた、そして確かにVaadinの共有状態メカニズムは、効率の面で恐ろしいであることが表示されます：

コンポーネントがでいくつかのプロパティを更新するためにgetState()を呼び出すたび（または何も更新しなくても）状態オブジェクト全体が転送されます。これを避ける唯一の方法は、共有状態メカニズムを使用せず、RPC呼び出しを使用して特定の状態変更をクライアントに伝えることです。

解決方法RPCのアプローチにはいくつかの問題があります。例えば、1回の要求/応答サイクル内で値を複数回変更する場合は、RPC呼び出しを複数回実行する必要はありません。代わりに、共有状態メカニズムが応答内の最終状態のみを送信するように、最後の値だけを送信するだけです。別々に送信したい（または以前の状態のコピーを保持して比較する）状態の各部分に対して汚れたフラグを保持できますが、要求処理の最後に何らかの方法でRPC呼び出しをトリガする必要があります。これはどうすればできますか？

これに関するアイデアは大歓迎です！

アップデート2：

Vaadin 8つのフィックス根本問題：それだけで変更された状態のプロパティを送信します。また、RPCコールだけを行うとき（そして状態を変更しないとき）、JSコネクタ上でonStateChange()を呼び出すことはありません。

Answer 1

AbstractJavaScriptComponentベースのコンポーネントでは、共有状態の同期が非効率的であることを示す点で正しいです。コネクターがdirtyとマークされると、状態オブジェクト全体がシリアライズされ、JavascriptコネクターのonStateChangeメソッドで使用可能になります。他のjavascript以外のコンポーネントは、変更を送信するだけで状態の更新をよりインテリジェントに処理します。状態更新がAbstractJavaScriptComponentベースのコンポーネントのために異なる方法で処理され、なぜこの問題が発生したコード内の正確な場所は、私はよく分からないcom.vaadin.server.LegacyCommunicationManager.java

boolean supportsDiffState = !JavaScriptConnectorState.class 
      .isAssignableFrom(stateType); 

にライン97です。たぶんそれはjavascriptコネクタを単純化し、完全な状態オブジェクトをデルタからアセンブルする必要性を取り除くことでしょう。これが将来のバージョンで対処できるならば素晴らしいだろう。

あなたが提案したように、JavaScriptComponentStateを完全に排除し、更新のためにserver-> client RPCに依存することができます。サーバー側のコンポーネントに汚れたフラグを保持したり、必要なメカニズムで古い状態と新しい状態を比較したりしてください。

変更を統合し、変更ごとに1つのRPC呼び出しのみを送信するには、サーバー側コンポーネントでbeforeClientResponse(boolean initial)を上書きできます。これは、クライアントに応答を送信する直前に呼び出され、一連のRPC呼び出しを追加してクライアント側コンポーネントを更新する機会です。

また、encodeStateを無効にして、どこにいても自分の好きなJSONをクライアントに送信することができます。 super.encodeSateによって返されたベースJSONオブジェクトに変更のリストを追加することもできます。あなたのjavascriptコネクタは、onStateChangeメソッドで適切に解釈できます。

編集の追加：サーバー側コンポーネントのgetState()を呼び出すと、コネクタが汚れているとマークされます。汚れているとマークしないで状態を取得する場合は、代わりにgetState(false)を使用してください。

Answer 2

Vaadinの共有状態は、すぐに使用できるように機能します。コンポーネントが初めてDOMに追加されると、共有状態全体がサーバーからクライアントに転送され、コンポーネントを表示することができます。その後、変更のみが転送されます。たとえば、component.setCaption("new caption")を呼び出して可視コンポーネントのキャプションを変更すると、Vaadinはその新しいキャプションテキストをクライアントに転送し、それをコンポーネントのクライアント側共有状態インスタンスに「マージ」します。

Answer 3

私たちはこのことについて議論した後、状態デルタを送信するAbstractJavaScriptComponentの代わりにドロップインを作成しました。これにはいくつかの拡張機能が含まれています。それは非常に早い段階にありますが、役に立つはずです。

https://github.com/emuanalytics/vaadin-enhancedjavascript

溶液は一見単純である：com.vaadin.server.LegacyCommunicationManager.javaにコード行をバイパスすることにより、基本的に再有効化状態の差の計算：

boolean supportsDiffState = !JavaScriptConnectorState.class 
     .isAssignableFrom(stateType); 

こと溶液の実装は事実によって複雑になりますVaadinクラスは簡単に拡張されないので、6つのクラスをコピーして再実装する必要がありました。