웹 프레임워크: 미래

최근 라이브 스트림 진행자는 "10년 후에는 React가 내가 선호하는 프레임워크가 아닐 수도 있다"는 흥미로운 생각을 촉발했습니다. 이로 인해 웹 프레임워크의 진화에 대해 고민하게 되었습니다. 몇 가지 잠재적인 방향을 살펴보겠습니다.

구문: HTML과 JSX의 혼합

서버 측 렌더링, CodePen 실험 또는 Tumblr 사용자 정의를 통해 HTML에 익숙한 사용자에게는 친숙한 구문이 중요합니다. 다음을 고려하십시오:

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

이는 HTML의 고유 구조를 향상시키는 Svelte의 접근 방식과 유사합니다. 보다 현대적인 반복은 다음과 같습니다.

<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, <style></style>의 CSS, <script></script>의 JavaScript에 그대로 유지됩니다. 구성 요소 기반의 최신 HTML처럼 느껴집니다. 그러나 웹사이트를 구축하려면 서버측 상호작용이 필요합니다.

JSX를 사용한 서버측 렌더링

웹 서버는 자산을 브라우저에 보내기 전에 데이터베이스 연결, 인증 및 데이터 처리를 처리합니다. 일반적인 서버측 경로는 다음과 같습니다.

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의 로더 및 액션 또는 RSC(React Server Components)와 유사한 시스템을 사용하지만 명시적인 지시문 없이 서버 측 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
}

클라이언트와 서버 로직을 명확하게 분리하면서 코드를 단순화합니다.

결론: 제안이 아닌 비전

이번 탐구는 구체적인 프레임워크 제안이 아니라 사고 실험입니다. 목표는 기존 기술의 장점을 결합하여 향후 10년 동안 더 간단하고 직관적인 개발 경험을 제공하는 프레임워크를 구상하는 것입니다. 웹 프레임워크의 미래에 대해 어떻게 생각하시나요?

위 내용은 웹 프레임워크: 미래의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!