為什麼現在的前端都在用「框架」？

前端框架的流行並不是一時的潮流，而是因為它們解決了許多傳統前端開發的痛點，讓開發更高效、程式碼更易維護。以下是幾個主要原因，搭配詳細解釋：

1. 提升開發效率

問題：早期前端開發主要靠原生 JavaScript、HTML 和 CSS 來手動操作 DOM（文件物件模型）。每次更新頁面都需要直接操作 DOM，這不僅繁瑣，還容易出錯。例如，想動態更新一個清單，可能需要寫一大堆 document.getElementById 或 document.createElement 的程式碼。
框架的解決方案：框架像是 React 或 Vue 提供了聲明式程式設計，讓你專注於「資料」和「畫面」的關係，而不是手動操作 DOM。例如在 React 中，你只需要改變狀態（state），框架會自動幫你更新畫面。

例子：

// 原生 JavaScript 更新清單
const list = document.getElementById("myList");
const newItem = document.createElement("li");
newItem.textContent = "新項目";
list.appendChild(newItem);

// React 方式
import React, { useState } from "react";

function MyComponent() {
  const [items, setItems] = useState(["項目 1", "項目 2"]);
  const addItem = () => {
    setItems([...items, "新項目"]);
  };

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
      <button onClick={addItem}>新增項目</button>
    </ul>
  );
}

在 React 中，你只需要管理 items 狀態，畫面更新由框架自動完成，省去大量重複工作。

2. 統一程式碼結構，方便團隊協作

問題：每個工程師寫 JavaScript 的風格不同，導致程式碼可能雜亂無章，維護起來很困難。例如，有人可能用 jQuery，有人用原生 JavaScript，結果程式碼風格不一致，團隊協作效率低。
框架的解決方案：框架提供了標準化的開發方式。例如，React 使用元件化（Component-Based）架構，Vue 有類似的模板語法，這些都強制程式碼遵循一定的結構，讓團隊成員更容易理解彼此的程式碼。
好處：元件化的設計讓程式碼可以像樂高積木一樣組裝，容易分工。例如，一個按鈕元件可以重複使用，減少重複撰寫程式碼的麻煩。

3. 應對複雜的應用需求

問題：現代前端應用越來越複雜，例如單頁應用程式（SPA）需要處理路由、狀態管理、API 呼叫等。單靠原生 JavaScript 很難有效管理這些功能。
框架的解決方案：框架提供了內建工具來處理這些需求。例如：
- React：搭配 Redux 或 Context API 來管理狀態。
- Vue：有 Vuex 或 Pinia 來處理狀態管理。
- Angular：內建完整的解決方案，包括路由、表單驗證等。

這些工具讓你可以用更少的程式碼實現複雜功能。例如，React Router 讓你輕鬆實現頁面路由：

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

4. 提高程式碼可維護性

問題：隨著專案規模變大，純 JavaScript 程式碼可能變得難以維護，尤其當 DOM 操作、事件監聽和資料邏輯混雜在一起時。

框架的解決方案：框架鼓勵將程式碼分成小模組（元件），每個元件負責單一功能。例如在 Vue 中，你可以把 HTML、CSS 和 JavaScript 寫在同一個 .vue 檔案中，結構清晰：

// MyComponent.vue
<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="updateTitle">更新標題</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello, Vue!'
    };
  },
  methods: {
    updateTitle() {
      this.title = '標題已更新!';
    }
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

這樣的結構讓程式碼更容易閱讀和維護。

5. 生態系與社群支援

問題：原生 JavaScript 雖然靈活，但缺乏統一的生態系，許多功能需要自己從頭寫。
框架的解決方案：框架有強大的生態系，提供了許多現成的套件和工具。例如，React 有 Material-UI、Ant Design 等 UI 框架，Vue 有 Vuetify，這些都可以讓你快速建立漂亮的介面。
社群支援：框架背後有活躍的社群，遇到問題可以在 Stack Overflow 或 GitHub 上找到解答。官方文件也通常很完善，適合像你這樣程式語言能力還在成長的工程師學習。

6. 跨平台與未來發展

問題：隨著前端技術的進步，開發者需要應對不同平台（網頁、移動端、桌面應用）的需求。
框架的解決方案：許多框架支援跨平台開發。例如，React 有 React Native 可以開發手機應用，Vue 有 Weex 或其他類似工具。這讓你學一個框架就能應對多種場景。
例子：用 React Native 開發手機應用時，程式碼風格和 React 很相似，讓你不需要重新學習太多新東西。

1. 提升開發效率​

2. 統一程式碼結構，方便團隊協作​

3. 應對複雜的應用需求​

4. 提高程式碼可維護性​

5. 生態系與社群支援​

6. 跨平台與未來發展​