服务器上带有 react.js 的交互式 Web 应用程序

Question

我正在寻找用于无需编写客户端（浏览器）的交互式实时网络应用程序的网络框架，一切都将由服务器完成。

Phoenix (Elixir/Erlang) 中有这样的框架 - LiveView，请参见下面的演示。 我正在寻找 JavaScript/TypeScript 或 Ruby 中类似的东西。

它是如何工作的，最好通过例子来演示。假设我们已经在 J​​avaScript 中拥有了这样的框架并构建了一个自动完成组件。它看起来几乎像 React.JS，但有很大的不同——它将在服务器上运行：

class Autocomplete extends MagicServerSideReactComponent {
  state = { 
    query:       '',
    suggestions: []
  }

  async search(e) {
    const query = e.target.value

    // This whole component runs on the Server, not in the Browser.
    // So it has full access to the Server infrastructure and Database.
    const suggestions = await db.find(`select like '${query}'`)

    this.setState({ query, suggestions })
  }

  render() {
    return <div>
      <input value={this.state.query} onKeyPress={this.search}/>
      {this.state.suggestions.map((name) => <div>{name}</div>)}
    </div>
  }
}

它是如何工作的：

When rendered first time:

- Autocomplete component get rendered on the Server and final HTML sent 
  to the Browser. 
  The Server remembers the `state` and the Virtual DOM - i.e. it's a 
  statefull Server, not usual Stateless node.js Server.
- Browser gets the HTML and renders it into DOM.

When user type something in the input: 

- Browser serializes the Event and sends it to the Server, 
  something like  `{ method: 'Autocomplete.search', event: '...' }`
- Server get the serialized Event and the previously stored Virtual DOM 
  for the given Web Page.
  Then Server process the Event, and as a result the Virtual DOM 
  on the Server gets updated.
  Then Server finds out the difference between the new and old Virtual DOM 
  and generates the DIFF.
  Then Server sends the DOM DIFF to the Browser
- Browser gets the DOM DIFF and modify its DOM.
  And the user see its Web Page updated with the search suggestions.

您知道任何此类 JavaScript 或 Ruby 中的网络框架吗？

请不要推荐做类似事情的框架——但是你必须手动改变 DOM。 服务器上的虚拟 DOM 很重要，因为它允许自动更新 DOM。它不必与 React.JS 完全一样，但它应该像 React 一样自动更新 DOM。

附：

• 为什么？因为分布式系统的第一定律——“不要构建分布式系统”。 更简单将网络应用程序构建为一体，而不是将其分发到客户端和服务器中。
• 延迟 - 是的，没有什么是免费的，您必须为简单性付出代价，而延迟就是代价。交互将被延迟 - 往返于服务器。
• 性能 - 是的，服务器不再是无状态的，它是有状态的，运行虚拟 DOM 并消耗更多资源。

Answer 1

您可以通过 ebay (https://markojs.com/docs/server-side-rendering/) 查看 marko，但我认为您找不到满足您所有要求的框架/库。

因为分布式系统的第一定律——“不要构建分布式系统”。将 Web 应用程序构建为一体比将其分发到客户端和服务器更简单。

您使用 react 或任何其他单页应用程序框架发送给用户的代码正在定义视图。所以你不应该把它当作一个系统。就是html、css、js+用户数据

服务器上的虚拟 DOM 很重要，因为它允许更新 DOM 自动。

为什么目标是更新 DOM？ DOM 只是您的状态/数据的视图。而您的前端应用程序只是一个从您的状态到 DOM 的映射器/哈希函数。因此，如果您的服务器中只有您的状态，那么您也有自己的 DOM。

如果您不想同时编写服务器和客户端，但仍希望拥有具有数千个开源存储库的精美前端功能，您可以尝试 react + firebase。