作者 | 徐杰承

審校 | 云昭

提到前端界的三大主流框架，相信每位前端開發(fā)者都能夠脫口而出：React、Vue、Angular。在過去的兩年中，React和Vue在圈內(nèi)的熱度可以說(shuō)是節(jié)節(jié)攀升，“究竟誰(shuí)才是最好的前端框架”這一話題也在國(guó)內(nèi)外的前端圈子中引起了一輪又一輪的熱議。

然而與之不同的是，業(yè)界對(duì)于Angular的關(guān)注度卻在近兩年間卻變得越來(lái)越低。在去年由Best of JavaScript官網(wǎng)發(fā)布的第六版JavaScript Rising Stars中，Angular的受歡迎程度遠(yuǎn)遠(yuǎn)落后React和Vue，甚至被后來(lái)者Svelte超越，近幾年來(lái)首次跌出了前三名的隊(duì)列。

圖源：網(wǎng)絡(luò)

1、從AngularJS到Angular

提到Angular的興衰，我們始終繞不過的便是其前身AngularJS。AngularJS起初只是Google開發(fā)人員Misko Hevery的一個(gè)業(yè)余項(xiàng)目，Misko Hevery希望能讓web設(shè)計(jì)師也可以使用html創(chuàng)建出簡(jiǎn)單的應(yīng)用。

隨著AngularJS的落地以及其在Google內(nèi)部的成功普及，Hevery和他的團(tuán)隊(duì)于2010年將AngularJS作為一個(gè)單獨(dú)的開源項(xiàng)目進(jìn)行了發(fā)布。

一旦開發(fā)人員掌握了AngularJS，便能夠使用其輕松地在移動(dòng)開發(fā)框架Apache Cordova之上構(gòu)建移動(dòng)UI工具包Ionic Framework等應(yīng)用程序。這也使得AngularJS在大量企業(yè)中逐漸流行了起來(lái)。

然而隨著時(shí)間的推移，AngularJS的受歡迎程度卻開始逐漸減弱。尤其是當(dāng)JavaScript開始引入開發(fā)規(guī)范要求后，盡管Google大面積采用AngularJS并將其帶到了大型企業(yè)應(yīng)用程序中，但由于AngularJS原始設(shè)計(jì)上的一些局限性，導(dǎo)致了綁定和模板基礎(chǔ)架構(gòu)始終存在性能瓶頸。為解決這個(gè)問題，Angular的核心團(tuán)隊(duì)希望對(duì)AngularJS進(jìn)行全面的重構(gòu)，以便將其從此前的設(shè)計(jì)中解放出來(lái)。

整個(gè)第二版Angular的重寫，曾在當(dāng)時(shí)的前端圈中引起了一陣不小的轟動(dòng)。直到2018年，AngularJS框架終于成功重獲新生，全新版本由TypeScript寫成，引入了更好的構(gòu)建大小、穩(wěn)定的API和整體更優(yōu)的性能。自此，AngularJS也正式更名為Angular。

然而，盡管Angular在原有的基礎(chǔ)上實(shí)現(xiàn)了頗多改進(jìn)，但React和Vue在這一時(shí)期的進(jìn)步明顯更加迅速，并在Angular短暫的停滯時(shí)期依靠更輕的體量、更好的易用性和更易上手等優(yōu)勢(shì)快速搶占了大量市場(chǎng)，一舉超過了Angular作為頂級(jí)JavaScript前端框架的地位。stateofjs曾在一份報(bào)告中提到，自2018年起，雖然Angular始終擁有著龐大的用戶群體，且使用率始終保持前列，但從整體的變化趨勢(shì)來(lái)看，Angular似乎已經(jīng)在下坡路上愈行愈遠(yuǎn)。

圖源：網(wǎng)絡(luò)

2、Angular：三大困境

當(dāng)談到Angular所面臨的困境時(shí)，絕大多數(shù)人的第一印象都是Angular在企業(yè)項(xiàng)目中的采納率較低及其社區(qū)活躍度遠(yuǎn)不如React與Vue。

造成這一現(xiàn)象的首要原因，也就是Angular最大的問題——框架沉重，使用其構(gòu)建的應(yīng)用程序?qū)嵲谔罅?。?xiàng)目文件中不僅會(huì)包含JavaScript包，還會(huì)存在Angular CLI。無(wú)論與React還是Vue對(duì)比，Angular應(yīng)用程序的運(yùn)行效率都不夠理想。這也導(dǎo)致面向消費(fèi)者的、追求短平快的互聯(lián)網(wǎng)公司通常并不會(huì)將Angular作為他們的第一選擇。

圖源：知乎

其次，Angular作為一個(gè)以企業(yè)級(jí)開發(fā)為重點(diǎn)的框架，存在更多的內(nèi)置關(guān)系，而且相對(duì)而言并不那么重視那些沒有開發(fā)基礎(chǔ)的用戶，而是針對(duì)有一定開發(fā)經(jīng)驗(yàn)的開發(fā)者。因此Angular的學(xué)習(xí)曲線會(huì)比React和Vue陡峭得多，且由于用戶群體多為企業(yè)應(yīng)用開發(fā)者的緣故，也導(dǎo)致了Angular社區(qū)的活躍度并沒有React與Vue那么高，這也在無(wú)形之間又一次抬高了新手開發(fā)者接觸Angular的門檻。

