Rangka Kerja Web: Masa Depan

Baru-baru ini, hos strim langsung mencetuskan pemikiran yang menarik: "Dalam sedekad, React mungkin bukan rangka kerja pilihan saya." Ini membuatkan saya terfikir tentang evolusi rangka kerja web. Mari terokai beberapa arah yang berpotensi.

Sintaks: Gabungan HTML dan JSX

Bagi mereka yang biasa dengan HTML, sama ada melalui pemaparan sebelah pelayan, percubaan CodePen atau juga penyesuaian Tumblr, sintaks yang biasa adalah penting. Pertimbangkan ini:

<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>

Ini menyerupai pendekatan Svelte, mempertingkatkan struktur sedia ada HTML. Lelaran yang lebih moden mungkin kelihatan seperti:

<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>

Markup kekal dalam HTML, CSS dalam <style></style> dan JavaScript dalam <script></script>. Rasanya seperti HTML moden berasaskan komponen. Walau bagaimanapun, membina tapak web memerlukan interaksi sebelah pelayan.

Rendering Sebelah Pelayan dengan JSX

Pelayan web mengendalikan sambungan pangkalan data, pengesahan dan pemprosesan data sebelum menghantar aset ke penyemak imbas. Laluan sisi pelayan biasa mungkin kelihatan seperti:

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>
  `;
});

Menggunakan JSX untuk halaman yang diberikan pelayan masuk akal intuitif:

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>
  );
}

Ini menyerupai komponen React tetapi berada sepenuhnya pada pelayan. JavaScript pihak pelanggan kekal penting untuk interaktiviti.

Yang Terbaik dari Kedua-dua Dunia

Mari gabungkan JSX bahagian pelayan dengan interaktiviti pihak klien menggunakan sistem yang serupa dengan pemuat dan tindakan Remix, atau Komponen Pelayan Bertindak balas (RSC), tetapi tanpa arahan yang jelas.

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>
  );
}

Rangka kerja akan secara bijak mengenal pasti updateCount sebagai panggilan RPC berdasarkan konteksnya.

Kereaktifan: Isyarat untuk Kelajuan

Sistem kereaktifan yang ringan dan pantas adalah penting. Isyarat Svelte ialah calon yang kuat:

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>
  );
}

Pengambilan Data: Tindakan Pelayan Tersirat

Daripada arahan eksplisit seperti 'use server', kami boleh memanfaatkan ciri bahasa. Bayangkan kata kunci seperti action untuk menetapkan fungsi untuk pemprosesan bahagian pelayan:

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

Ini memudahkan kod sambil mengekalkan pemisahan yang jelas bagi logik klien dan pelayan.

Kesimpulan: Visi, Bukan Cadangan

Penerokaan ini bukan cadangan rangka kerja konkrit, tetapi percubaan pemikiran. Matlamatnya adalah untuk membayangkan rangka kerja yang menggabungkan aspek terbaik teknologi sedia ada, menawarkan pengalaman pembangunan yang lebih mudah dan intuitif untuk dekad yang akan datang. Apakah pendapat anda tentang masa depan rangka kerja web?

Atas ialah kandungan terperinci Rangka Kerja Web: Masa Depan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!