前端函式庫與框架 X 框架御三家怎麼選 從把妹角度理解前後端如何和平相處

前端的框架跟函式庫百百種，究竟該怎麼選?

其實這跟伴侶的選擇有點像，要選當下適合我們的而非一昧的追求最好，當需求與供給沒辦法對應時，勉強別人接受並不公平，勉強自己適應也很痛苦。

函式庫和框架的選擇也是，實際上遇到的問題絕對都有一種以上的解決方案，而哪種方式才是最適合的就該好好想想。

在簡單的專案使用框架只會增加複雜度，在複雜專案的使用卻讓專案變得單純

所以該不該使用框架，端看各位大大遇到問題的維度和情境。

JavaScript 函式庫

函式庫 (library) 是開發者將常用的功能打包成能重複使用的工具包，以便和他人共享自己的解決方案。

這種開源共享函式庫的生態也加速了技術演進，JavaScript 函式庫大多應用在協助操作 DOM、AJAX、CSS，幫助開發者更有效率的撰寫網頁，例如

• jQuery 提供了多載像是 $(selector) 或是 $(element) 簡化 DOM 操作、AJAX 的抽象 $.ajax 和解決跨瀏覽器的語法支援
• date-fns 簡化了時間的處理
• classnames: 使用 JavaScript 設定條件動態的操作 class
• humps: 將收到的資料格式轉成駝峰式

jQuery

當沒有框架的時候，開發通常會用 jQuery 當套件去

• 快速的操作 DOM
• 撰寫 AJAX 相關功能
• 跨瀏覽器語法支援

當專案規模開始變大，互動性變高，管理狀態以及資料流就會越來越困難，原來的這種開發方式會漸漸變得母湯，不僅維護難度提高效能也會下降。

有人發表一個評論，並且有人又針對評論進行回覆，同時也有許多人針對兩則回覆按表情符號

以取得取得評論為例，以下會是 jQuery 的寫法，當 UI 變得複雜的時候，renderComponents 這個 Function 就會變得越來越複雜，且以這樣的寫法只想更新有改變的資料會變得較為困難。

jQuery 的操作方式直覺，且寫起來的速度並不會比較慢，但由於缺少規範，最終可能會難以維護。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function getCommentsByPostId(id) {
  return fetch(`/api/post/${id}`).then((res) => res.json());
}

function renderComments(post) {
  post.comments.forEach((comment) => {
    $("#root").append(
      $(document.createElement("div"))
        .append(
          $(document.createElement("h3")).text(comment.userName),
          $(document.createElement("p")).text(comment.comment)
        )
        .addClass("card")
    );
  });
}

$(".comments").on("click", (e) => {
  getCommentsByPostId(postId).then(renderComments);
});

JavaScript 框架

Web 開發框架是抽象概念，是針對某些類型和需求的專案提供完整解決方案的函式庫。

這些解決方案能讓應用程式能夠擁有可預測性和均質化，這樣當規模擴大時可維護性能夠維持，框架能讓 JavaScript 開發變得更輕鬆。

當年 Facebook 也是發現現有技術無法解決當下網頁需要高互動性的問題，才著手進行了 React.js 的開發用簡單的語法來描述複雜的規則，提供達到提升執行效能又能降低維護難度的開發架構。

小編從 2015 開始入門前端，前端的技術選型開始進行轉換，目前看起來是一個三分天下的概念。

圖片來源: https://ithelp.ithome.com.tw/articles/10224417?sc=pt

1. Angular: Google 推出第二代後，想得到的東西都裝在裡面了
2. React.js: Facebook 主導，React 只關注 UI，通常會和管理狀態的 Redux 一起用
3. Vue.js: 待過阿里 Weex 團隊的尤雨溪設計，透過 Vue-loader 撰寫 .vue 可以把 CSS 關起來可以免除自己寫 BEM

這幾年下來前端的趨勢看來是元件驅動開發 (CDD)，元件化顯而易見的好處就是好維護可重用，並可將元件封裝成模組便於安裝和使用，React、Angular、Vue 三大主流框架大致都有以下特性

• 元件驅動開發
• 資料流跟畫面分離
• 狀態管理機制
• 網站的效能提升

