前端的框架跟函式庫百百種，究竟該怎麼選?
其實這跟伴侶的選擇有點像，要選當下適合我們的而非一昧的追求最好，當需求與供給沒辦法對應時，勉強別人接受並不公平，勉強自己適應也很痛苦。
函式庫和框架的選擇也是，實際上遇到的問題絕對都有一種以上的解決方案，而哪種方式才是最適合的就該好好想想。
在簡單的專案使用框架只會增加複雜度，在複雜專案的使用卻讓專案變得單純
所以該不該使用框架，端看各位大大遇到問題的維度和情境。
函式庫 (library) 是開發者將常用的功能打包成能重複使用的工具包，以便和他人共享自己的解決方案。
這種開源共享函式庫的生態也加速了技術演進，JavaScript 函式庫大多應用在協助操作 DOM、AJAX、CSS，幫助開發者更有效率的撰寫網頁，例如
$(selector) 或是 $(element) 簡化 DOM 操作、AJAX 的抽象 $.ajax 和解決跨瀏覽器的語法支援當沒有框架的時候，開發通常會用 jQuery 當套件去
當專案規模開始變大，互動性變高，管理狀態以及資料流就會越來越困難，原來的這種開發方式會漸漸變得母湯，不僅維護難度提高效能也會下降。
有人發表一個評論，並且有人又針對評論進行回覆，同時也有許多人針對兩則回覆按表情符號
以取得取得評論為例，以下會是 jQuery 的寫法，當 UI 變得複雜的時候，renderComponents 這個 Function 就會變得越來越複雜，且以這樣的寫法只想更新有改變的資料會變得較為困難。
jQuery 的操作方式直覺，且寫起來的速度並不會比較慢，但由於缺少規範，最終可能會難以維護。
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);
});
Web 開發框架是抽象概念，是針對某些類型和需求的專案提供完整解決方案的函式庫。
這些解決方案能讓應用程式能夠擁有可預測性和均質化，這樣當規模擴大時可維護性能夠維持，框架能讓 JavaScript 開發變得更輕鬆。
當年 Facebook 也是發現現有技術無法解決當下網頁需要高互動性的問題，才著手進行了 React.js 的開發用簡單的語法來描述複雜的規則，提供達到提升執行效能又能降低維護難度的開發架構。
小編從 2015 開始入門前端，前端的技術選型開始進行轉換，目前看起來是一個三分天下的概念。
.vue 可以把 CSS 關起來可以免除自己寫 BEM這幾年下來前端的趨勢看來是元件驅動開發 (CDD)，元件化顯而易見的好處就是好維護可重用，並可將元件封裝成模組便於安裝和使用，React、Angular、Vue 三大主流框架大致都有以下特性
以取得取得評論為例，底下舉 React 的寫法，當畫面變得複雜時我們只需要將元件再拆小，且 React 每次都只會更新有變化的部分。
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 是用來實作使用者介面的 JavaScript 函式庫。
Facebook 於 2013 年發表，技術上來說 React 並不是框架，而是一個用來渲染 UI 元件的函式庫，在發表當時 Facebook 內部早已使用 React 解決許多內部問題。
React 提供了單向資料流的架構，透過 Single Source of Truth (SSOT) 的準則來確保資料來源和資料的流向。
使用上通常會配合其他函式庫來建立應用程式，例如
另外 React 大量普及的使用 JSX 來撰寫和描述元件，熟悉 JSX 大大簡化了開發的過程，JSX 代表 JavaScript 和 XML，讓 JavaScript 中可以寫類似 HTML 的語法，JSX 主要是由 React 團隊發明的，但也可用在 Vue 的開發上。
這邊也附上傳送門，歡迎參考小編一路上學習的一些小小心得:
https://linyencheng.github.io/categories/#React.js
Vue 是漸進式 JavaScript 框架，一個平易近人、高性能且通用的使用者介面的框架。
初學者最舒服的學習小編認為是 Vue.js 或 jQuery，Vue 提供了雙向資料的機制，隨便寫個幾行程式就可以做出幾個小頁面。
不過雙向資料流並不限定資料源，可以從 model 而來，也可以從 input 而來，能夠讓我們很輕易地操作資料，但較難確定資料來源。
<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 是一個基於 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，小編認為會比較適合較有規模且同事水平較一致的團隊。
iThome鐵人賽
看影片追技術