[心得] 2018 企業前端框架趨勢論壇
企業前端框架趨勢論壇：分析 Angular, Vue, React 的現在與未來
本篇文章適合新手，不論是否接觸過框架。
這次活動蠻多常常看到的大神，討論的也是比較新手向的議題：
要選擇哪一種框架 ？
寫文背景 : 在使用 ng 後約兩個月，從刻版到 jQ 到工作大概時間約1年。
順帶一提，這個文章有 reference 的影片: https://www.udemy.com/ent-frontend-2018/
文章描述 A, R ,V 分為兩個部分，並且於撰文後在 2019/05/28再次補充。
0.你可能會想認識這些歷史 ?
1. 講座前準備
2. 講座後心得 & 講座 概論
- 框架發展現況與評比要點
- 框架類型
- 整體學習曲線、 主要程式語言
- 開發生產力
- 伺服器端渲染 SEO
你可能會想認識這些歷史 ?
一開始比較好奇Flux這個名詞，所以有 run 過一輪 Github上面的flux/examples ，大概花了2小時按照 README 跑一輪。
結論是: 新手2小時其實看完還是會不太理解怎麼寫 React，只大概了解為什麼要用flux以及檔案文件架構。
後來 也嘗試過 Angular 快速上手。
目前 https://angular.tw 有繁體中文文件，教學寫得很仔細，每個階段都有 code 可以對照，懶得打字還有線上版本可以一件開啟。
目前，至少你看這個看的懂上面的範例，或是不會排斥看 code。
多次提到「新手、選擇框架」，第一步是多看別人的範例 code.
因為如果之前只用過 jQ 或是簡單的 DOM原生語法，之後會寫到更多 js，透過這些練習，可以知道不同框架的風格。
然後主要看 Vue , Angular ，React 實際風格與寫法。
code 看一看，大概就一天 8 hrs，看個三五天，然後大概會有一些和 jQ不一樣 的感覺：
- 資料繫結（ Data binding）三大框架都有， 和以前 jQ 操作 DOM 方向完全不一樣，不要用 過去 jQ 思考了，見 Q&A part。
* Angular 有四種繫結(binding)，大概看一下其實每種框架都差不多這幾種。 - 一般而言，Angular 的一代又稱 Angular.js ，其他 Angular 2–8 名稱是 Angular ( 沒有 “.js” )，所以 Angular 有砍掉重練，基本上是幾乎不一樣東西了，不要誤會，工作時也不要找錯，學/找 新的（2–7）工作就好
基本上 Angualr 什麼功能都有，但也不方便自定義或是不能只取用部分，需要整套使用 。
所以 Angular 是「框架」
- Vue（1.x）有抄 Angular ，因為 Vue 一開始作者是用 Angular.js，所以樣板的語法會很相似 ( *ngFor / v-for )
然後 Vue 2.x 重構很多內容，基本上參考很多 React 的概念 (如 Virtual DOM )，基本上 1.x ／ 2.x 差異也是頗大的，學新的（2.x）就好。
未來的 Vue 3.0，目的是為了開源者開發的方便，可以更好的偵錯，改用 typescript 來重構與增加型別檢驗。 - React 基本、只看核心不難（官方文件至多３．４天），但是你光會核心沒用，React 只處理很小的部分 (畫面)。
如果要 能具體解決問題，你會需要生態系（Ecosystem）支援，這邊是入門最難的，
然後中階之後你會卡在函數式程式設計（functional programming），這是 React 主流思想，所以如果是 functional programming 狂熱者，非常適合。
Vue 和 React 都「必須」透過生態系來解決問題或是達成整體開發體驗，否則能處理的範圍十分有限。
這也是 Vue / React 普遍上被歸類在 Library的原因
- 給functional programmer :
講座 Q&A + 講座後心得
其實講座很長，大家關注的就是Q & A ，這邊直接附上各位大神的連結。
[Will 保哥] — Angular代表方 QA回答
[Kevin] — Angular代表方 QA回答 (2篇文章)
[ Kuro Hsu] — Vue 代表方 QA回答
1. 框架發展現況與評比要點
2. 框架類型
3. 整體學習曲線、 主要程式語言
4. 開發生產力
5. 伺服器端渲染 SEO
1. 框架發展現況與評比要點
大家好像蠻在意富爸爸是誰，不過 Google 收掉不少專案，好像有沒有公司支援也不是重點 (?)
FB 的 react ，基本上都是他們在 FaceBook.com 使用後才發佈出來，所以穩定性也沒問題。
其實 Vue 現階段蠻爽的，只要不是因為錢之外的問題，應該都不會斷更(?)
這邊分享一個講座聽到很好玩的理論 -
巴士係數
通俗地說即多少關鍵開發者被巴士撞了，會讓專案停擺。
所以尤雨溪大大出門要小心啊 ……（？）
另外講座有提到，React核心已經有換過人了，比如 Redux 作者 Dan 加入 FB 去做核心了，然後宣布不玩 Redux 要去做新的 Context API ，
追React必須要有追明星的心靈，不然技術一直被淘汰掉也4蠻傷心地 :(
說到這 Vue.js 3.0 也有消息了 ！
不過比較像是 Angular 的方向，針對內部API、render重構、 tree-shake、把React的 Functional components 、 class-based components 。
重構部分加強對 TS 的支援，而且是用TS重構 ……看來TS在前端工程只會越來越重要，而且基於 TS 重構的程式碼也會增加精確性，Debugger 變更強。
2. 框架類型
沒什麼特別的，只是說 Angular 全部都包，彈性低但不用擔心整合。
Vue 部分官方整合，部分可以自己運用生態圈搭建。
React 自行加油，hardcore mode！
詳細一點說， Angular 有 CLI 的支援，封裝整體可以透過指令操作自動產生檔案(參考 Angular quick start)
Vue 也有 CLI ，但能力沒很強，特色是圖形化程度高更適合新手。
React 的 Create React App ，沒有特別維護，適合學習或是 side project 起手，不建議產品實務上使用。
3. 整體學習曲線、 主要程式語言
React 前面卡很久生態系，熬過還有超級深度整合的JS -> Haskell (functional programming) -> Category Theory (math or … philosophy ?) 迴圈，不怕沒有東西挑戰！
其實 React 基本上還是 JS，只是用 functional Style ，所以很多資深開發者不用學太多新語法，就算學也很快能上手，畢竟資深開發者 JS 功力都很強。
Vue 還在吸收優點，使用時要注意保持簡單好上手、架構簡單，看完前面資訊要往深入走也有路(可以相互參考 React / Angular)。
Angular 的 TS 變成潮流， 8.0 也差不多上線了，熬過前面不怕有天坑 (望向 React … )，不過可能要去學蠻物件導向觀念、SoC、DI、Rx.js … 幫助開發速度提升，前提是你要學完 == 。
- 前端工程架構
這邊主要講的是模組化架構、多頁面開發的複雜度、多人開發框架一致性比較、開發風格彈性與否……
基本上就是Angular該有都有，風格一致但彈性低，其他框架就是相反。
這邊另外提一下，有人認為Angular東西管太多了，所以跳去Vue，
但是如果沒有那麼多規範，風格彈性，容易造成多人開發管理上的問題，
( 這點在資深開發者不是問題，所以很多人跳離開 Angular )
舉個例子:
Angular 像是升學班，大家都很好，但都長得差不多，
React 像是資優跳級生，可能有人很強，強到看不見車尾燈，但是這種人通常很難用統一的規範管理…
你說 Vue ?
常態分佈你懂嗎?
新手福音你懂嗎?
4 .開發生產力
基本上聊到這邊，和前面重複性很高了。
Angular 風格一致，如果有一天你學完了... 恩，你就可以開發了，
Vue 入門快，學習曲線短，但可能遇到「知其然不知其所以然」的開發問題，
React 彈性高，吃 JS(PF) 能力，能力越高開發越快。
5. 伺服器端渲染 SEO
因為現代框架基本都是用 “一個” 進入節點的DOM，所以基本上 SEO 抓資料都是空的，只有一個DOM，因為 SEO 爬蟲 不會解開 js 。
但是新版的 Chrome 有爬 SPA + 解開 js ，如果你只考慮 Chrome ....
( <app-root> </app-root> or <div id=app-root></div>之類的東西) ，
Google建議解決方案 : Rendertron (https://render-tron.appspot.com)
如果把上面的網址，用右鍵看原始碼，會發現上面這個被解開的 JS，解開後沒有 JS 功能了，作用是留下 html tag 給爬蟲看，所以正常人無法操作。
再說一次，記得，rendertron 方案是給 bot 看的，所以還要架一個 web server 處理判斷，如果是bot就導到方案出來的網址 :
如果是正常使用者瀏覽，請導回原URL，不然頁面會死 (沒有JS)。
隨意總結:
完全新人/設計師 : Vue
想練 JS、有JS經驗的 資深人員: React
沒有資深 又要上服務 : Angular 都設定好，按照官網走就可以開發
認真總結:
以前 Angular 最令人詬病就是 打包之後太大，未來 (2019/9月)要出一個大殺器 ivy，將會讓打包之後的檔案小到不可思議
目前 React 最大更新 是 Hook， 但這第一次將 “約定優先” 理念引入了 React 框架中（函式命名遭到官方限制，JS 自由主義者也許會暴跳如雷）
這也是 React 社群第一次妥協， 第一次限制。
There’s More Than One Way To Do It. ( 「TMTOWTDI」) 轉變成
There’s more than one way to do it, but sometimes consistency is not a bad thing either.
