前端框架選擇關(guān)鍵點

選擇合適的企業(yè)級前端框架，需考量框架的規(guī)模、靈活性、離線支持、服務(wù)器端渲染以及成熟度等因素。 實踐經(jīng)驗至關(guān)重要，作者團隊曾使用Aurelia和React構(gòu)建身份驗證頁面進行評估。

最終選擇React，主要基于其成熟度、社區(qū)支持和易于招聘。Angular 2因未能滿足大部分選擇標(biāo)準(zhǔn)而被淘汰。Vue和Aurelia表現(xiàn)出色，也符合要求，但招聘經(jīng)驗豐富的開發(fā)者成為最終決定性因素。

在評估新加坡員工福利初創(chuàng)公司CXA集團的核心網(wǎng)絡(luò)平臺時，我們決定放棄老化的現(xiàn)有架構(gòu)，從頭重建前端。平臺面臨的挑戰(zhàn)之一是創(chuàng)建一個在CXA集團遍布亞洲的12個目標(biāo)國家都能良好運行的Web應(yīng)用程序。

考慮到項目交付的嚴(yán)格期限，我主導(dǎo)了對一系列前端JavaScript框架的評估。在大型企業(yè)項目中，很少有機會進行這種程度的變更，因此我們在評估過程中力求盡可能周全。

這個決定關(guān)系重大：隨著業(yè)務(wù)的指數(shù)級增長，我們承擔(dān)不起任何失誤。我們還必須考慮到團隊中沒有人對我們正在考慮的任何框架有重要的經(jīng)驗。

縮小范圍

新的前端框架似乎每天都在發(fā)布，因此我們進行了元分析以減少我們考慮的框架范圍。包括我們聽說過的或推薦給我們的框架，我們最終選擇了Angular 2（聽說過）、Aurelia（聽說過）、Vue.js（推薦）和React（推薦）。

我們根據(jù)關(guān)鍵要求列表衡量每個入圍框架的排名。一些要求基于我們知道項目所需的內(nèi)容，而另一些則展望我們想要做什么。

靈活性

我們選擇的框架需要提供一系列配置選項，并且相對易于定制。這似乎很大程度上取決于架構(gòu)理念：代表你做出架構(gòu)決策，還是完全開放這些決策。

Angular 2位于這一端的整體式結(jié)構(gòu)，為你做出了每一個選擇（狀態(tài)服務(wù)器、路由器、處理程序）。這樣做的好處是，它很容易快速上手，而潛在的成本是模塊無法按照你的需要工作，而且無處可去。

React、Vue和Aurelia位于量表的另一端，提供了根據(jù)需要交換組件的能力。Aurelia和Vue在其初始設(shè)置中具有可配置的樣板，這比React具有關(guān)鍵優(yōu)勢。

與Vue一樣，React本身只提供了構(gòu)建某些東西所需內(nèi)容的一小部分。從那里，必須做出許多決定，這當(dāng)然令人望而生畏。自從React首次發(fā)布以來，已經(jīng)創(chuàng)建了各種樣板（包括React Boilerplate和Create React App）來簡化引入過程。

對于我們的測試React項目，我們決定放棄任何特定的樣板，直接深入研究。我們?nèi)匀话惭b了一些，即使只是為了參考代碼。這種方法當(dāng)然很困難，但我們學(xué)習(xí)了關(guān)于React堆棧中每個組件的很多知識，并且對最終結(jié)果更有信心。

Vue和Aurelia憑借其降低的學(xué)習(xí)曲線和模塊化結(jié)構(gòu)贏得了這一輪。React即使初始設(shè)置明顯更難，也獲得了部分靈活性積分。

離線支持

借助Service Workers等API，Web應(yīng)用程序無需實時或穩(wěn)定的互聯(lián)網(wǎng)連接即可運行成為可能。在我們的團隊中，我們在這方面還沒有太多經(jīng)驗，除了確認(rèn)所有評估的框架都提供某種形式的離線支持外，我們沒有深入研究。

