Web フレームワーク: 未来

最近、ライブストリームのホストが、「10 年後には、React は私の頼りになるフレームワークではなくなるかもしれない」という興味深い考えを引き起こしました。これをきっかけに、Web フレームワークの進化について深く考えるようになりました。 いくつかの可能性のある方向性を探ってみましょう。

構文: HTML と JSX のブレンド

サーバーサイドのレンダリング、CodePen の実験、さらには Tumblr のカスタマイズなど、HTML に慣れている人にとっては、使い慣れた構文が重要です。 これを考慮してください:

<h1>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>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> に、JavaScript は <script> に残ります。 コンポーネントベースの最新の HTML のような感じです。ただし、Web サイトの構築にはサーバー側の対話が必要です。

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>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>Hi {user.name}</h1>
      <style>
        h1 {
          font-family: 'Comic Sans MS', cursive;
        }
      </style>
    </div>
  );
}

これは React コンポーネントに似ていますが、完全にサーバー上に存在します。クライアント側の JavaScript は依然として対話性にとって重要です。

両方の長所

Remix のローダーとアクション、または React Server Components (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 のシグナルが有力な候補です:

export function Counter() {
  let count = 0;
  $effect(() => console.log(count));
  function increment() {
    count++;
  }
  return (
    <div>
      <h1>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
}

これにより、クライアントとサーバーのロジックを明確に分離しながら、コードが簡素化されます。

結論: 提案ではなくビジョン

この検討は具体的な枠組みの提案ではなく、思考実験です。 目標は、既存のテクノロジーの最良の側面を融合し、今後 10 年間に向けてよりシンプルで直感的な開発エクスペリエンスを提供するフレームワークを構想することです。 Web フレームワークの将来についてはどう思いますか?

以上がWeb フレームワーク: 未来の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。