活性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()));});}
}