輕量級

發(fā)送到客戶端的代碼字節(jié)大小對瀏覽器性能有很大影響，這既包括帶寬也包括處理器時間。隨著自定義代碼和第三方庫的添加，字節(jié)大小只會越來越大，因此從小處著手至關(guān)重要。CXA集團的目標(biāo)市場延伸到帶寬非常寶貴的國家，因此向客戶交付盡可能少的代碼至關(guān)重要。

由于缺乏反映生產(chǎn)配置的硬數(shù)據(jù)，我們查看了核心庫的大小，以至少對我們將面臨的情況有所了解。實際的生產(chǎn)大小比這里顯示的要大。

Vue的開發(fā)人員已經(jīng)盡最大努力將他們的核心庫縮小到令人印象深刻的23 KB。React和Aurelia位于中間位置（大約分別為42 KB和64 KB），而Angular 2仍然是一個重量級選手，超過143 KB（包括用于狀態(tài)管理的RxJS）。

實際上，Vue、Aurelia和React的生產(chǎn)版本彼此之間非常接近，可以考慮在內(nèi)。Angular 2再次以錯誤的方式脫穎而出。

服務(wù)器端渲染

早期的單頁應(yīng)用程序（SPA）框架遵循將所有代碼發(fā)送到客戶端的模型。這意味著頁面的初始渲染留給客戶端，并且直接導(dǎo)致初始頁面加載速度緩慢。SPA中服務(wù)器端渲染的概念將初始渲染的負(fù)擔(dān)放在服務(wù)器上，允許在該渲染之后延遲加載所有其他內(nèi)容。

Vue和React使用插件添加服務(wù)器端渲染。Angular 2目前正在將其Universal功能合并到核心，盡管其功能與Vue或React提供的功能不匹配。Aurelia將服務(wù)器端渲染標(biāo)記為開發(fā)中的功能，但即使它擁有其他性能技巧，也缺乏實施時間表。

成熟度

在為企業(yè)級網(wǎng)站選擇框架時，廣泛的社區(qū)支持、穩(wěn)定性和招聘能力非常重要的因素。很難推測任何框架在三年后是否仍然受支持，但我們決定查看每個框架的當(dāng)前健康狀況以做出決定。

查看框架的初始公開發(fā)布日期讓我們了解每個框架的穩(wěn)健性。至少在理論上，較舊的庫應(yīng)該具有更好的功能范圍和更少的重大錯誤。

React輕松獲勝，其首次公開發(fā)布是在2013年3月。盡管Vue最初于2015年10月發(fā)布，但直到2016年9月發(fā)布版本2才達到頂峰。Aurelia是一個新手，于2016年8月達到1.0版。

Angular 2很有趣：它與版本1有很大不同，實際上，它于2016年9月首次發(fā)布。

這項評估的一部分包括深入研究每個庫的開發(fā)歷史，而不僅僅是發(fā)布日期本身。漫長而穩(wěn)定的開發(fā)歷史——即使是在測試版中——當(dāng)然也增強了信心。

各種團隊成員一直在關(guān)注候選框架的開發(fā)，這讓我們至少對每個框架的整體穩(wěn)定性有所了解。在我們審查的所有框架中，Angular 2 問題重重的開發(fā)歷史脫穎而出，存在重大的重大更改和不明確的發(fā)布日期。該框架最終發(fā)布了最終版本，但在過程中確實很混亂。

成熟度的最終關(guān)鍵方面（如上所述）是招聘經(jīng)驗豐富的員工的能力。鑒于我們的團隊在評估的框架方面的經(jīng)驗有限以及我們面臨的激進時間表，我們希望招聘經(jīng)驗豐富的開發(fā)人員。

然而，招聘具有特定經(jīng)驗的人員可能會受到限制，但在像我們這樣的較大項目中確實會產(chǎn)生影響。我們在此階段淘汰了Angular 2，因為它未能滿足我們之前的許多要求。

