我們正在探索各種方法，以協助開發人員建立豐富、現代化的前端，使其能輕鬆地與 Spring 後端整合。如果您今年參加了 SpringOne，您已經看過我們正在進行的一些工作

1. Spring Data REST 中的 Hypermedia 支援，由 Greg Turnquist、Oliver Gierke 和 Roy Clarkson 演示
2. RaveJS：JavaScript 應用程式的 Spring Boot 概念，作者 John Hann
3. 差異同步與 JSON Patch，作者 Craig Walls 和我

簡而言之，我們希望讓 Spring 後端和用戶端之間能夠輕鬆且有效率地溝通，並輕鬆整合最佳和最受歡迎的用戶端技術。

React + 串流更新

JSON Patch 是一種用於傳送結構化資料增量變更的格式。我認為嘗試透過 STOMP 將 JSON Patch 格式的串流更新一路傳送到 Web UI 會很有趣。

Craig Walls 已經建立了一個簡單的 足球比分概念驗證，使用新的 Spring Sync 專案，透過 STOMP 使用 JSON Patch 將比分更新推送到瀏覽器。我能夠採用他的 POC，加入 RaveJS，新增用戶端反應式串流，並將更新整合到 React UI 元件中。

您可以在我的 rave-most-react 分支中的 github 上找到完整的程式碼。伺服器與 Craig 的原始版本相同。 Web 用戶端是重點所在。在我們深入探討一些細節之前，請先查看 main.js 以全面了解應用程式。

開始使用

我使用 RaveJS 和 npm 來管理我的用戶端相依性，所以我的啟動很簡單

> cd src/main/resources/public

> npm init

<answer a few questions>

> npm install --save rave most jiff react rave-load-jsx rave-node-process stompjs

然後我只需要在現有的 HTML 中加入一個 script 標籤，就可以開始編碼了！

<script src="node_modules/rave/rave.js"></script>

介紹 most.js

感謝 Craig，我已經有一個更新串流（JSON Patch 格式）透過 STOMP 流向用戶端。我認為使用修補程式串流最好的方法是（驚喜！）實際使用串流。

Most.js 是 cujoJS 的新 JavaScript 反應式串流套件。它提供了一組小巧但功能強大的 API，用於建立、轉換和使用事件串流。我使用它來封裝 stompjs API。

事實證明，有兩個 STOMP 訂閱：一個攜帶所有比分資料的初始完整副本，另一個攜帶所有後續變更。我能夠將這兩個訂閱封裝成一個單一的反應式串流，表示「最新的比分集」，方法是使用 jiff.js 在 JSON Patch 到達時套用它們。

這段程式碼從 STOMP 訂閱建立初始資料的串流，取得第一個事件（所有比分的完整快照），並將其與第二個僅包含 JSON Patch 更新的串流組合起來，以產生隨時間變化的比分檢視。

function getScoresStream(initDestination, updateDestination, client) {
	// Create a stream containing one full copy of the data, and
	// flatMap that to a stream containing the time-varying
	// current set of scores, by accumulating each patch
	// and emitting the updated scores data.
	return getInitialDataStream(initDestination, client)
		.flatMap(function(data) {
			return getUpdatesStream(updateDestination, client, data);
		});
}

function getInitialDataStream (initDestination, client) {
	// Await a copy of the data from the STOMP subscription
	// that is sending the full scores data, then unsubscribe.
	return streamFromStompJson(initDestination, client)
		.take(1);
}

function getUpdatesStream (updateDestination, client, data) {
	// Incrementally accumulate patches from the STOMP subscription
	// that is carrying JSON Patches onto the scores data to produce
	// an updated view of the scores.
	return streamFromStompJson(updateDestination, client)
		.startWith([])
		.scan(updateWithJsonPatch, data);
}

Most.js 也會在串流結束時自動清理底層資源。很容易安排在完整比分資料的初始副本到達後，取消訂閱第一個訂閱，只留下一個訂閱：變更。

使用 React 製作 UI

現在我有一個表示最新比分的單一 most.js 串流，我建立了一個 React 元件來顯示它們。我安裝了（見上文）rave-load-jsx 擴充功能，這是一個由社群成員建立的 RaveJS 擴充功能，它可以在 RaveJS 中直接載入 JSX 元件。我所要做的就是建立一個 Scoreboard.jsx 檔案，並開始編碼一個簡單的 React 記分板元件。

React 元件有一個內部 state 物件，其中包含將用於呈現元件的資料。我所需要做的就是在建立元件時傳遞最新的比分串流，然後讓元件觀察串流並更新其 state。相關的程式碼只有幾行

// this.props.scores is the scores stream provided when the
// Scoreboard component is created

this.props.scores.observe(function(scores) {
	self.setState({ scores: scores });
});

React 負責自動保持 DOM 與 state 同步。

從位元到像素

誠然，這是一個玩具應用程式。然而，它展示了許多強大的概念在非常小的空間內協同工作，且程式碼量非常少：小的伺服器產生差異透過 STOMP + WebSocket 流動到用戶端，用戶端上的反應式串流由 React 元件觀察。變更從 Spring 後端流向 UI——正如所謂的從位元到像素。

我希望這個小小的應用程式也能讓您一窺我們前進的方向。我們希望提供工具和用戶端套件，以協助開發人員建構豐富、現代化的用戶端應用程式，使其能與領先的用戶端技術和 Spring 後端整合。