## 情境
在開發一個網頁的功能時，除了要紀錄使用者操作的狀態，也要記得同步調整畫面樣式。
如果沒寫好可能會導致畫面與狀態不一致。

但一直注意這個真的好花時間呀！這就是網頁框架會出現的理由之一。

## 什麼是框架？
在電腦程式設計中，軟體框架（software framework）是一種抽象概念，提供通用功能的軟體環境。開發者可以依循其規範快速開發應用程式。這是一種可重複使用的軟體環境，作為更大軟體平台的一部分來促進應用程式、產品和解決方案的開發。

## 框架的目的
如果不依賴框架，開發軟體需要自己實現很多基本功能。軟體框架旨在通過讓設計師和程式設計師專注於滿足軟體需求，而不是處理標準的低階細節，來促進軟體開發，從而減少總體開發時間。例如，使用 Web 框架開發網站，團隊可以專注於編寫功能，而不是處理請求和狀態管理的機制。

## 網頁框架分類
市面上有許多網頁框架，大致可以分為前端框架和後端框架，因此我們需要先了解什麼是前端和後端。

### 前後端是什麼？
* 前端

前端泛指 UI 部分，使用者第一眼看到、觸碰、使用到的地方都是前端，像是手機 App 是一種前端，提款機畫面是前端，常見的網頁也是種前端，在網頁前端裡面瀏覽器這個應用程式就會處理 JavaScript、Css、Html 程式碼，並呈現在畫面上。

從技術上來說，執行在用戶端的程式碼都屬於前端，手機 App 需要下載 APK 檔案，要安裝在自己的手機裡才可以使用。

* 後端

處理重要商業邏輯並串接資料庫的部分屬於後端的範疇，使用者無法看到你的程式碼邏輯，而後端通常會做成 API Server，API 是傳遞資料的一種技術，API Server 是提供 API 的電腦服務。

可以想像成餐廳的外場（前端）與內場（後端），內場製作好餐點後，由外場提供服務讓顧客享用。

### 網頁框架的分類
* **前端框架**（frontend framework／客戶端框架 client-side framework）
- 前端框架常用 JavaScript 語言，例如：Angular、React、Vue。
* **後端框架**（backend framework／伺服器端框架 server-side framework）
- 後端框架依不同語言有各自對應的框架，例如：
- C# - ASP.NET
- Python - Django
- PHP - Laravel
- Ruby - Ruby on Rails
- Java - Spring
- JavaScript - Node.js

### 為什麼會有前後端框架？
最初的網頁是靜態的，就像是放個 PDF 給人瀏覽。隨著需求變得複雜，網頁開始需要許多頁的切換和頻繁與資料庫聯繫，因此出現了後端框架來處理基本事件（連線、資料庫聯繫、製作相應畫面）。

在這個時期，主流的做法是更新資料需要重新整理畫面。但隨著 Ajax（非同步 JavaScript 與 XML）的出現，網頁可以在不切換畫面的情況下更新資料。這樣畫面的變化不再依賴伺服器端，減輕了伺服器的負擔，並且提供了更好的使用體驗。

在這背景下，許多本來由後端處理的事務轉移到前端處理，前端程式變得更複雜。於是發展出前端框架，以更系統性地組織前端程式，並代替部分後端功能（例如：路由切換，或稱作「前端路由」）。

## 框架的好處與壞處
框架管理了開發網頁的底層事件，讓開發者可以更專注於實際需求。框架的規範也讓不同習慣的開發者能以一致的方式開發。

然而，框架的學習較為複雜，除了語言本身，還有自己的語法和結構需要遵循。此外，框架代替你處理的事情會反映在程式大小上。如果網頁規模較小，使用框架可能會讓開發過於複雜，檔案也會變得過大。

## 所以，工程師說的程式架構升級是什麼？
在今年的專案中，我們遇到了兩次重要的架構升級：
1. 甲專案從 WebForms 改成 MVC 5。
2. 乙專案的某頁面改用 Vue 進行開發，小規模引入前端框架。

### WebForms 改 MVC

- **WebForms**：使用拖放控件和事件驅動的編程模型，適合快速開發，但代碼耦合度高，對大型應用的可維護性和測試不利。
- **MVC**：分離模型、視圖和控制器，清晰的層次結構提高了代碼的可維護性和測試性，適合複雜的應用程序。

這次改造使我們的後台代碼更加清晰和可維護，便於後續的擴展和更新。

### 新案子部分改用 Vue 開發

新的案子需要展示大約100多筆資料，這些資料雖然相似但需要套用不同的版型。原有的兩種做法如下：

1. **傳統後端渲染：**
- 選擇資料 → 後端取得資料 → 後端產製畫面，期間瀏覽器變空白 → 前端顯示畫面
- 問題：這種方法會導致瀏覽器畫面閃一下，使用體驗不佳。

2. **傳統前端渲染：**
- 選擇資料 → 前端發出API請求 → 前端取得資料 → 前端刪除原本畫面資料 → 前端產製畫面資料並顯示
- 問題：這樣的方式雖然解決了畫面閃一下的問題，但路由沒有變化，導致無法通過網址直接訪問特定資料。

我們採用的解決方案是使用 Vue 框架來開發：

- **Vue 框架渲染：**
- 選擇資料 → 前端發出API請求 → 前端取得資料 → 前端框架抽換資料
- 優點：不會出現畫面閃一下的問題，同時路由也會跟著變化，便於未來的導航和訪問。

這種方法不僅提高了用戶體驗，還使我們的前端代碼更為簡潔和高效。

## 參考資料
- [MDN Web Docs - Client-side JavaScript frameworks](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction)
- [MDN Web Docs - Web frameworks](https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Web_frameworks)
- [Wikipedia - Web framework](https://en.wikipedia.org/wiki/Web_framework)
- [Medium - 網頁新手入門：初探網頁架構和前後端語言](https://medium.com/appworks-school/%E7%B6%B2%E9%A0%81%E6%96%B0%E6%89%8B%E5%85%A5%E9%96%80-%E5%88%9D%E6%8E%A2%E7%B6%B2%E9%A0%81%E6%9E%B6%E6%A7%8B%E5%92%8C%E5%89%8D%E5%BE%8C%E7%AB%AF%E8%AA%9E%E8%A8%80-a88a5dc86ee3)
- [Medium - 後端工程師的第一堂課 (1) : 語言的選擇與比較 — 動態語言](https://medium.com/johnliu-%E7%9A%84%E8%BB%9F%E9%AB%94%E5%B7%A5%E7%A8%8B%E6%80%9D%E7%B6%AD/%E5%BE%8C%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%B8%AB%E7%9A%84%E7%AC%AC%E4%B8%80%E5%A0%82%E8%AA%B2-1-%E8%AA%9E%E8%A8%80%E7%9A%84%E9%81%B8%E6%93%87%E8%88%87%E6%AF%94%E8%BC%83-%E5%8B%95%E6%85%8B%E8%AA%9E%E8%A8%80-1ce90f8ddd32)