對于剩余的框架，我們首先搜索了不同的求職網(wǎng)站，并為每個框架發(fā)布了單獨的招聘廣告。我們沒有找到Aurelia或Vue的招聘廣告，也沒有收到任何申請。相比之下，我們發(fā)現(xiàn)有幾份React工作機會，并且我們收到了許多高質(zhì)量的申請。

其他功能

我們列表中的其余功能——開發(fā)人員工具和單元測試支持——在我們查看的所有框架中都提供。如果沒有可靠的開發(fā)人員工具，調(diào)試幾乎是不可能的，而單元測試對于像我們這樣的企業(yè)級應(yīng)用程序來說幾乎是必不可少的。

實踐經(jīng)驗

任何理論都無法與實踐經(jīng)驗相提并論。考慮到這一點，我們選擇了滿足大多數(shù)要求的兩個框架——Aurelia和React——并開始并行編碼。在此階段省略Vue沒有充分的理由；我們只是沒有足夠的時間來評估。

給定的任務(wù)是構(gòu)建身份驗證屏幕，使其與我們現(xiàn)有應(yīng)用程序的基本功能匹配：登錄、調(diào)用API和建立會話。兩位團隊成員分別分配了一個框架，并被給予一個日歷周的時間來查看他們可以構(gòu)建的內(nèi)容。

Aurelia演示更完整，部分原因在于更簡單的設(shè)置過程。在選擇每個部分所做的工作之后，我們確實感覺我們對React堆棧內(nèi)部的內(nèi)容有了更好的理解。Aurelia在初始設(shè)置的簡易性方面仍然輕松獲勝。

我們無法僅根據(jù)實踐編碼得出任何重要的結(jié)論。也許唯一令人驚訝的是代碼有多么相似：這很大程度上要歸功于ECMAScript 6中引入的結(jié)構(gòu)更改，這兩個框架都使用了ECMAScript 6。

結(jié)果

最終，我們的選擇是React；最重要的是，它選擇了其成熟度、社區(qū)支持和易于招聘。雖然React是我們標(biāo)準(zhǔn)的明顯贏家，但很高興看到我們所查看的競爭框架中存在如此高質(zhì)量的框架。

Vue和Aurelia被證明是緊隨其后的競爭對手。Vue憑借更完整的功能列表略微領(lǐng)先，但鑒于我們的要求，任何一個都可能很好地服務(wù)。如果我們沒有時間壓力，招聘就不那么重要了，我們會將我們的實踐工作擴展到包括Vue。

Angular 2未能滿足我們的大部分選擇標(biāo)準(zhǔn)而令人失望。盡管它有很多優(yōu)點，但它顯然不適合我們。

在選擇React并開始構(gòu)建我們的項目后，我們不太可能很快再次進行這樣的評估。至于你，你會在我們的列表中添加哪些標(biāo)準(zhǔn)？我們錯過了什么，我們本可以做得更好？我期待您的評論和建議。

本文由Stuart Mitchell、Ralph Mason和Vildan Softic同行評審。感謝所有SitePoint的同行評審員，使SitePoint的內(nèi)容達到最佳狀態(tài)！

選擇適合您公司的正確前端框架的常見問題

選擇適合我公司的前端框架時，需要考慮哪些關(guān)鍵因素？

為您的公司選擇前端框架時，您應(yīng)該考慮幾個關(guān)鍵因素。首先，考慮項目需求。不同的框架具有不同的優(yōu)缺點，因此選擇一個與您的項目需求相符的框架非常重要。其次，考慮學(xué)習(xí)曲線。有些框架比其他框架更容易學(xué)習(xí)，這會影響開發(fā)速度。第三，考慮社區(qū)和支持。強大的社區(qū)可以在您遇到問題時提供寶貴的資源和幫助。最后，考慮框架的性能和大小。輕量級、高性能的框架可以帶來更好的用戶體驗。

前端框架的大小如何影響其性能？

