Web 框架：未来

最近，一位直播主引发了一个有趣的想法：“十年后，React 可能不再是我的首选框架。”这让我开始思考 Web 框架的演变。 让我们探索一些潜在的方向。

语法：HTML 和 JSX 的混合

对于熟悉 HTML 的人来说，无论是通过服务器端渲染、CodePen 实验，甚至 Tumblr 定制，熟悉的语法都是关键。 考虑一下：

<h1 id="Counter">Counter</h1>
<p>Count is 0</p>
<button onclick="increment()">Increment</button>

<style>
  h1 {
    color: red;
    font-family: 'Comic Sans MS', cursive;
  }
</style>

<script>
  const p = document.querySelector('p');
  let count = 0;
  function increment() {
    count++;
    p.textContent = `Count is ${count}`;
  }
</script>

这类似于 Svelte 的方法，增强了 HTML 的固有结构。 更现代的迭代可能如下所示：

<script>
  let count = 0;
  function increment() {
    count++;
  }
</script>

<h1 id="Counter">Counter</h1>
<p>Count is {count}</p>
<button on:click={increment}>Increment</button>

<style>
  h1 {
    color: red;
    font-family: 'Comic Sans MS', cursive;
  }
</style>

标记保留在 HTML 中，CSS 保留在 <style></style> 中，JavaScript 保留在 <script></script> 中。 感觉就像基于组件的现代 HTML。然而，建立网站需要服务器端交互。

使用 JSX 进行服务器端渲染

Web 服务器在将资产发送到浏览器之前处理数据库连接、身份验证和数据处理。 典型的服务器端路由可能如下所示：

app.get('/', async (req, res) => {
  const user = await db.getUser(req.body);
  if (!user.isAuthenticated) return res.status(401);
  return res.html`
    <title>My Website</title>
    <h1 id="Hello-user-name">Hello ${user.name}</h1>
  `;
});

将 JSX 用于服务器渲染页面具有直观意义：

export async function ProfilePage() {
  const user = await getSession();
  if (!user) throw redirect('/login');
  return (
    <div>
      <img alt={user.name} src={user.profileUrl} />
      <h1 id="Hi-user-name">Hi {user.name}</h1>
      <style>
        h1 {
          font-family: 'Comic Sans MS', cursive;
        }
      </style>
    </div>
  );
}

这类似于 React 组件，但完全驻留在服务器上。客户端 JavaScript 对于交互性仍然至关重要。

两全其美

让我们使用类似于 Remix 的加载器和操作或 React 服务器组件 (RSC) 的系统将服务器端 JSX 与客户端交互性结合起来，但没有显式指令。

export async function CounterPage() {
  let initialValue = await db.getCount();

  async function updateCount(formData) {
    let count = +formData.get('count');
    await db.updateCount(count);
  }

  return (
    <div>
      <script>
        let count = {initialValue};
        function update(e) {
          count = e.target.value;
        }
      </script>
      <p>Count is {count}</p>
      <input type="number" value={count} onchange={update} />
      <button onclick={() => updateCount({count})}>Save</button>
      <style>
        p {
          font-family: 'Comic Sans MS', cursive;
        }
      </style>
    </div>
  );
}

框架会根据其上下文智能地将 updateCount 识别为 RPC 调用。

反应性：速度信号

轻量级、快速反应的系统至关重要。 Svelte 的 Signals 是一个强有力的候选者：

export function Counter() {
  let count = 0;
  $effect(() => console.log(count));
  function increment() {
    count++;
  }
  return (
    <div>
      <h1 id="Count-is-count">Count is {count}</h1>
      <button onclick={increment}>Increment</button>
    </div>
  );
}

数据获取：隐式服务器操作

我们可以利用语言功能，而不是像 'use server' 这样的显式指令。 想象一下像 action 这样的关键字来指定服务器端处理的函数：

export async component Counter() {
  let initialValue = await db.getCount();
  async action updateCount(formData) {
    await db.updateCount(+formData.get('count'));
  }
  // ... rest of the component
}

这简化了代码，同时保持客户端和服务器逻辑的清晰分离。

结论：愿景，而非建议

这种探索不是一个具体的框架建议，而是一个思想实验。 我们的目标是设想一个融合现有技术最佳方面的框架，为未来十年提供更简单、更直观的开发体验。 您对 Web 框架的未来有何看法？

以上是Web 框架：未来的详细内容。更多信息请关注PHP中文网其他相关文章！