企業如何挑選一款適合的前端框架?

2020-12-16 IT168

  【IT168 評論】前端語言和框架發展迅速,每年都有很多的庫和框架產生和消亡,企業如何才能在高產且良莠不齊的框架中保持理性,選擇出正確的前端框架呢?

  新加坡CXA Group在對其核心網絡平臺進行評估時,決定將其老化的現有架構全部轉移出去,並從頭開始構建前端,使得其在全球12個國家和地區的Web應用程式都能夠運行良好。在交付項目前期,他們組織了一系列對JavaScript前端框架的評估,這些評估比較全面,現在和大家分享出來,希望能夠對其它企業能有所幫助。

  縮小範圍

  前端框架幾乎每天都會有新的發布,所以要先進行分析以減少框架範圍。通過收集信息和業界推薦,CXA鎖定了Angular 2、Aurelia、Vue.js(推薦)和React(推薦)這四款框架。

  然後CXA根據自己的要求簡單列了一些標準來評估這些框架,並查看排名。這些標準有一些是可以在網絡上查詢到的,而有一些則需要去驗證。

  靈活性

  CXA選擇的框架需要提供一系列配置選項,並且要進行相對簡單的定製,所以要不就是他們做出完整的架構,要不就是這樣框架要完全開放。

  Angular 2無論是從狀態伺服器還是路由器或者是處理程序來看,都是不錯的選擇。Angular 2的好處是可以快速輕鬆的啟動和運行,但是不好的地方是它的模塊無法滿足CXA的全部需求。

  而React,Vue和Aurelia就不同了,它們都提供了交換組件的能力。另外, Aurelia和Vue還有React沒有的優勢,就是在其初始設置中具有可配置模板文件的優勢。

  與Vue一樣,React本身只構建了需求的一小部分,但是React自推出以來就已經創建了各種目標,如React Boilerplate和Create React App。

  CXA在對React項目進行測試時,沒有使用特定的模板,而是直接進入,而且這些只是參考代碼,所以還多安裝了幾個。雖然方法有些困難,但是通過這次測試,他們從React堆棧中學到了很多關於組件的信息,並且對於測試結果也具有絕對的信息。

  最終,Vue和Aurelia憑藉其平緩的學習曲線和模塊化結構在這一輪獲得了勝利。

  離線支持

  對於很多工作人員來說,Web應用程式在沒有實時或穩定的Internet連接的情況下運行的能力已成為剛需。而CXA由於在這方面缺乏經驗,所以就只是確認了所有參與評估的框架是否提供離線支持,並沒有做其他深入研究。

  輕量

  發送到客戶端的代碼字節大小對於帶寬和處理器時間在瀏覽器性能上有很大的不同。隨著自定義代碼和第三方庫的添加,字節大小對於項目的影響只會更多。CXA集團的目標市場擴展到帶寬非常高的國家,所以他們至關重要的一點是向客戶提供儘可能少的代碼。

  為了代替反映生產配置的硬數據,他們研究了核心庫的大小,希望能得到一些啟示。

  Vue的開發人員已經將其核心庫縮減到23 KB,React和Aurelia位於中間,分別為大約42 KB和64 KB,而Angular 2則為最重,143 KB(包括RxJS)。

  所以,Vue,Aurelia和React都在考慮範圍之內,而Angular 2則有些過重。

  伺服器渲染

  早期的單頁應用(SPA)框架遵循向客戶端發送所有代碼的模型。這意味著頁面的初始渲染會全部發送給客戶端,這樣導致直接的結果是初始頁面加載會變慢。伺服器呈現頁面表明在伺服器端負擔初始渲染,允許其他任何東西在該渲染之後被延遲加載。

  Vue和React使用插件添加伺服器渲染。 Angular 2正在將這一功能合併到核心中,而Aurelia則將伺服器渲染標記為開發中的一個功能,即使它具有其他性能技巧,也缺少實施的時間表。

  成熟度

  在選擇企業級網站的框架時,廣泛的社區支持、穩定性和招聘能力是非常重要的因素。因為很難猜測三年內這些框架是否會仍然被支持,所以他們主要著眼於目前的健康狀況或其他方式來作出決定。

  實現就是查看框架的初始公開發布日期,讓我們了解每個框架的健壯性。在理論上,發布時間越早的框架,性能越好,錯誤越少。

  React發布時間最早,於2012年3月發布。Vue雖然是2015年10月發布的,但直到2016年9月第2版才發布。Aurelia是一款新發布的框架,於2016年8月才發布。Angular 2最是有趣,它與Angular 1有著顯著不同,於2016年9月發布第一個版本。

  CXA團隊中有成員一直在關注著這些候選框架,這讓他們在判斷這些框架是否穩定有了一些整體的感覺,Angular 2的發展歷史看起來較為艱難,突破性變化也不明確,再加上這個框架最終想要什麼也比較模糊。

  成熟度評定中還有很關鍵的一環,那就是是否能夠僱傭到有經驗的員工。雖然有特殊經驗和要求的招聘本身限制性就很大,但是他們考慮到自己的框架經驗和項目周期,所以更傾向於聘請員工。從這個角度,他們排除了Angular 2。

  剩餘的其它框架,他們搜索不同的招聘網站,並且為每個框架都單獨寫了招聘啟事。最後他們沒有搜索到Aurelia或Vue的應徵簡歷,也沒有收到任何面試申請,但是卻收到了好幾份比較有質量的React工作申請。

  其他特性

  除了以上幾項,CXA在進行前端框架調研還進行其它功能測試,如開發工具和單元測試。如果沒有固定的開發工具,那麼就不可能進行調試,而單元測試對於企業級應用程式(如我們的)來說至關重要。

  實踐

  理論推理並不能代表實踐經驗,所以我們選擇了滿足大多數要求的兩個框架進行了運行和編碼,分別是Aurelia和React。

  實踐項目是是構建符合我們現有應用程式的基本功能的驗證屏幕:登錄,調用API和建立會話。兩個團隊成員都被分配了一個框架,並給出了一個日曆周,看看他們可以建立什麼。

  Aurelia演示更完整,部分原因是安裝程序更簡單。但他們也確實感覺到了,通過前期的工作,他們更好地了解了React堆棧內部的內容。Aurelia在配置方面贏得了勝利。

  我們根據實踐編碼,無法得出任何重要的結論。 也許唯一的驚喜是它們的代碼是如何相似:其中更多的是由於兩個框架使用ECMAScript 6引入的結構變化。

  最終結果

  CXA最終的選是React,主要原因是其成熟度、社區支持和易於招聘高。 雖然React是更符合CXA的標準,但是我們也看到其它的競爭框架的競爭力也是非常強的。CXA表示:Vue的功能其實要更為完整,如果要是項目周期不是那麼短,招聘也不是那麼重要,他們會考慮將項目擴展到Vue。

