MVC、MVP、MVVM、MVI 都是軟體架構模式，用來組織和管理程式碼，提高程式碼的可讀性、可維護性和可擴展性。
MVC (Model-View-Controller) 模式
- Model（模型）：負責管理應用程式的資料和業務邏輯。
- View（視圖）：負責顯示使用者介面，將資料呈現給使用者。
- Controller（控制器）：處理使用者輸入，並根據輸入更新模型和視圖。
- 優點：
- 分離應用程式的邏輯和使用者介面，易於維護和擴展。
- 各部分之間的職責清晰，開發人員易於理解和合作。
- 缺點：
- Controller 負責處理使用者輸入和業務邏輯，可能導致程式碼膨脹和過於複雜。
- View 和 Model 之間可能存在雙向依賴，難以進行單元測試和重用。
MVP (Model-View-Presenter) 模式
- Model（模型）：同 MVC 中的模型，管理資料和業務邏輯。
- View（視圖）：同 MVC 中的視圖，顯示資料給使用者。
- Presenter（呈現者）：處理使用者輸入，更新模型，並控制視圖的顯示。
- 優點：
- Presenter 負責處理使用者輸入和更新模型，將 View 和 Model 解耦，使得測試和重用更容易。
- 適合於大型專案和團隊合作，易於管理和維護。
- 缺點：
- Presenter 可能變得過於龐大，導致代碼複雜度增加。
- 需要開發者對概念和職責的理解程度更高。
MVVM (Model-View-ViewModel) 模式
- Model（模型）：同樣負責管理應用程式的資料和業務邏輯。
- View（視圖）：同樣負責顯示使用者介面。
- ViewModel（視圖模型）：負責處理視圖和模型之間的資料轉換和邏輯，讓視圖和模型之間解耦。
- 優點：
- ViewModel 負責處理 View 和 Model 之間的數據轉換，減少了 View 和 Model 之間的依賴，提高了程式碼的可測試性和可維護性。
- 支持雙向數據綁定，使得畫面更新更加靈活和高效。
- 缺點：
- 學習成本較高，需要理解數據綁定和 ViewModel 的概念。
- 需要額外的工具或框架來實現雙向數據綁定，增加了複雜度。
MVI (Model-View-Intent) 模式
- Model（模型）：同上述模式中的模型，管理應用程式的狀態和資料。
- View（視圖）：同上述模式中的視圖，顯示使用者介面。
- Intent（意圖）：用戶的操作或行為，將其轉換為更新模型的指令，通常由視圖傳遞給模型。
- 優點：
- 聚焦於將使用者的意圖轉換為對模型的操作，保持了單向數據流，簡化了程式碼的邏輯和流程。
- 促進了可預測性和可測試性，使得程式碼更容易理解和測試。
- 缺點：
- 學習曲線較高，需要對函數式編程和反應式編程有一定的理解。
- 某些場景下可能需要額外的工作來管理狀態和副作用。
目前主流應用情境
| 框架 | 應用說明 |
| MVC | 多用於Web與桌面應用程式 |
| MVP | 在Android開發中很受歡迎，因為它有助於測試和維護。 |
| MVVM | 前端開發中非常受歡迎，尤其是使用React、Vue.js等框架。 |
| MVI | 在一些具有反應式編程和函數式編程背景的專案中很受歡迎，尤其是在Android開發中。 |
結語
總的來說，每種架構模式都有其特定的應用場景和優點，開發人員應根據具體需求和技術堆疊選擇最適合的模式。
什麼是技術堆疊?
「技術堆疊」(Tech Stack)是指在構建軟體應用程序時,所選用的一系列技術服務、編程語言、框架以及工具的組合。這些元素緊密地協同工作,共同支撐起一個完整的軟體解決方案的運行。例如,在開發一個典型的Web應用程序中可能會涵蓋前端和後端兩大部份。
前端(Front-end),也就是客戶端,通常指的是使用者直接與之交互的界面和前臺操作部分。它包括了HTML、CSS和JavaScript等技術來創建使用者可見並能與之互動的圖形化介面。近年來,隨著單頁應用(SPA)趨勢的崛起,前端開發更加專注於使用現代框架如React.js、Angular或Vue.js來提供更快速、動態且流暢的使用者體驗。
後端(Back-end),也稱作伺服器端,負責管理資料庫存取、伺服器邏輯處理與APIs等背景運算任務。後端開發常見的程式語言有Python, Ruby, PHP, Java及.NET等;而資料庫管理系統則可能包含MySQL, PostgreSQL, MongoDB等不同類型。 除此之外,在進行Web開發時還需要考量到數據傳輸協議如HTTP/HTTPS、Web伺服器例如Apache或Nginx以及其他關聯性工具比如容器化平台Docker或版本控制系統Git等。
以上資料參考：https://www.pintech.com.tw/article_page/209/how-to-choose-the-right-tech-stack-for-web-application-development
