我們今年在 2018/9/15 舉辦了一場「企業前端框架趨勢論壇」活動，現場來了將近 200 人，可見許多人對前框架的發展相當感興趣。由於是我們第一次舉辦大型活動，我發現整體活動安排得不是很理想，尤其是最後專家座談的部分，留給會眾提問的時間太少了，這點我們一定會在日後的活動中改進。本篇文章，我打算回答線上提問的所有問題，幫助大家釐清疑惑。
常常看到 React、Angular、Vue 比較的文章，但是都是著重在技術本身，似乎很少比較應用面，我想知道什麼樣的技術比較適合開發什麼性質的網站，這樣比較容易了解適合導入哪種技術。
基本上，這三套框架都很適合開發各種性質的網站。
我們一般不會特別考量「簡單網站」的情境，因為簡單的網站，用什麼前端框架都簡單，也都沒什麼太高的門檻。如果真的認真要比，大家公認 Vue.js 是最容易上手的。所以如果光從技術本身來看框架比較，確實會比較狹隘，畢竟使用這些框架的都是「人」。也因為如此，才會衍生舉辦本次活動的想法，提供更多面向，幫助大家思考企業應該如何選擇前端框架。
如果考慮到頁面多、功能複雜等應用，如企業內部系統、電子商務網站等等，就真的要好好思考框架是否有足夠的穩定性、良好的學習曲線、未來發展性、開發風格一致性、模組化的易用度、開發工具支援度、是否容易重構、有沒有程式碼產生器、是否有完整的最佳開發實務、... 等等。
想請問前輩，如果遇到需要打掉重練（原：web layout刻板+jQ) 的問題，三種框架會怎麼引入或是怎麼解決呢（個人或顧問觀點）？ 如果帶新人，也是多以jQ為主的新人，要如何帶入框架的運用呢？（一口氣學完es6/TS，可能產能會降低一段時間 v.s. 如果有可能，一步步導入，……但如何操作呢？）
許多前端的新手都是從 jQuery 入門，如果現有網站需要打掉重練，還是要看網站的複雜度而定。
由於前端框架上手的難度不一，以一個概略的估計來看，這三套框架的複雜度大概是： React > Angular > Vue
就如同本次活動我一開頭講的，我們所討論的，不僅僅是框架本身，而是整個開發生態圈。Angular 本身就是一套完整的前端框架，而 React 與 Vue 只是個函式庫，這其實不太具備可比性。但我們最終的目的還是要打造出完整網站，所以如何利用這些前端工具，打造出一個網站，是我們更加重視的問題。
大家都了解先蹲後跳的觀念，你想要跳的高，一定需要花點時間蹲低，然後才有足夠的反彈力。如果網站功能並不複雜，想逐步改寫網站，確實採用 Vue.js 是個不錯的選擇，進入門檻也相當低，可以一頁一頁的打掉重練。另一方面，若採用 React 或 Angular，相對的進入障礙較高，需要先學習更多基礎知識(ES6,JSX,TS)與工具(Webpack,Parcel)才能有效率的開發。
能否請 React、Angular、Vue 的大神們，分享一個自己最熟悉的前端框架的一個缺點，謝謝！
這部分我摘錄現場的專家回答：
- Vue: 因為 Vue 是一套函式庫，必須慢慢了解 Vue 這個生態系，很多功能需要摸索與整合。
- React: 開發生態改變較快，需要經常更新技術、觀念與架構。
- Angular: 進入門檻相對於 Vue 來說較高，對架構上的要求也比較嚴謹，比較無法跟後端架構整合。
Vue背後沒有富爸爸。請問收掉的風險會不會比較大
開源專案沒有所謂「收掉」這件事，以目前三大框架的熱度來說，短時間內不太可能會收掉。
不過，如果少了 Evan You (尤雨溪) 的話，短時間應該還是會受到一點衝擊，但我個人也認為影響不大。
請問保哥是怎麼學習 Angular 並準備課程呢？我想應該不是把官方文件從頭看到尾吧？
我都會從學員的角度出發，深度思考學員在學習一門框架時的思路為何？他們有可能哪裡無法理解，然後用各種不同的面向加以解說，在想一些問題問大家，確保大家理解正確。
在這之前，當然要把官方文件從頭看到尾，講師真的沒這麼好當！ XD
現職公司無使用三大框架但仍想接觸的人，該從什麼方向去練習專案開發
我個人認為報名實體課程是最有效率的學習方式。如果短時間內沒有開課，購買線上課程自學也是非常好的解決方案。
如果有耐心，查看官網文件也是新手上路的不二法門。
最後，建議大家先從小案子做起，多累積一些開發經驗，對未來開發專案很有幫助。
無師自通那是頂尖高手在做的事情，但是對於時間有限的一般開發者來說，目前有哪些書籍、官方文件以外的學習資源。
- 推薦書籍
- Vue: https://www.tenlong.com.tw/categories/vuejs
- React: https://www.tenlong.com.tw/categories/react
- Angular: https://www.tenlong.com.tw/categories/angular
- 線上課程
翻開 104，Vue 跟 React 的職缺比 Angularjs、NG2+ 還多。 現在學了 NG 還能讓你的人生不 NG 嗎？
好的工作一個就夠了，在人力市場比較工作職缺多寡，對一般人來說比較沒甚麼意義。如果你是高手高手高高手，用哪一套框架都一堆人搶著要。
之前看過一篇文章，內容提到將來可能會有"以web component作為中介，讓目前流行的三大前端框架技術在同一專案中的整合運用"這樣的趨勢，例如在angular 中使用其他兩個技術所建立的web component。想請問講師們關於web component的使用趨勢、這種整合方式的優缺點之類的。謝謝講師們！
可參考 微前端的那些事儿 | microfrontends 或 Micro Frontends - extending the microservice idea to frontend development
- 優點
- 適合大型組織、參與開發人數眾多的情況。
- 極度複雜的前端應用程式，無法統一框架使用，可透過微前端進行整合。
- 缺點
- 概念還太新，缺乏業界最佳實務。
- 網站可能會面臨過大的 bundle size。
想了解 Angular CLI 和 Vue CLI 大致上是一樣的概念嗎？可以用 Angular CLI 的概念去理解 Vue CLI 嗎？兩者差別在哪呢？
CLI (Command Line Interface) 就是提供一種命令列工具，幫助你產生專案骨架與程式碼，用途都差不多，只有命令與參數用法不同。
由於 Angular 現在推出新版本的速度算滿快的(個人認為) 對於大型專案時常面臨是否版本升級的問題。 想請教針對這個問題有沒有一個妥當的應對方法？其考量的點會是哪些？
從 Angular CLI v6 開始，推出了 ng update 命令，只要執行下去，網站 Angular 程式碼就會全自動無痛升級。
目前其他兩套框架都沒有相對應的升級工具，未來應該也不會有，因為 Angular 的框架較為完整且一致，比較容易實現這個功能。
怎麼樣才可以稱得上是資深前端工程師？是對瀏覽器的相容性很熟，還是對專案進展速度可以掌握？可以說說看你們認為的答案嗎
資深前端工程師，應該具備良好的溝通能力，有能力剖析問題與了解需求，對 UI/UX 有一定程度的見解，並且能夠綜觀解決問題的脈絡。
同時，資深前端對技術細節與原理也需有深入理解，能跟團隊其他人溝通想法，如此才能設計出真正合適的架構。
假設你今天沒有寫過 react、angular、vue 的相關經驗，會怎麼去評估這三套是否適合用在自己的情境上
你必須多找專家交流，讓有經驗的前端開發人員，幫助你評估各種不同面向。
為了討生活是否建議一定要精通兩種以上的框架才能比較好找工作
其實討生活本來就不用十項全能，你只要能認真學好任何一種前端框架，基本上就生活無虞了。
以目前的情勢來看，學習前端的人到處都是，但是真正優質的、資深的前端人卻相對稀少，請參閱上面兩題關於【怎麼樣才可以稱得上是資深前端工程師】的回答。
你應該認真思考專心投入一套框架，再考慮要不要學下一個。不然樣樣通、樣樣不精，其實對你找工作沒太大幫助。如果真的學好了，沒有找不到工作這種事。當然，要是你自認為學的不錯，也可以隨時歡迎來我公司投遞履歷，好的人才我們都歡迎！ 😃
請問講師是否有碰過angular中因為使用lazy loading導致hmr無法適用的問題？
沒碰過此問題。
歡迎可以到 台灣 Angular 技術論壇 或 Angular Taiwan 臉書社團 提問。
可以推薦可以輔助新手開發的 Visual Studio Code 擴充功能嗎？謝謝。
Angular有雙向綁定，vue也以訂閱者/觀察者模式實踐雙向綁訂，需要理解背後的pattern再實做嗎？ 指新手盡量不要用到雙向綁定的做法？ ，還是框架設計出來用就對了，讓經驗慢慢理解…… 簡化問題，那種比較合適： "某天發現原來這是一個pattern" vs "先理解pattern才實做，否則盡量避免使用"
我有一個簡單的答案：先求有，再求好，你能做出功能，做出網站再說，做不出來，無法解決問題，其他什麼都是假的。
但是如果你有餘力可以多學習，先了解 Pattern 在開始實作，是個不錯的選擇！
另外，各框架都有 Best practices (業界最佳實務) 可以參考，如果能避免犯錯，當然可以先做好準備更好！
Vue生態從早期是抽取angular某些功能（樣板語法/雙向綁定） ，到後期越來越往類似react的概念去構思核心 （redux-vuex,next.js-nuxt.js)，請問作為簡單上手的vue,如果往資深走的話，平時會選擇angular or react作為side project嗎？還是放手投入vue就好 😂
學習 Vue 不用放手投入，輕鬆投入就好。
要是想認真投入，往資深走的話，除了多鑽研技術原理外，還可以多著墨 UI/UX 的相關知識。畢竟做前端，目的是要給使用者用的。
用 TypeScript 的好處到底是什麼？為何很多工程師很愛？
我認為 TypeScript 的優點太多了，如果你是「純前端」的話，可能短時間無法體會，因為如果你只寫過一種程式語言，自然無法比較不同語言的特性。所以我通常會建議大家多學幾種程式語言，培養對程式與架構的理解，而且前後端都不要對自己設限，有機會都可以玩玩看。
以下我列出幾個 TypeScript 的優點：
-
強型別：由於 JavaScript 是一種弱型別的程式語言，所有程式碼都是在執行時期才開始動態編譯，所以不容易在開發時期發現問題。而 TypeScript 改善了這個問題，他提供編譯器，可以提供開發工具編譯時期檢查，可以幫助你在開發時期就能發現程式碼的問題。
-
先進的語法：撰寫網頁應用程式，最麻煩的就是瀏覽器的相容性。TypeScript 可以讓你在開發時期使用 ES6 (ES2015) 以上的所有語法，例如 class, constructor, interface, 以及物件導向的各種寫法，透過 TypeScript 編譯器轉譯之後，甚至可以用 ES3 的語法輸出，瀏覽器相容性問題可以被徹底解決。
請問各位專家，怎麼跟設計師配合實作？
在我們公司，網頁設計師負責設計好版面，有時候會直接肩負切版的責任，基本上不會讓設計師處理前端程式部分。
設計完成之後，會交由前端工程師負責套版、套功能、設計互動事件。
不過不同公司，分工有所不同。
React生態系龐大，優點是可以選擇不同的解決方案，缺點是（如果作為決定者）需要花費很多心力去理解不同方案差異，請問遇到類似問題是如何選擇/說服上位主管呢？
建議找公司外的專家去說服老闆，不要自己來。
backend 不是 node.js 的時候，在使用這些前端框架時，SSR 該怎麼辦？
可以考慮採用 Rendertron 技術，它有支援容器部署，非常方便！
請問 WebAssembly 的優缺點？
優點：快！
缺點：還在持續發展中，需要一兩年時間才會慢慢普及，開發工具也才會慢慢跟上！
Angular 在網路上查解決問題的資源很少，大多是AngularJS的，該要如何搜尋？對於初學者遇到比較困難的功能，該如何著手進行？是找人家已開發好的component ？還是嘗試自己寫？
Angular 官方文件相當完整，搜尋功能也非常棒，建議可以多利用。
初學者遇到困難的部分，可以到 台灣 Angular 技術論壇 或 Angular Taiwan - Facebook 提問。在這邊提問，大家都非常熱心回答，還沒有什麼解決不了的問題。
建議先會用別人的元件，再考慮自己改寫看看，再來就自行開發元件。我之前有整理過一篇 2018 Angular 常見 UI 元件庫優劣分析 文件，你也可以參考看看。
想要了解vue的原始碼以及架構模式，從何而學？
這本 Vue.js 技术揭秘 電子書，有相當深入的技術剖析，可以看看！
請問 R, A, V 都有個自的 UI 元件庫，但是一定還是無法滿足PM 或客戶需求的情況。 請問在遇到需要自已發開元件的情況 R, A, V 這三種技術是否有各自的優缺點？
- 撰寫 Vue 元件超級簡單，一個
*.vue 檔就是一個元件。
- 撰寫 React 元件超級簡單，寫好一個函式或類別就可以產生元件。
- 撰寫 Angular 元件也超級簡單，一個
ng g c name 就可以建立好元件。
但是整體來說，真正複雜的元件，要著墨的地方在於「狀態管理」，所以除了基本的 UI 元件外，如果面臨到「狀態管理」的部分，就要多學一些相關知識、套件，才能游刃有餘。
在 SPA 且多人開發的環境下，R, A, V 這三種技術如何共用資料又不影響他人的元件？
可以考慮使用 Web Components 技術。
想詢問有關於前後端相接時，如果前端 angular、vue、react 放在外網、但是後端放在內網，而圖檔也同樣從後端用程式產生的話，這樣要怎麼讓前端 end user 也可以看到圖片？？
你的圖片必須放在 DMZ 才能讓大家看見圖片。
為什麼調查的跟聽到的相反，通常都是react >vue>angular
我們只有統計參加本次活動的前端框架採用比例，所以很有可能跟實際框架使用的人數有所差異。
三套框架是怎麼做 unit test 和 e2e test
三套框架都有相對應的單元測試與 e2e 測試作法，詳細教學請參閱各官網。
想請教大型與小型的前端專案，有什麼量化的基準呢？例如 Facebook 網站算是大型的專案嗎？跟 Gmail 比起來呢？
這部分的確很難量化，都是主觀的感覺為主。你所舉例的 Facebook 與 Gmail 都算大型專案，功能多、狀態複雜。
三套工具有幫助 debug 的工具嗎
都有喔，而且都不只一套！
React有很多chrome plugin,其他兩個有嗎
HTML5 除了 Web Push Notification 之外，還有那些新功能可以取代行動裝置的原生功能？ 透過 PWA 封裝的 WebApp 除了可以快速佈署外還省去送審的關卡，似乎也是不錯的選擇。
目前的新框架五花八門，請問在挑選使用的時候，都會怎麼去考量挑選呢？
請看本次 企業前端框架趨勢論壇 活動錄影重播，我這次的演講分享了許多不同面向的觀點，告訴大家如何挑選前端框架。
遇到產品使不同框架的過渡期，會建議全部統一一個框架，還是繼續做維護就好？實務上有沒有可能一個產品同時使用不同的框架
如果要我給建議，全部統一用一套會比較好維護。
如果因為是過渡期，又沒有多餘的資源可以改寫，也是可以兩套並存一段時間。
實務上一個產品同時使用不同的框架比較不常見。
如果導入Vue，如何讓沒有學過框架的人快速上手？
直接用就很好上手了。
請問哪裡有付費的專家定期 review code
可以洽詢 多奇教育訓練，我們有提供 Code Review 服務。
若使用TS的話，對使用第三方套件的話，是否有影響？ 第三方套件不是TS版本，是否就不能用了呢？
第三方 JS 套件如果沒有 .d.ts 模組定義檔，也可以將型別宣告為全域變數使用，完全可以無縫整合。
請問從 MPA 進展到 SPA （Angular/Vue/React）設計之下，GA(Google Analytics)/GTM(Google Tag Manager) 有哪些需要注意或改變的地方？
在 SPA 切換頁面的地方，需要埋設 GA 追蹤碼。GTM 的部分則用不太到了！
想問，前端在歐洲GDPR政策上，會需要做什麼樣的調整和需要注意什麼？
只有部分 UI 需要調整，例如 Cookie Consent 的頁面。
想知道關於 Angular 和 React, Vue 的編譯後,核心部分的js檔大小差距的看法
基本上 bundle size 都是可以調校的，而且大家都有 tree-shaking 機制，會自動刪減用不到的程式碼。
這三套由於 Angular 是完整框架，目前來說 bundle size 確實大一些。下一代 Angular 7 將推出 Ivy Renderer 功能，可以大幅縮小 bundle size，到時三套框架就不相上下了。
Angular 哪一套 third party 最適合大行公司使用 Angular material component 數量有點少 PrimeNg bug問題有點多 專家的建議是什麼呢
我們一般都建議用 PrimeNG，就算出問題也可以自行調整，因為原始碼很容易閱讀與修改。
如果有錢的話，也可以買商用的 Angular 元件來用。
以一個前端工程師沒有學過後端概念的人 有沒有什麼建議可以進入架構設計
剛剛有說到 angular 遵守 style guide 就可以降低大家開發上的差異性，那，在vue跟react其實都有style guide，還會有開發上的差異性跟困難度嗎？
Angular 就有內建 TSLint 可以檢查應用程式架構與程式撰寫風格，相對來說比 Vue 跟 React 完整。
如果要做多國語言的網站，會比較建議用哪一個框架？
都好。
什麼樣的情境，你們會想用 pure js
我目前對 PureScript 尚未有深入著墨，無法提供建議。
使用 Vue 的寫法與往常最大的差異在哪裡？
主要是元件化與模型繫結的觀念差異最大。
想請教如果前後端分離時，需要做到使用者登入狀態的問題（已經登入過），重新整理時，要如何讓使用者有順暢的登入流程呢？現在都知道可以用 token 之類的機制來做驗證，但登入人頭可能會閃爍或如果延遲而遲遲沒有獲得結果，想了解經驗上如何解決這件事情呢？或是會需要依賴 SSR 嗎？
你可以透過隱藏的 iframe 在背景更新 Token，但跨網域的情境下，可能會遇到 CORS 的問題，需要特別注意。
(問保哥) 假如要用一句話你會怎麼形容 Angular？
完整而全面的前端框架，適合多人開發中大型企業應用。
剛入門一種框架，要用什麼方式學習會比較好呢？
- 報名實體課程
- 購買線上課程 (要認真觀看與實作)
- 購買經典書籍 (可以到社群請專家推薦)
- 多參加社群交流
為何當初選用 angular / react / vue，個人的使用心得好處跟壞處
參見 Angular / Vue / React 框架優缺點分析
哪個架構工作比較好找，哪個薪水比較高
這點很難說，我只能用我 "個人" 主觀認定給予評價，以下資訊請斟酌參考：
- 好找工作：
React > Vue > Angular
- 薪水高低：
React > Angular > Vue
在使用前端框架時會把其他頁面的code在最一開始就載入，造成首屏顯示速度變慢和載入了可能不會使用到的code，請問前輩們是怎麼看待這個問題和是怎麼解決的呢？
一般都透過 Server-side Rendering (SSR) 技術來解決。
像是Angular跟Vue都有一鍵建立的方式，會不會在未來使用的時候，大家都不懂的怎麼用指令去建立了？
不會。因為我們有 Google 好朋友。
想問個問題，假設現在有一個APP的需求是大部分使用者都使用低效能的手機在使用這服務。 那三個框架針對效能調整這塊有沒有什麼可以分享的部分。
如果手機真的慢到不能用，是有幾個方向可以建議：
- 實現 Server-side Rendering (SSR) 伺服器端渲染，減少 JS 執行的機會
- 對現有框架進行效能調校，但目的一樣，就是要減少 JS 執行的機會！
- 有時候效能瓶頸不在 JS 喔，也很有可能是 CSS 造成的！
其他專家撰寫的分享文章