前端框架的大小會嚴(yán)重影響其性能。較大的框架通常帶有更多功能和功能，但加載和運行速度也可能較慢。這可能會導(dǎo)致較差的用戶體驗，尤其是在較慢的互聯(lián)網(wǎng)連接或功能較弱的設(shè)備上。另一方面，較小的框架通常更快、更高效，但它們可能缺乏某些功能或功能。因此，根據(jù)您的項目需求平衡框架的大小和性能非常重要。

一些流行的前端框架及其優(yōu)勢是什么？

有許多流行的前端框架，每個框架都有其自身的優(yōu)勢。例如，React以其虛擬DOM和高性能而聞名，使其成為復(fù)雜動態(tài)Web應(yīng)用程序的良好選擇。另一方面，Angular是一個功能齊全的框架，其中包含構(gòu)建Web應(yīng)用程序所需的一切，使其成為大型項目的良好選擇。Vue.js以其簡單易用而聞名，使其成為小型項目或前端框架新手開發(fā)人員的良好選擇。

選擇前端框架時，社區(qū)支持有多重要？

選擇前端框架時，社區(qū)支持非常重要。強大的社區(qū)可以提供豐富的資源，包括教程、文檔和論壇，您可以在其中提問并獲得幫助。此外，大型社區(qū)通常表明該框架很流行且被廣泛使用，這可能導(dǎo)致更頻繁的更新和改進。

我可以在單個項目中使用多個前端框架嗎？

雖然從技術(shù)上講可以在單個項目中使用多個前端框架，但這通常不建議這樣做。每個框架都有自己的做事方式，混合它們會導(dǎo)致混亂和復(fù)雜性。相反，通常最好選擇最適合您的項目需求的框架并堅持使用它。

前端框架的學(xué)習(xí)曲線如何影響項目開發(fā)？

前端框架的學(xué)習(xí)曲線會嚴(yán)重影響項目開發(fā)。學(xué)習(xí)曲線陡峭的框架可能需要更長的時間才能掌握，這可能會延遲開發(fā)的開始。另一方面，學(xué)習(xí)曲線平緩的框架可以讓您更快地開始開發(fā)。但是，易于學(xué)習(xí)不應(yīng)該是選擇框架的唯一因素。還必須考慮框架的功能以及它與項目需求的匹配程度。

前端框架在Web開發(fā)中的作用是什么？

前端框架在Web開發(fā)中起著至關(guān)重要的作用。它為代碼提供了結(jié)構(gòu)，使其更易于維護和擴展。它還為常見任務(wù)提供預(yù)先編寫的代碼，從而加快開發(fā)過程。此外，前端框架通常包括用于測試和調(diào)試的工具，從而更容易確保代碼的質(zhì)量。

我應(yīng)該多久更新一次我使用的前端框架？

保持前端框架最新非常重要。更新通常包括錯誤修復(fù)、性能改進和新功能。但是，更新框架也可能會引入破壞現(xiàn)有代碼的更改，因此在更新后徹底測試您的應(yīng)用程序非常重要。一般來說，您應(yīng)該在發(fā)布新的穩(wěn)定版本后立即更新您的框架。

如何在整體式和微型前端框架之間做出決定？

整體式和微型前端框架之間的決定取決于您的項目需求。整體式框架在一個包中提供您需要的一切，這可以簡化開發(fā)，但也可能包含不必要的功能。另一方面，微型框架只提供基礎(chǔ)知識，允許您只添加所需的功能。這可能導(dǎo)致更輕量、更高效的應(yīng)用程序，但它也可能需要更多工作來設(shè)置和維護。

有哪些資源可以了解更多關(guān)于前端框架的信息？

有許多資源可用于了解更多關(guān)于前端框架的信息。在線教程、文檔和課程是一個很好的起點。Stack Overflow和GitHub等網(wǎng)站也可以提供寶貴的見解和示例。此外，許多框架都有自己的社區(qū)，您可以在其中提問并向其他開發(fā)人員學(xué)習(xí)。

以上是如何為公司選擇右前端框架的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！