1. Scenario

  • Basic goal?
  • Workflow?
  • MVP?
  • critical feature?
  • Data API ?
  • Control state?
  • Core spec: tricky parts? easy parts?

product design?

  • goal of service?
  • native app? PWA needed?
  • Replica?
  • Mobild? Desktop?
  • SEO concern? Server-side rendering?
  • SPA?
  • QPS? DAU?
  • Future roadmap?

2. Services / Components

  • Draw a diagram
  • Data flow / interaction flow


Facebook Page


  • A huge complicated frontend app, like Facebook
  • How to make it spdeedy and smooth
  • Bundle everything is slow how to make it better?


Lazy Load


  • Small bundle size
  • React.lazy 函数能让你像渲染常规组件一样处理动态引入(的组件)
    • const OtherComponent = React.lazy(() => import('./OtherComponent'));

User Experience

  • Add loading spinner
  • Add skeleton or placeholder indicating the layout
    • Only including important screens
    • Create reusable component for skeleton
    • handle data field with dummy or default data


  • CDN: content, images


  • Get instant go forward: skeleton
  • Get instant go back: Cache Data (like redux), Page Stack (not destroy pages)
  • Jank-free animations
    • lottie: A Lottie is a JSON-based animation file format that enables designers to ship animations on any platform as easily as shipping static assets. They are small files that work on any device and can scale up or down without pixelation. Lottie can be used as a lightweight method to add animations to your web app. Lotties are performant, and will not put a heavy load on your application
  • Native-like app: interact smoothly
  • timeline
    • very long: infinite scroll or pagination


  • Cross-team communication
  • Mocir-frontend: each flow can be deployed independently
  • Maintain a sharing lib and documentation (like storybook)
  • Design system: have a consistent design style
  • accessibilty
  • i18n (Internationalization and localization): multiple langualges