100% Re:Architect facebook.com 已準備就緒

由上年 2019 R8 公佈咗用 Relay + GraphQL 重寫，到 2020 年 3 月，一個 100% Re:Architect React Relay Driven 嘅 Facebook.com 終於係美國率先上線！

過程中用上大量 <Suspense> Component，可以睇睇個用法：

const resource = fetchProfileData();

function ProfilePage() {
  return (
    <Suspense fallback={<h1>Loading profile...</h1>}>
      <ProfileDetails />
      <Suspense fallback={<h1>Loading posts...</h1>}>
        <ProfileTimeline />
      </Suspense>
    </Suspense>
  );
}

function ProfileDetails() {
  // Try to read user info, although it might not have loaded yet
  const user = resource.user.read();
  return <h1>{user.name}</h1>;
}

function ProfileTimeline() {
  // Try to read posts, although they might not have loaded yet
  const posts = resource.posts.read();
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.text}</li>
      ))}
    </ul>
  );
}

React Suspense Examples

阿 Gap 相信 React Suspense 好快進入 Stable Release 👍🏻

想了解多啲 facebook.com 點發揮 Relay + GraphQL，阿 Gap 推薦重溫 R8 技術發佈會，了解下 Facebook 做 Optimization 可以做到有幾盡！

分享會最後個結尾講得好好，係每一個 Developer 都好樂意聽到嘅結語。

Great user experience starts with great developer experience. The right things should happen by default. When it is possible, the right things should be far easier to do than the wrong one.

By taking this approach, we do our jobs better and faster so we can provide quality experience to people that come to a website.

呢個概念，阿 Gap 係 2019 年寫過一篇技術隨筆內《SwiftUI - 變天的 iOS 開發技術》都有寫過嘅感想