※ 今天內容

一、前言：關於技術的選擇迷思
二、學習跟工作專案的工作選擇考慮的差別
三、為什麼現在還有人在用 JQuery ，或不使用套件管理來開發？
四、以實際開發的角度，談談使用 React 、 Anuglar 、 Vue 的必要性
五、談談 React 、 Anuglar 、 Vue 的技術差別
六、 使用JS框架時，為何不建議搭配JQuery操作DOM
七、結論：從不同角度考慮技術與框架的選擇
八、第一部分總結：學習任何前端框架，都需要了解的事情

一、前言：關於技術的選擇迷思

1. 即使現在 Vue 、 Angular 、 React 三大JS框架這麼熱門
   究竟有沒有公司在使用 JQuery ？
   還是有的

2. 現在 ES6 Module + Webpack 套件管理的開發方式
   究竟有沒有公司使用傳統的JS開發方式？
   還是有的

3. 有的前輩會說，能盡量手刻，就不要用第三方套件或框架
   有的前輩則說，有現成的東西，就不要自己從頭造輪子
   到底誰說的是對的？
   都是對的，他們的角度是不同的

4. Vue 的星星數已經大幅超越 React 和 Angular
   後面要踏入前端領域的新人，是不是之後都只要學 Vue？
   假設我只會Vue，我能不能請主管將目前的 React 或 Angular 改為 Vue
   工作上的技術選擇，從來不是單以社群熱門度和個人喜好來選擇。

二、學習跟工作專案的工作選擇考慮的差別

不館是正在學習，或已經在職被要求學習新技術時，心中經常會有的疑惑
就像如果一個人跟他主管說：
「Quasar這麼棒為什麼公司要用 Nuxt 」、「Nuxt 這麼強大，為什麼要用 Quasar」、「為什麼要用 BootstrapVue 不用 Quasar」、「為什麼 Vue 這麼好寫，卻要選 Angular 」

都是站在自己的個人好惡，忽略了工作的技術主導人，在專案開發的角度

在學習技術的角度上，我們考慮的是什麼？

1. 哪些是就業市場使用最多的。
2. 自己能不能接受框架的設計風格，讓自己先專精一個框架技術
3. 使用這個技術，在就業市場的薪資分布。
4. 最新的版本，以避免自己學完現在的穩定版本，在之後被淘汰。

對於工作的技術主導人，在專開案開發的考慮是什麼？

1. 這個技術或框架的變化是否過大，會不會造成底下團隊每次學習的負擔，以及產品維護的變動頻率。
2. 公司大多數專案的規模、內容、時程限制，使用什麼框架或技術，開發上最有效率、最適合。
3. 就團隊成員的整體能力，會不會過度依賴套件或函式庫，造成套件之間衝突，出問題時無法解決。
4. 工作技術主導人的個人喜好。

這時候我們來看下面的四個問題，在不同公司會得到不同的答案：

1. Quasar 這麼棒為什麼公司要用 Nuxt

我們A公司大數的專案式對外公開的形象網站，Nuxt 在SSR的處理和支援度相對比Quasar好很多
像是Quasar的SSR必須完全仰賴Vuex，Nuxt的asyncData則不需要

2. Nuxt 這麼強大，為什麼要用 Quasar

我們B公司大多數的專案，是需要同時開發SPA跟行動裝置的PWA
Quasar 可以很方便的處理行動裝置和桌上型電腦的版面差異

3. 為什麼要用 BootstrapVue 不用 Quasar

因為我們C公司底下的成員，早期是寫Bootstrap出生的
現在新的專案要使用Vue，搭配BootstrapVue對於成員的學習成本是最低的

4. 為什麼 Vue 這麼好寫，要選 Angular

因為我們D公司的專案架構規模，大多非常的複雜且龐大
Angular 的好處，就是大多已經幫我們約束好了架構跟做法
比較好統一制定專案的開發規範

也就是說，對於學習者的好處，對於工作技術主導人不一定是好處。

三、為什麼現在還有人在用 JQuery，或不使用套件管理來開發？

有的公司的專案性質，大多的客戶需求偏重美術外觀的設計
幾乎沒有複雜的前端操作需求
對於他們來說，只需要 Bootstrap + JQuery + JQuery UI 就能處理少許的專案需求
反而極小的專案用現代的JS框架，技術成本跟效益還不一定比較好

又或者說，有的公司的網路只開放 github，沒有開放 npm 、 composer、NuGet 的套件管理網站
那他只能使用傳統下載並引入原始碼的方式來開發。

四、以實際開發的角度，談談使用 React 、 Anuglar 、 Vue 的必要性

逛逛網路上的各大技術影音教學平台
想像一下如果你用 JQuery ，你需要處理每個 UI 邏輯的所有 DOM 的節點操作
甚至牽扯到路由、權限的架構問題
程式碼的量會非常的可觀，可讀性和維護性也會變得相當困難

