小編前陣子去台中參加 AWS 社群日的時候，順道逛了人生第一次 IKEA，除了丸子很好吃霜淇淋也很不錯的部分，覺得更滿意的是整個賣場的體驗。

不過今天小編想要來談談的是家具的設計，理工宅的小編在逛家具的過程中其實發現蠻多的家具都有模組化的收納策略。

什麼是模組化

• 可擴展: 消費者可以隨著時間的推移，可以輕易增加模組來增加收納系統的彈性
• 可替換: 可以輕易更新壞掉或是不需要的模組，這意味著不同的元件和部分可以結合在一起
• 節制和簡約: 不需要一次就買到位，後續可以逐步的擴充

模組化以收納解決方案為例

1. 櫃子的格子大小都會是固定的
2. 櫃子可以選擇放入抽屜或是收納箱
3. 抽屜跟箱子都針對格子大小去設計不同材質的方案

透過這三點的巧思，消費者能夠根據需求和可用空間自訂和擴展家具，這樣的策略可以更靈活管理空間同時減少浪費。

既然收納是生活中不可或缺的一部分，那接下來模組化和原子化設計的理念也很重要，接下來我們將開箱原子化設計如何與元件、模組和收納相關，並如何在這些領域中發揮關鍵作用。

原子化設計 (Atomic Design)

原子化設計的概念源於將大型複雜系統分解成更小、更簡單的元素或原子 (元件)，這個原則不僅適用於家具和室內裝潢，還廣泛應用於軟體開發和設計領域。

那在軟體開發上通常也會將程式碼區分為元件和模組

• 元件: 可以獨立存在且具有自己的功能和風格，並有簡單、清晰統一的設計，以便融入不同的模組並與其他元件整合。
  • 家居裝飾中: 原子可以是一個燈具、一張椅子、一個置物箱
  • 軟體設計中: 原子可以是一個按鈕、一個輸入框或一個圖像
• 模組: 是原子化設計的結合，它們將多個元件組合在一起以創建更大、更有功能性的單位
  • 家居裝飾中，模組可以是一個房間的設計，包括家具、燈具和裝飾元素的組合
  • 軟體開發中，模組可以是一個應用程式的不同部分，每個部分由多個元件組成

原子化設計、元件、模組這些原則和概念有助於創建簡單、實用、有組織的設計，模組的關鍵優勢是可擴展性、可客製化和根據需求建立不同的配置。

透過這種方法論，我們更能夠去靈活地設計、建立和管理我們的生活和空間，同時確保效能和美觀。

前端框架的元件和模組化

前端框架模組化是近代前端開發上的顯學和主要趨勢，有助於提高程式碼的可維護性、重用性和協作性。

元件化是前端模組化的核心，前端框架御三家目前都強調元件的使用。開發者在開發時都會將應用程式分解為多個小元件，每個元件都有自己的狀態、視圖和邏輯。

這樣的結構使程式碼更易管理，並能夠實現元件的重用，最後透過 Webpack 等模組打包工具將程式碼拆分為多個模組，在需要的時候才進行載入，提高了應用程式效能。

除了主要的前端框架，開發者還可以使用各種工具，像是 React Router、Redux、Styled-components 等來擴充程式的功能並提高開發效率。

總的來說，前端框架模組化目標是應對日益複雜的前端應用需求，提高程式碼的可維護性和可擴展性。

單檔元件 (Single-File Component)

Vue.js 引入了 SFC 的概念，在一個檔案中結合 HTML、CSS 和 JavaScript 程式碼。這樣的設計使元件更自包含，並提高程式碼結構的清晰度。

Web 元件 (Web Components)

Web 元件是一個 W3C 標準，讓開發者建立可重用的自定義 HTML 元素。雖然它仍在逐漸普及中，但它具有改變前端模組化方式的潛力，使元件更容易在不同框架和專案中共享。