分類

Frontend system design 分為兩種：

1. Applications
2. UI component

Application

因為 Web app 越來越複雜，所以也開始採用 Software engineering classes，像是：

• Model-view-controller (MVC)
• Model-view-viewmodel (MVVM)

甚至像是 Flux / Redux-based architecture

你必須專注於應用程序中獨特的部分，而不是花太多時間談論適用於所有問題的一般內容 (It's imperative that you focus on the parts that are unique to the application and not spend too much time talking about general stuff that are applicable to all questions)

以下是幾個重點步驟：

1. 設計高層級架構 (Design the high-level architecture)
2. 辨識系統的元件 (Identify the component in the system)
3. 元件之間的 APIs (the API between the components)

以下是一些常見問題及其重要部分

UI components

1. 先決定 subcomponents (e.g. Carousel 有 Image, pagination buttons, thumbnails)
2. 對外的 API (external-facing API)
3. 描述 component 內部狀態 (describe the internal component state)
4. subcomponents 之間的 API
5. 深入優化 & 效能, security, UX, 可行性 (accessibility)

或許會需要寫一小段 code 如下

1. 描述 component 的階層
2. 描述 component state
3. 解釋 component 的重要邏輯 (Explain some non-trivial logic within the component)

<ImageCarousel
	images={...}
	onPrev={...}
	onNext={...}
	layout="horizontal"
>
	<ImageCarouselImage style={...} />
	<ImageThumbnail onClick={...} />
</ImageCarousel>

調整主題樣式 (Customizing Theming)

API Design Principles for UI components | Front End Interview Guide | GreatFrontEnd

範例

• Design an autocomplete component
• Design a dropdown menu component
• Design an embeddable poll widget
• Design an image carousel
• Design a modal component
• Design a data table with sorting and pagination
• Design a datepicker
• Design a multiselect component

參考資源

• Types of Questions