【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。