gwt格式_活性GWT

gwt格式

介绍

在过去的4到5年中，React式编程的普及程度得到了极大的提高。 这可以告诉我们，React性应用程序的用例现在比以往任何时候都有效。 后端系统上的压力已经增加，因此需要用最少的资源来处理这种压力。 响应式编程被认为是在减少资源消耗的同时提高效率和吞吐量的一种方法。 React式编程的流行导致了大多数编程语言和平台的React式扩展的发展：GWT也不例外。 在这篇文章中，我们将提供rxjava-gwt的用法示例，它是GWT的React式扩展。

关于rxjava-gwt

rxjava-gwt是RxJava对GWT的改编，而不是某些人可能认为的RxJ的包装器。 根据项目创建者Ignacio Baca的说法，将RxJava适配到GWT比包装RxJ更有用，尤其是如果Rx代码在客户端和服务器之间共享时，因为在此行为是完全一样的。 同样，这引入了共享自定义运算符或Rx合成的可能性。

用例

从后端的角度来看，React式编程被视为提高效率和吞吐量，以最小的资源消耗实现请求的方法，但是前端呢？ 好吧，我们知道JavaScript本质上是异步的，并且回调/ Promises的用法很常见，那么React性又要添加什么呢？ 首先，如果应用程序正在调用外部数据源（例如HTTP请求，Websocket，服务器发送的事件），则可以通过将这些源转换为流并在数据涌入时做出React，而不是等待数据的完整性，从而使应用程序更具响应性可用。 其次，如果要执行的操作很常见，则React式编程可以帮助将多个事件源组合到一个主流中。

例

假设我们要为著名的curl库创建一个简单的UI。 我们希望有三个字段（url，方法和主体数据），并且希望在键入时生成curl命令。 引入React式编程似乎是一个很好的用例，因为我们有多个事件源需要相同的处理。 使用传统的编程模式，我们将必须对每个事件处理程序执行相同的操作。

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开发人员打开了React世界的大门。 我们已经看到一些使React式编程有用的用例，因此GWT开发人员应该在他们的应用中尝试在其应用程序中使用React式模型。

• 源代码： 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

gwt格式