活性GWT
介紹
在過去的4到5年中,反應式編程的普及程度得到了極大的提高。 這可以告訴我們,反應性應用程序的用例現在比以往任何時候都有效。 后端系統上的壓力增加了,因此需要用最少的資源來處理這種壓力。 響應式編程被認為是在減少資源消耗的同時提高效率和吞吐量的一種方法。 反應式編程的流行導致大多數編程語言和平臺的反應式擴展的發展:GWT也不例外。 在這篇文章中,我們將提供rxjava-gwt的用法示例,它是GWT的反應性擴展。
關于rxjava-gwt
rxjava-gwt是RxJava對GWT的改編,而不是某些人可能認為的RxJ的包裝器。 根據項目創建者Ignacio Baca的說法,將RxJava適配到GWT比包裝RxJ更有用,尤其是如果Rx代碼在客戶端和服務器之間共享時,因為在此行為是完全一樣的。 同樣,這引入了共享自定義運算符或Rx合成的可能性。
用例
從后端的角度來看,反應式編程被視為提高效率和吞吐量,以最小的資源消耗實現請求的方法,但是前端呢? 好吧,我們知道JavaScript本質上是異步的,并且回調/ Promises的用法很常見,那么反應性又要添加什么呢? 首先,如果應用程序正在調用外部數據源(例如HTTP請求,Websocket,服務器發送的事件),則可以通過將這些源轉換為流并在數據涌入時做出反應,而不是等待數據的完整性,從而使應用程序更具響應性可用。 其次,如果要執行的操作很常見,則反應式編程可以幫助將多個事件源組合到一個主流中。
例
假設我們要為著名的curl庫創建一個簡單的UI。 我們希望有三個字段(url,方法和主體數據),并且希望在鍵入時生成curl命令。 這看起來像是引入反應式編程的好用例,因為我們有多個事件源需要相同類型的處理。 使用傳統的編程模式,我們將必須對每個事件處理程序執行相同的操作。
HTML
<div class="form-container"><label for="url">URL:</label><input id="url" type="text"></input><label for="method">Method: </label><select id="method"><option selected value="GET">GET</option><option value="POST">POST</option><option value="PUT">PUT</option><option value="DELETE">DELETE</option><option value="PATCH">PATCH</option><option value="HEAD">HEAD</option><option value="OPTIONS">OPTIONS</option><option value="CONNECT">CONNECT</option><option value="TRACE">TRACE</option></select><label for="data">Data: </label><textarea id="data"></textarea><div id="result">curl <span id="generatedCommand"></span></div></div>碼
HTMLInputElement urlInput = (HTMLInputElement) DomGlobal.document.getElementById("url");HTMLSelectElement methodInput = (HTMLSelectElement) DomGlobal.document.getElementById("method");HTMLTextAreaElement dataInput = (HTMLTextAreaElement) DomGlobal.document.getElementById("data");HTMLElement generatedCommand = (HTMLElement) DomGlobal.document.getElementById("generatedCommand");final String[] commands = new String[3];Observable urlStream = Observable.create((emitter) -> {urlInput.onkeyup = (event) -> {HTMLInputElement urlInputTarget = (HTMLInputElement) event.target;emitter.onNext(new Command(2, urlInputTarget.value));return null;};});Observable methodStream = Observable.create((emitter) -> {methodInput.onchange = (event) -> {HTMLSelectElement methodSelect = (HTMLSelectElement) event.target;emitter.onNext(new Command(1, "-X"+methodSelect.value));return null;};});Observable dataStream = Observable.create((emitter) -> {dataInput.onkeyup = (event) -> {HTMLTextAreaElement dataInputTarget = (HTMLTextAreaElement) event.target;emitter.onNext(new Command(3, "-d '"+dataInputTarget.value+"'"));return null;};});Observable.merge(urlStream, methodStream, dataStream).subscribe((obs) -> {commands[obs.position - 1] = obs.value;generatedCommand.textContent = String.join(" ", Stream.of(commands).filter(Objects::nonNull).collect(Collectors.toList()));});} }結論
rxjava-gwt為GWT開發人員打開了反應世界的大門。 我們已經看到了一些使反應式編程有意義的用例,因此GWT開發人員應該在他們的應用中嘗試在其應用程序中嘗試反應式模型。
- 源代碼: https : //github.com/zak905/reactive-gwt
其他例子
- 蛇游戲: https : //github.com/ibaca/rxsnake-gwt
- 經典突破游戲: https : //github.com/ibaca/rxbreakout-gwt
- 繪畫應用程序: https : //github.com/ibaca/rxcanvas-gwt
翻譯自: https://www.javacodegeeks.com/2018/05/reactive-gwt.html
總結
- 上一篇: 《漫威复仇者联盟》终极版 Steam 史
- 下一篇: Python游戏工具包---Pygame