[雜談]如何看待前端框架相似度越來越高？
高雄 PTT 揪的讀書會，常常聊到這個話題
前言：
這篇文章的寫作背景，可以視為沒有在業務上使用過 React , Vue
站在三方(Angular)的路人角度，可能會有很多業務上的問題，可以請各位讀者幫忙指證 🤟
之前的讀書會有討論過這個話題，
但是每個時間段，不同書籍參加的人都不太一樣。
所以，想聊聊
與其說 「致敬者」 不如想說為什麼會出現這樣的狀態？
比如以 Vue來說，Vue 的背景是基於 AngularJS 難用的背景下誕生的，當時 React 才剛出來沒多久，大家都覺得 React 很潮但是當時業務情境還不多。
*來自尤雨溪 (Evan You) 課程內講述。
Evan You 同樣提到， Vue 的樣板語法很大程度借鑒 AngularJS ，所以 「致敬者」 的對象應該是 AngularJS。
他想，有沒有一個框架，可以擁有 AngularJS 的樣版，但不要那麼肥大？
當時的 React 所提出的解決方案 「Virtual DOM」是一個很漂亮的解決肥大的方案。
當時他在的 Google Creative Labs 還是用 AngularJS ，Google Creative Labs 可以大量發揮自己的特色，不用對產出要求一定要有商業價值（或是說他們追求的價值不是「純」商業），他在下班時把框架開發當作 side project。
背景聊完，這邊可以提到 React , Vue 一個比較大的差別，
Render function 的啟動時機。
React 的 Render function 比較基於 function，所以 diff 的時候較複雜的狀態下會需要特別指定「正確的渲染時機」，這時候需要大量的 生命週期，後來的 function component 也是要指定dependency。
或是更精確的說，基於 react core 基本上就是處理 scheduler 。
*註：可能理解有誤，我是雲開發者 XD
但 Vue 早期是基於 ES5 的 Object.defineProperty 實現資料變動偵測，嚴格來說 Vue 比 React 更 “Reactivity”。
Vue 透過 Object.defineProperty 收集 props,state 到 getter , setter ，所以很多時候你不必特別宣告何時需要啟動 render function。
當然，這種 概念(the dependency tracking systems) 也是有先驅的，比如 Knockout.js , Meteor Tracker , Vue.js 1.x and MobX.
*來自尤雨溪 (Evan You) 課程內講述。
順邊提一下， AngualrJS 的 render ，基於髒值檢定（dirty checking），這也是當時最讓人覺得辛苦的（比起 React）。
Angular 2+ 更可怕，可怕的點是基於鬼神的 Zone.js ，一套用 monkey patch 完成的 lib，把 Angular 2+ 改得跟鬼一樣，這隻鬼神就在你寫 Angular 2+ 的時候的無所不在卻又看不到，但你由衷相信有神在幫你。
拉回來說，Virtual DOM。
Virtual DOM 的想法其實就是 document.createElement(‘div’) 這種的 渲染API 能產生 DOM instance，
我能不能把 渲染(render) 和 指定DOM兩者抽象？
這隻 API，你知我知獨眼龍也知道這是一個很 ‘expensive’ 的操作，那我能不能只使用這隻 API 背後實踐的方法？
與其渲染(render) 出實際的 DOM，用 JavaScript objects 其實很 ‘cheap’ 又可以了解結構，484 win win ？
註：但在 Virtual DOM 裡面用 innerHTML 來修改值，就和使用 real DOM 一樣貴了。
另一個好處，
透過 native render API 如document.createElement(‘div’)來告知「瀏覽器」何時要渲染，這件事可以想像成這樣：
那我是不是告知不同的 native render engine，可以產生不同的結果？
你可能想到了， React Native!
(weex , native script 都是類似架構)
總結 Virtual DOM 來說，
Virtual DOM 有比較快嗎？ 沒有。
Virtual DOM 只是一種繞過 原生DOM 限制的方法（操作貴的這個限制），
透過 Virtual DOM 來「抽象化，表示你最後想渲染的頁面」的長相（比如用 json tree）
其他的功能 或 lib : 與其說相似，其實都是「需求」
- Web 上 router 是必須的，所以 React Router -> Vue Router
(其實 ng 也有router，不過不是而外 lib，是框架內功能，yoooooooo) - Redux: React-redux -> Vuex ？
Redux 是一種 pattern , 並不是 React 的技術，只是會流行是因為在 React 的實踐非常合適（本身沒有狀態管理的機制）。
順帶一提：
1. Thunk 也是一種 pattern https://en.wikipedia.org/wiki/Thunk
2. Saga : http://www.cs.cornell.edu/andru/cs711/2002fa/reading/sagas.pdf
TR;DR:Saga，就是個滿足特殊條件的 LLT(Long lived transaction)。
3. observable : 當然也是 pattern (Observer Pattern)
- Server-Side Rendering or Universal
next.js -> Nuxt.js - 基於 functional component 的方案 ：React Hooks -> Composition API
- headless CMS or JAMstack : https://headlesscms.org/
最後，關於 Vue 的理解都是來自 Advanced Vue.js Features from the Ground Up @frontendmasters by Evan You ，本人授課。
我無聊打發時間看的，沒有很認真😭
有錯請告知我～
至於大陸B開頭的網站有人偷影片我是強烈抗議的！支持正版！
後記：
文章發出之前，又有討論一下，
開頭截圖的朋友說：「就前端框架的發展與應用來說，各種實驗性的新潮流幾乎都先從 React 的生態圈裡出現」
確實，實驗性或是比較創新的潮流都是 React 先出現比較成熟的技術，這也就是大家比較常覺得「這怎麼和 React 那麼像！」，而鮮少覺得是 Vue 有創新吧？
