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

The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

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 或 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的使用趨勢、這種整合方式的優缺點之類的。謝謝講師們!

可參考 微前端的那些事儿 | microfrontendsMicro 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 的優點:

  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 元件超級簡單,一個 *.vue 檔就是一個元件。
  • 撰寫 React 元件超級簡單,寫好一個函式或類別就可以產生元件。
  • 撰寫 Angular 元件也超級簡單,一個 ng g c name 就可以建立好元件。

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

在 SPA 且多人開發的環境下,R, A, V 這三種技術如何共用資料又不影響他人的元件?

可以考慮使用 Web Components 技術。

想詢問有關於前後端相接時,如果前端 angular、vue、react 放在外網、但是後端放在內網,而圖檔也同樣從後端用程式產生的話,這樣要怎麼讓前端 end user 也可以看到圖片??

你的圖片必須放在 DMZ 才能讓大家看見圖片。

為什麼調查的跟聽到的相反,通常都是react >vue>angular

我們只有統計參加本次活動的前端框架採用比例,所以很有可能跟實際框架使用的人數有所差異。

image

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

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

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

其他專家撰寫的分享文章