2018 企業前端框架趨勢論壇之問答回應 (完整版)

我們今年在 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 或 Vue，相對的進入障礙較高，需要先學習更多基礎知識(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
• 線上課程
  • Angular: 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 的相關經驗，會怎麼去評估這三套是否適合用在自己的情境上

你必須多找專家交流，讓有經驗的前端開發人員，幫助你評估各種不同面向。

為了討生活是否建議一定要精通兩種以上的框架才能比較好找工作

其實討生活本來就不用十項全能，你只要能認真學好任何一種前端框架，基本上就生活無虞了。

以目前的情勢來看，學習前端的人到處都是，但是真正優質的、資深的前端人卻相對稀少，請參閱上面兩題關於【怎麼樣才可以稱得上是資深前端工程師】的回答。

你應該認真思考專心投入一套框架，再考慮要不要學下一個。不然樣樣通、樣樣不精，其實對你找工作沒太大幫助。如果真的學好了，沒有找不到工作這種事。當然，要是你自認為學的不錯，也可以隨時歡迎來我公司 投遞履歷 ，好的人才我們都歡迎！ :smiley:

請問講師是否有碰過angular中因為使用lazy loading導致hmr無法適用的問題？

沒碰過此問題。

歡迎可以到 台灣 Angular 技術論壇 或 Angular Taiwan 臉書社團 提問。

可以推薦可以輔助新手開發的 Visual Studio Code 擴充功能嗎？謝謝。

• Angular: 唯一推薦 Angular Extension Pack
• React: React Extension Pack
• Vue: Vue.js Extension Pack

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就好 :joy:

學習 Vue 不用放手投入，輕鬆投入就好。

要是想認真投入，往資深走的話，除了多鑽研技術原理外，還可以多著墨 UI/UX 的相關知識。畢竟做前端，目的是要給使用者用的。

用 TypeScript 的好處到底是什麼？為何很多工程師很愛？

我認為 TypeScript 的優點太多了，如果你是「純前端」的話，可能短時間無法體會，因為如果你只寫過一種程式語言，自然無法比較不同語言的特性。所以我通常會建議大家多學幾種程式語言，培養對程式與架構的理解，而且前後端都不要對自己設限，有機會都可以玩玩看。

以下我列出幾個 TypeScript 的優點：

1. 強型別：由於 JavaScript 是一種弱型別的程式語言，所有程式碼都是在執行時期才開始動態編譯，所以不容易在開發時期發現問題。而 TypeScript 改善了這個問題，他提供編譯器，可以提供開發工具編譯時期檢查，可以幫助你在開發時期就能發現程式碼的問題。

2. 先進的語法：撰寫網頁應用程式，最麻煩的就是瀏覽器的相容性。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
ng g c name

但是整體來說，真正複雜的元件，要著墨的地方在於「狀態管理」，所以除了基本的 UI 元件外，如果面臨到「狀態管理」的部分，就要多學一些相關知識、套件，才能游刃有餘。

• Vue: Vuex
• React: 內建 Context API / Redux
• Angular: 內建 Service 元件 / NgRx / NGXS

在 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,其他兩個有嗎

• Angular: Augury
• Vue.js: Vue.js devtools

HTML5 除了 Web Push Notification 之外，還有那些新功能可以取代行動裝置的原生功能？ 透過 PWA 封裝的 WebApp 除了可以快速佈署外還省去送審的關卡，似乎也是不錯的選擇。

• Geolocation: http://dev.w3.org/geo/api/spec-source.html
• Motion Sensors: http://dev.w3.org/geo/api/spec-source-orientation.html
• Touch Events: http://www.w3.org/TR/touch-events/
• Pointer Events: http://www.w3.org/TR/pointerevents/
• Network Information API: http://www.w3.org/TR/netinfo-api/
• Media Capture Stream (getUserMedia): http://dev.w3.org/2011/webrtc/editor/getusermedia.html
• Battery Status API: http://www.w3.org/TR/battery-status/
• Vibration API: http://www.w3.org/TR/vibration/

目前的新框架五花八門，請問在挑選使用的時候，都會怎麼去考量挑選呢？

請看本次 企業前端框架趨勢論壇 活動錄影重播，我這次的演講分享了許多不同面向的觀點，告訴大家如何挑選前端框架。

遇到產品使不同框架的過渡期，會建議全部統一一個框架，還是繼續做維護就好？實務上有沒有可能一個產品同時使用不同的框架

如果要我給建議，全部統一用一套會比較好維護。

如果因為是過渡期，又沒有多餘的資源可以改寫，也是可以兩套並存一段時間。

實務上一個產品同時使用不同的框架比較不常見。

如果導入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的需求是大部分使用者都使用低效能的手機在使用這服務。 那三個框架針對效能調整這塊有沒有什麼可以分享的部分。

如果手機真的慢到不能用，是有幾個方向可以建議：

1. 實現 Server-side Rendering (SSR) 伺服器端渲染，減少 JS 執行的機會
2. 對現有框架進行效能調校，但目的一樣，就是要減少 JS 執行的機會！
3. 有時候效能瓶頸不在 JS 喔，也很有可能是 CSS 造成的！

其他專家撰寫的分享文章