導(dǎo)致Angular逐漸走向沒落的最后一個(gè)原因，則一般會(huì)被廣大開發(fā)者歸結(jié)于AngularJS到Angular的那一次斷崖式更新。由于前端技術(shù)的飛速發(fā)展以及Angular超前的技術(shù)選型，使得AngularJS到Angular的升級(jí)非常不平滑。并且當(dāng)Angular團(tuán)隊(duì)還沉浸在對(duì)AngularJS的重寫時(shí)，React、Vue等競(jìng)爭(zhēng)對(duì)手已悄然開始發(fā)力。這也導(dǎo)致了在Angular問世前后的一段時(shí)間里，一大批原先AngularJS的使用者轉(zhuǎn)而投向了React或是Vue的懷抱。

3、Angular 15：新的改進(jìn)

那么，在這場(chǎng)激烈的零和競(jìng)爭(zhēng)中，Angular還有機(jī)會(huì)翻身嗎？

在今年的11月，Angular發(fā)布了另一個(gè)版本更新 ：Angular 15，其承諾為開發(fā)人員提供更簡(jiǎn)潔易用的功能。從開發(fā)者近期對(duì)其的評(píng)價(jià)中不難發(fā)現(xiàn)，該更新的確使Angular更加精致、穩(wěn)定，并擴(kuò)展了其支持能力，這無(wú)疑有望提升開發(fā)人員的體驗(yàn)。

與Angular 14一樣，Angular 15的更新具有獨(dú)立的組件API，可提供更高的穩(wěn)定性。Angular開發(fā)人員可以使用這些獨(dú)立的組件，并將它們與HttpClient、Angular Elements 等同步。獨(dú)立API可用于在一個(gè)組件中引導(dǎo)應(yīng)用程序。

Angular 15還帶有一個(gè)路由器獨(dú)立API，可以構(gòu)建多路由應(yīng)用程序。Angular Bundlers 可以在構(gòu)建時(shí)刪除未使用的功能，從而使代碼文件的大小減少11%。

隨著 Angular v15 的更新，調(diào)試 Angular 應(yīng)用程序得到了極大的簡(jiǎn)化，并通過堆棧跟蹤變得更加清晰和直接。Angular 開發(fā)人員團(tuán)隊(duì)確保實(shí)現(xiàn)一個(gè)標(biāo)準(zhǔn)來(lái)跟蹤更多的開發(fā)代碼，而不是顯示它調(diào)用的庫(kù)。這一成就使得錯(cuò)誤消息可以使用一些改進(jìn)。

此外，Angular的開發(fā)團(tuán)隊(duì)還致力于根據(jù)Web應(yīng)用程序的Angular Material Design Components重構(gòu)其組件。這些組件具有更好的可訪問性，并符合角度材料設(shè)計(jì)規(guī)范。且Angular的開發(fā)團(tuán)隊(duì)已棄用多個(gè)組件的舊實(shí)現(xiàn)，因此開發(fā)人員可以選擇舊版導(dǎo)入。

對(duì)于大多數(shù)開發(fā)人員來(lái)說(shuō)，他們最喜歡的框架具有很強(qiáng)的指令可重用性。Angular團(tuán)隊(duì)推出了開發(fā)人員經(jīng)常要求的指令組合API。該API可以提高代碼可用性，并允許開發(fā)人員使用指令推送主機(jī)元素并優(yōu)化Angular。如果開發(fā)人員使用 Angular 編譯器，這將變得更加容易。

Angular 15還改進(jìn)了先前版本中引入的穩(wěn)定的NgOptimisedImage指令，以幫助更有效地加載圖像。如今，這一功能可以在用戶請(qǐng)求時(shí)自動(dòng)上傳正確大小的圖像，從而減少圖像的下載時(shí)間。新的版本還消除了用戶輸入圖像尺寸的需要，并將圖像適當(dāng)?shù)靥畛涞狡涓溉萜髦?。?dāng)用戶不知道圖像尺寸時(shí)，可以輕松的通過“填充模式”解決這方面的問題。

4、拒絕出局

一位使用過新版本的Angular開發(fā)人員表示：以目前的情況來(lái)看，Angular15版本可能不會(huì)在前端圈內(nèi)引起大規(guī)模的風(fēng)浪，但它已經(jīng)足以吸引一批新用戶了。Angular是標(biāo)準(zhǔn)化的，具有內(nèi)置功能，是一個(gè)成熟且完善的框架，已經(jīng)存在了很長(zhǎng)時(shí)間。

即使在最近幾年它變得不再像原來(lái)那么受歡迎，但我們不得不承認(rèn)，Angular現(xiàn)在依然擁有非常強(qiáng)大的社區(qū)支持和足夠的資源以及堅(jiān)實(shí)的團(tuán)隊(duì)。從Angular 15的更新來(lái)看，谷歌開發(fā)人員也將在未來(lái)繼續(xù)致力于它，別忘了Angular正被應(yīng)用于谷歌內(nèi)部的數(shù)千個(gè)應(yīng)用程序。

一位用戶談到Angular 15新的改進(jìn)時(shí)說(shuō)：“我喜歡Angular團(tuán)隊(duì)采取的方向——引入一種功能方法并將其轉(zhuǎn)換為OOP基礎(chǔ)知識(shí)之上的功能。對(duì)我來(lái)說(shuō)，依賴注入、標(biāo)記化、抽象事物并以響應(yīng)式方式構(gòu)建組件能夠幫助我創(chuàng)建干凈且可擴(kuò)展的代碼。Angular不斷提供新的東西，它們可以用來(lái)提高項(xiàng)目的質(zhì)量。盡管Angular現(xiàn)在不像React和Vue那樣流行，但我絕對(duì)推薦你去嘗試使用它。”

參考鏈接：

??https://www.bbsmax.com/A/Vx5MDLeGJN/??

??https://www.zhihu.com/question/383137600/answer/1252878373??