React vs JQuery
Vue vs JQuery
Angular vs JQuery

現代 JS Framework 的思維，就是不希望讓開發者煩惱所有 DOM 的操作
可以專注複雜在UI邏輯上
以這個 JQuery 跳到 JS 框架的問題為例，思維上剛開始會有些不習慣的地方
jquery編輯列資料改用 vue呈現

我這邊舉兩個實際例子
你要實現像 Udemy 課程的篩選
除了不會重新整理，按下上一頁能回到上一個篩選結果
你用原生 Javascript 或 JQuery：

1. 依賴後端篩選的做法，呼叫 AJAX 取得資料完後，取得右邊的清單區塊 DOM ，接著在 DOM 底下塞進課程
2. 依賴前端的作法，從存放課程的 json 資料過濾出需要的課程，重新渲染整個課程清單 DOM ，或者從課程清單的DOM 當中移除不需要的課程

剛好之前也有邦友曾經提出過類似的問題
雖然原生的 JS 都做得到
但是在實際專案的開發上，用框架可以節省掉處理這些問題的時間

五、談談 React、Anuglar、Vue 的框架差別

這是我看過分析角度很全面的內容：
企業前端框架趨勢論壇：分析 Angular, Vue, React 的現在與未來

簡單來說， React 和 Vue 這種輕量的框架，搭配常用的第三方套件，與 Angular 一樣都可以做到相同的事情：

1. DOM Render (UI邏輯)
2. Route (前端路由)
3. State Management (資料與狀態管理)
4. Form Validation (表單驗證)
5. i18n (多語系)

React Angular Vue 這三個框架的主要的差別是：

1. 語法和撰寫風格的差異，以及是否必須搭配其他的語言技術(JSX、Typesciprt)
   frameworks-code-comparison

2. DOM Render 的處理方式
   Understanding Angular Ivy: Incremental DOM and Virtual DOM

3. 效能
   Angular vs. React vs. Vue: A performance comparison

4. 實作上的其他細節，第三方工具的生態系：
   Vue.js Is Good, But Is It Better Than Angular Or React?
   Angular vs. React - A comparison
   Angular vs. React: The Framework Way or the Library Way ...

所以最後在選擇上就會回歸一個問題：個人喜好

1. 有的人比較喜歡 Vue ，因為不需要另外學習 JSX 和 Typescript ，寫法接近傳統的HTML & CSS & Javascript
2. 有的人比較喜歡 React ．把所有的東西視以 Javascript 封裝、處理，思維是以 FP 的角度出發
3. 有的人比較喜歡 Angular ，因為 Angular 幫我們約束好了架構跟做法，思維是以 OOP 的角度出發，且不須要像 Vue 或 React ，額外整合套件來實現「表單驗證」、「前端路由」

六、 使用JS框架時，為何不建議搭配JQuery操作DOM

維護問題：哪些部分是 js 框架渲染。哪些部分是 JQuery 渲染

以 vue 來說
若是使用 JQuery 直接操作 DOM
有可能會破壞到Vue的資料和畫面的綁定，無法正確的渲染資料

通常這個需求，會用在一個完全不會藉由Vue來操作DOM的標籤
實例可以參考這篇，在 Vue 裡面要用到 JQuery UI
使用上要非常的小心：
How To (Safely) Use A jQuery Plugin With Vue.js

七、結論：從不同角度考慮技術與框架的選擇

在不同的時空、環境和需求，同的技術或框架，帶來效益不一定會相同
比起討論框架或技術，誰絕對比較好
我覺得更重要的，是了解在不同需求上，實際使用之後的「優點」和「缺點」
明顯無法應付大多數主流需求的技術，自然而然會隨著時間淘汰

假設我是一個要選擇團隊開發技術的人來說好了
我會以目前工作常見的專案需求，並帶入專案常見的需求變化，試著套用在各個框架來實現
這樣就可以很清楚的了解，什麼框架比較適合，什麼框架比較不適合

同樣的也可以套用在，想要學一套框架的人
用一些簡單的情境，使用框架來實作
了解哪一個框架比較符合自己的胃口，有興趣或餘力再來學其他的框架

就像這這次系列文的名稱：
即使我覺得 Quasar 是邪教，不代表我要否決 Nuxt.js 的存在價值。

八、第一部分總結：學習任何前端框架，都需要了解的事情

1. 基礎的重要性：任何框架或套件無法做到的切版需求，都需要仰賴原生的 HTML & CSS。
2. 框架的學習原則：掌握框架常見的使用需求，深入理解各個框架的差異。
3. 框架的好壞非單方面可以評論的：專案規模、開發需求、學習與維護成本、個人好惡。