Basic

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

3.Improvement

Facebook Page

Problems

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

Solutions

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

Caching

  • CDN: content, images

Smooth

  • 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

Todo

  • 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