以取得取得評論為例，底下舉 React 的寫法，當畫面變得複雜時我們只需要將元件再拆小，且 React 每次都只會更新有變化的部分。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

function Comment({ userName, comment }) {
  return (
    <div className="card">
      <h3>{userName}</h3>
      <p>{comment}</p>
    </div>
  );
}

function Comments() {
  const [comments, setComments] = useState([]);

  function getCommentsByPostId(id) {
    return fetch(`/api/post/${id}`).then((res) => res.json());
  }

  return (
    <>
      <button
        onClick={() => {
          getCommentsByPostId(postId).then(({ comments }) => {
            setComments(comments);
          });
        }}
      >
        getCommentsByPostId
      </button>
      {comments.map((comment) => (
        <Comment key={comment.id} {...comment} />
      ))}
    </>
  );
}

React

React 是用來實作使用者介面的 JavaScript 函式庫。

Facebook 於 2013 年發表，技術上來說 React 並不是框架，而是一個用來渲染 UI 元件的函式庫，在發表當時 Facebook 內部早已使用 React 解決許多內部問題。

React 提供了單向資料流的架構，透過 Single Source of Truth (SSOT) 的準則來確保資料來源和資料的流向。

使用上通常會配合其他函式庫來建立應用程式，例如

• React Native 建立手機程式
• ReactDOM 建立網路應用程式

另外 React 大量普及的使用 JSX 來撰寫和描述元件，熟悉 JSX 大大簡化了開發的過程，JSX 代表 JavaScript 和 XML，讓 JavaScript 中可以寫類似 HTML 的語法，JSX 主要是由 React 團隊發明的，但也可用在 Vue 的開發上。

這邊也附上傳送門，歡迎參考小編一路上學習的一些小小心得:
https://linyencheng.github.io/categories/#React.js

Vue

Vue 是漸進式 JavaScript 框架，一個平易近人、高性能且通用的使用者介面的框架。

初學者最舒服的學習小編認為是 Vue.js 或 jQuery，Vue 提供了雙向資料的機制，隨便寫個幾行程式就可以做出幾個小頁面。

不過雙向資料流並不限定資料源，可以從 model 而來，也可以從 input 而來，能夠讓我們很輕易地操作資料，但較難確定資料來源。

1
2
3
4
5
6
7
8
9
10

<input v-model="message">
<p>{{message}}</p>

<script>
  Vue.Component('Input', {
    data: () => ({
      message: 'hello world'
    })
  })
</script>

Vue 除了與 Angular 一樣，使用了一些自定義的 HTML 以外，大部分還是使用現代化的標準 JavaScript，所以在學習上是最輕鬆寫意的，小編初期在入門時也是從 Vue 開始。

在使用上 Vue 也提供了透過 template 形式不需要建置的使用方式，可以讓我們快速的 POC 以及練習撰寫元件。

https://github.com/LinYenCheng/vue-note

在整合原生手機程式上，Vue 的作者尤雨溪也加入了 Weex 團隊，目的是讓開發者能使用一致的 Web 開發體驗 (Vue) 來開發高效能原生應用，並能夠透過同一份程式編譯並在不同平台上面運行，所以其實可以用 Vue 的語法去撰寫原生的 Android/iOS APP。

Angular

Angular 是一個基於 TypeScript 的開發平台，小編並沒有特別實作過小專案，僅簡單看過文件。

不過 Angular 身為前端御三家，也是同樣是以元件的概念來開發，不過不僅僅是元件而是一套完整的開發平台。

一個 Angular 的元件由三部份構成，分別是：模板、樣式、類別。

舉例來說，app.component.ts、app.component.html、以及 app.component.css 一同構成 AppComponent。

Angular 主要是透過模板的語法來撰寫 HTML 並且透過 Dependency Injection 的設計模式，把程式中的某些服務或是值交付給需要使用的地方。

也因為 Angular 是開發平台的概念，已經將大部分可能會需要的東西封裝在裡面，譬如今天需要 PWA 功能就只要輸入 ng add @angular/pwa。

不過 Angular 和 React 跟 Vue 相比，開發者必須懂相對多的 “假設” 還有 “結構”，甚至維護到的專案可能只是打個 API 也會需要理解什麼是 RX，小編認為會比較適合較有規模且同事水平較一致的團隊。

• ← 上一篇
• 下一篇 →