相關焦點

  • 去哪兒網前端架構師司徒正美:如何挑選適合的前端框架?
    最近幾年,前端技術迅猛發展,差不多每年都會冒出一款主流的框架。 每次新開業務線或啟動新項目時,首先第一件事就是糾結:使用什麼框架,重造什麼輪子?我很高興應CSDN的邀請談我的看法。RequireJS,前端技術發展分水嶺在五六年前,移動端還沒有興起,我們沒有什麼選擇,就是jQuery。
  • 國內最火的五款HTML5前端開發框架
    本文主要為大家推薦五款國內最火的HTML5前端開發框架,它們分別是騰訊團隊開發的JX、淘寶團隊開發的KISSY、百度團隊開發的QWrap和Tangram,以及上海康尚實驗室推出的Como。1.JX(騰訊)JX 是一個類似 Google Closure Library 的 Web 前端開發框架,服役於 WebQQ 等大規模的 WebApp。JX 是模塊化的非侵入式Web前端框架,開發於2008年,並於2009年開源於GoogleCode ,於2012年切換到Github。
  • 12款很贊的web前端移動開發框架
    而同時,前端開發人員總是尋找新的 Web 技術來獲得這種性能。利用現有的高質量移動框架來構建移動 Web 應用程式已成為非常容易,但是如何選擇合適的框架是比較糾結的。因此在本文中,我們整理了12個很贊的移動框架。1.RedbeardRedbeard讓它來創建本地應用程式沒有一個樣板更快和更容易。
  • Ember.js和Vue.js,哪種框架更適合前端開發?
    隨著前端技術的發展,比起純JavaScript 腳本,大多數開發人員更喜歡使用基於JavaScript的框架來開發Web應用,如Vue、React等。這些框架大大簡化了你的代碼,也使你能夠完成更多的全棧工作。使用什麼類型的框架決定了應用程式的敏捷程度。因此,您必須慎重選擇。在充滿多樣性的前端生態中,有兩個框架十分引人矚目——Ember.js和Vue.js。
  • 前端框架bootstrap和layui有什麼區別
    再來看看Layui官方的定義layui 是一款採用自身模塊規範編寫的前端 UI 框架,遵循原生 HTML/CSS/JS 的書寫與組織形式,門檻極低,拿來即用。其外在極簡,卻又不失飽滿的內在,體積輕盈,組件豐盈,從核心代碼到 API 的每一處細節都經過精心雕琢,非常適合界面的快速開發。
  • Twitter BootStrap:前端框架利器
    Web前端開發者每天都與HTML、CSS、JavaScript打交道,然而不少人都是周而復始地寫模板、樣式和交互效果,並沒有想過如何將這些重複的工作整合在一起。Twitter推出的Bootstrap能夠幫助Web前端開發者擺脫這種重複勞動。
  • 【知識庫】八款你不得不知的開源前端JS框架
    本文推薦了八款比較熱門和經典的Javascript 開源框架,並給出了相關學習資料,有興趣的朋友可以看看~angular.js它實現了前端MVC架構,專注於擴展HTML功能,提供動態數據綁定(Data Binding),且能與其它框架(如jQuery)合作融洽。(項目詳情)相關文檔:相關下載:backbone
  • 開源前端框架縱橫談
    同時,由於JavaScript是一門相當靈活的語言,不同背景的開發者借鑑了許多不同的軟體設計思想來構建他們理想中的JavaScript框架,這也 導致不同的框架/庫在解決同一個問題時經常有不同的方案,例如單頁應用的設計模式問題。
  • 如何挑選一款適合自己的單眼相機
    現在數位相機已經走入千家萬戶,數位相機早已成為了日常消費的數碼產品,但是越來越多的人並不滿足於小型數位相機的性能,而是把目光投向了更加專業的單眼相機,那麼在單眼相機中選擇出合適自己的相機還是有些頭痛的,畢竟單眼相機的價格是數位相機中比較高的,那麼對於想擁有單眼相機的人來說如何挑選一款適合自己的單眼相機成了一個很重要的問題
  • avalon:小而美,輕量級前端MVVM框架
    正如我在《JavaScript框架設計》一書中總結的三大金規之一所說,必須出奇制勝。在盛大做通行證期間,我被眾多視圖搞得暈頭轉向,同一份數據,因為入口不同往往需要呈現不同的外觀。人工做數據與視圖的分離全依賴於編碼者的功力,顯然非常不可靠,一般的前端會給你寫一堆if、else語句,維護性非常差。於是我不得不向後端取經。
  • Web前端三大主流框架,你覺得哪個更好?
    Web前端發展,簡直是日新月異,Web前端技術也是突飛猛進,也誕生了很多優秀的Web前端框架,比如我們所熟知的「Web前端三大主流框架」,當然還有些不知名的小框架等。在這麼多Web前端框架裡,我們應該選擇哪種框架呢?才跟適合我們開發呢?朗沃教育小編就來和大家一起來看看這些框架的優缺點吧。1、Web前端框架優缺點項目開發中是否採用框架仍然存在著一定的爭議,對於技術能力深厚、有著豐富經驗的人來說,自然是不在話下。
  • 前端工程師,還在學習那些永無止盡的框架麼?
    這篇文章在開頭講到,作為開發人員,我們需要跟上技術發展的步伐,所以我們每天都在學習新的程式語言、框架和庫,因為我們認為現代化工具越多越好。 放眼前端這幾年的發展,經歷了移動網際網路時代的爆發,出現了以Angular、React、Vue為代表的三大前端框架,竟然成為了困擾前端工程師的一個「難題」——哪個框架最好?我該學哪個框架?
  • 前端開發大盤點:2015最流行前端框架TOP20
    隨著Web 越來越規範和標準的統一,Web組件化技術不斷革新以及移動端開發不斷升華的今天,我覺得有必要把過去一年幫助過我或朋友們的優秀開源前端框架做個盤點,希望這些與時俱進,具有行業代表性的項目能夠越來越好,幫助到更多的前端開發者們。此榜單根據github上star數作為排名依據,一個人力量有限,如果收集有遺漏歡迎補充。
  • 各種前端框架 您應該選擇哪個?
    用編程的話來說,所有操作都可以分為前端和後端。前者用於處理網站或應用程式的客戶端,而後者則用於伺服器端。前端開發人員的主要關注點包括用戶界面(UI),響應式Web設計,可訪問性和兼容性。所有這些都不容易管理-特別是對於初學者。幸運的是,如今有很多前端框架可以幫助您!在此詳細指南中,我們將向您介紹最流行的前端框架。擁有所有信息肯定會幫助您做出正確的選擇。
  • 十大新興前端框架大盤點
    但隨著這兩年崛起的新框架與類庫,一些細微之處悄悄地起變化了,這些變量可能在未來推動著前端的發展。因此本文為大家介紹國產十大新興前端框架,畢竟開發者對一項技術的關注,是技術發展的動力。這幾年,國內各大企業對小程序的投入非常大,除了 Taro,還有去哪兒網的 nanachi、網易的 megalo,滴滴的 Chameleon, 百度的 Okam,不一而足。
  • 前端框架該如何選擇?
    2016年到2017年兩年時間,前端框架從jQuery一家獨大的情況,發展到現在的Angular、Vue、React三足鼎立的情況,三個框架各有優略,也都是比較成熟,但是同樣也造成了讓人無從下手的感覺,不知該如何選擇,下面就來談一談如何選擇該使用什麼框架。
  • HeyUI - 自帶admin框架、中後臺前端UI框架的後起之秀
    一款同樣優秀的前端 UI 組件庫,其基於HeyUI的 admin 框架也是開箱即用的優質框架。值得一說的是,這個庫的作者是一位很有個性的女程式設計師,文本能力也超強,官網上的文檔寫得清楚易懂,十分容易上手。
  • 開源前端框架Bootstrap中文翻譯版上線
    站長之家(chinaz.com)7月25日消息:知名開源WEB前端框架Bootstrap中文翻譯版昨日上線,該版本由wrongway開發者翻譯。據wrongway稱,翻譯Bootstrap的初衷是為其網站選擇一款能快速開發的前端框架,為了更廣泛的分享推廣Bootstrap,因此發布了中文版。
  • 男生怎樣才能根據自己的臉型挑選到一款時尚又適合自己的眼鏡呢?
    男生怎樣才能根據自己的臉型挑選到一款時尚又適合自己的眼鏡呢?眼鏡的發展也是比較快速的,從起初的近視眼鏡到老花鏡再到現在的時尚搭配,眼鏡的地位也是一步步的上升,因此搭配好一副眼鏡對於自己的顏值也是至關重要的,那麼該如何根據自己的臉型挑選到一款適合自己的眼鏡呢?讓我們一起來看下吧。典型的長臉往住別是高額頭,頜骨較為實出,下巴也偏長,戴上合適的眼鏡可令臉型顯得寬短一些。
  • 前端新手教程!如何快速入門web前端
    最近收到一些的私信問我,自己想要學習前端,該如何學習?學習到什麼程度才可以工作?