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中文網其他相關文章！