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

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

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

它是如何工作的，最好用例子来说明。让我们想象一下，我们已经在JavaScript中有了这样的框架，并构建了一个自动完成组件。它看起来几乎像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>
  }
}

你知道JavaScript或Ruby中有这样的web框架吗

请不要建议使用这样做的框架，但必须手动修改DOM服务器上的虚拟DOM非常重要，因为它允许自动更新DOM。它不必与React.JS完全相同，但它应该像React一样自动更新DOM

附言

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

---

您可以通过易趣（）查看marko，但我认为您无法找到满足所有需求的框架/库

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

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

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

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

---

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

你在网上搜索过“服务器端虚拟DOM”吗？那么

ReactDOMServer

呢？为什么它不符合你的需要？太好了！需要尝试一下。）@Aurélien据我所知，

ReactDOMServer

做了不同的事情——它将react呈现为静态DOM，通常用于初始页面加载。它不处理交互性。@AlexeyPetrushin我自己不熟悉

ReactDomServer

，但似乎您可以

hydrome

一个组件，以便服务器呈现的HTML链接到服务器端状态。您可以使用checkout，它深受Phoenix Liveview的启发，但使用Typescript实现（您也可以将其与javascript一起使用）。它还没有投入生产，我正在用pre-v2 branch重新编写，以获得更模块化和更灵活的结构。谢谢，但是

marko

server rendering只完成了一半，它只呈现页面的初始状态。它不处理交互性。

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.