網(wǎng)絡(luò)開(kāi)發(fā)的世界是不斷變化的。在2022年，Web開(kāi)發(fā)人員需要了解和使用一堆令人興奮的新工具。當(dāng)特別談?wù)揓avaScript框架時(shí)，它也是一個(gè)不斷發(fā)展的世界，新制作的框架似乎每天都在出現(xiàn)。

　　正如Fathym首席執(zhí)行官馬特·史密斯(Matt Smith)在最近的一次會(huì)議上打趣的那樣，“我忘記了比我所知道的更多的框架。讓我們深入了解您應(yīng)該在2022年了解的四個(gè)新人。

　　您應(yīng)該知道的3個(gè)較新的框架和1個(gè)運(yùn)行時(shí)

　　首先，大多數(shù)開(kāi)發(fā)人員都知道 React、Angular、斯維爾特、Vue .js，可能還有很多其他的。在創(chuàng)建新網(wǎng)站，應(yīng)用程序等時(shí)，他們可能有一個(gè)最喜歡的。

　　回顧2021年，開(kāi)發(fā)人員命名的最受歡迎的框架是Svelte，而 React 仍然非常受歡迎，其次是 Vue、Angular 和許多其他框架。

　　但是，當(dāng)我們檢查StackOverflow發(fā)布的2022年調(diào)查時(shí)，最受歡迎的名單中有很多新人。領(lǐng)先優(yōu)勢(shì)的是鳳凰框架，剛剛超越斯維爾特，緊隨其后的是下一個(gè).js排擠了React，諾德.js和Nuxt.js得分高于Vue。

　　所以，讓我們快速看看這些新來(lái)者，他們是什么時(shí)候開(kāi)始的，他們以什么而聞名。

　　下一個(gè).js

　　下一步是什么.js？

　　接下來(lái).js由Vercel首席執(zhí)行官吉列爾莫·勞赫(Guillermo Rauch)于2016年開(kāi)發(fā)，目前版本為12.2，于2022年6月下旬發(fā)布。下一個(gè).js實(shí)際上是在 Node.js 之上編寫(xiě)的，因此它需要您具有 Node.js才能與節(jié)點(diǎn)包管理器 (npm) 一起使用。

　　Next.js的功能之一是它在服務(wù)器端和客戶(hù)端(也稱(chēng)為“通用應(yīng)用”)上的呈現(xiàn)方式。這對(duì)于它構(gòu)建的單頁(yè)應(yīng)用程序(SPA)至關(guān)重要，以及它如何幫助這些SPA在SEO(搜索引擎優(yōu)化)方面取得更大的成功。

　　正如SEO專(zhuān)家巴里·亞當(dāng)斯在一篇中等文章中解釋的那樣：

　　當(dāng)你在沒(méi)有服務(wù)器端渲染的情況下使用 React 時(shí)，會(huì)發(fā)生什么情況是，爬網(wǎng)程序在第一頁(yè)上停止，因?yàn)樗床坏饺魏我P(guān)注的超鏈接。它將頁(yè)面發(fā)送到索引器，然后索引器必須呈現(xiàn)頁(yè)面并提取超鏈接，然后將超鏈接添加到爬網(wǎng)程序的隊(duì)列中。然后，爬網(wǎng)程序最終將抓取下一組頁(yè)面，并再次停止，因?yàn)樵诔尸F(xiàn) JavaScript 之前，所有鏈接都是不可見(jiàn)的。因此，它必須等待索引器返回一組要爬網(wǎng)的新 URL。

　　用最簡(jiǎn)單的術(shù)語(yǔ)來(lái)說(shuō)：SEO對(duì)于任何擁有網(wǎng)站的人來(lái)說(shuō)都至關(guān)重要，他們希望通過(guò)Google搜索發(fā)現(xiàn)它，而Next.js對(duì)此有很大的幫助。SPA之所以出色，是因?yàn)樗鼈兛焖佟㈧`活且適應(yīng)性強(qiáng)。但SPA的一個(gè)主要缺點(diǎn)是，因?yàn)樗鼈冎饕强蛻?hù)端渲染的，當(dāng)谷歌的爬蟲(chóng)尋找數(shù)據(jù)時(shí)，他們找不到任何數(shù)據(jù)，直到它們?cè)诜?wù)器端渲染。

　　接下來(lái).js在客戶(hù)端和服務(wù)器端呈現(xiàn)：部分或全部網(wǎng)站呈現(xiàn)在服務(wù)器端，因此Google的抓取工具可以找到信息(URL，元標(biāo)記和內(nèi)容等)，并將其放入搜索結(jié)果中。

　　“服務(wù)器端呈現(xiàn) (SSR) 是一種流行的技術(shù)，用于在服務(wù)器上呈現(xiàn)通常僅限客戶(hù)端的單頁(yè)應(yīng)用 (SPA)，然后將完全呈現(xiàn)的頁(yè)面發(fā)送到客戶(hù)端，”geeksforgeeks.org 解釋道。

　　請(qǐng)記住，Nuxt.js和節(jié)點(diǎn).js也在客戶(hù)端和服務(wù)器端進(jìn)行渲染。

　　為了幫助縮短加載時(shí)間并將代碼分解為更小的塊，Next.js確實(shí)為開(kāi)發(fā)人員執(zhí)行自動(dòng)代碼拆分。

　　對(duì)于營(yíng)銷(xiāo)人員來(lái)說(shuō)，SEO的改進(jìn)是很棒的。對(duì)于企業(yè)主來(lái)說(shuō)，由于Next.js中的許多預(yù)制組件，網(wǎng)站和應(yīng)用程序的上市時(shí)間更快。此外，由于Next.js有助于創(chuàng)建靜態(tài)站點(diǎn)，因此安全性得到了提高;也沒(méi)有連接到數(shù)據(jù)庫(kù)或用戶(hù)的數(shù)據(jù)。

　　下一個(gè)的優(yōu)勢(shì).js：

　　在加載時(shí)間方面具有出色的性能

　　加載時(shí)間有助于“延遲加載”和自動(dòng)代碼拆分

　　為開(kāi)發(fā)人員提供大量支持

　　出色的用戶(hù)體驗(yàn)

　　縮短上市時(shí)間

　　下一個(gè).js的缺點(diǎn)是：

　　一些開(kāi)發(fā)人員認(rèn)為它太固執(zhí)己見(jiàn)了

　　多個(gè)開(kāi)發(fā)人員抱怨Next.js如何進(jìn)行路由，其他人則支持它

　　節(jié)點(diǎn).js

　　什么是節(jié)點(diǎn).js？

　　Node.js不是一個(gè)框架，但它是一個(gè)運(yùn)行時(shí)。因此，開(kāi)發(fā)人員在其上使用 React 和其他 JavaScript 框架。

　　React.js仍然被認(rèn)為是JavaScript框架的標(biāo)準(zhǔn)(有些人可能會(huì)認(rèn)為這是Angular)，并且有大量的開(kāi)發(fā)人員知道如何在內(nèi)部和外部使用它。節(jié)點(diǎn).js有助于使 React 變得更好。

　　就像Next.js(可能是因?yàn)樗墙⒃贜ode之上的.js)，它之所以特別，是因?yàn)榉?wù)器端渲染。事實(shí)上，在 Node.js 在 2009 年出現(xiàn)之前，還沒(méi)有 JavaScript 服務(wù)器端渲染，因此他們徹底改變了游戲。

　　除了大幅提高單頁(yè)應(yīng)用程序 (SPA) 的性能外，Node.js還因其他一些原因而受到歡迎。

　　其中一個(gè)很大的區(qū)別是它被認(rèn)為是一個(gè)全棧框架。開(kāi)發(fā)人員能夠在節(jié)點(diǎn).js中用JavaScript編寫(xiě)服務(wù)器端代碼;這意味著一個(gè)開(kāi)發(fā)人員可以很容易地在前端(使用React)和后端編寫(xiě)。

　　10年前.js LinkedIn Node一起做到了這一點(diǎn)，這有助于他們將服務(wù)器從30臺(tái)減少到3臺(tái)。最重要的是，前端工程師能夠在后端編寫(xiě)代碼，從而將兩個(gè)團(tuán)隊(duì)合并為一個(gè)。在這種情況下，從Ruby on Rails遷移到Node.js幫助LinkedIn享受更好的性能，節(jié)省了開(kāi)發(fā)時(shí)間，也節(jié)省了人員資源。

　　另一個(gè)巨大的積極因素是Node.js提供令人難以置信的高性能和即時(shí)可擴(kuò)展性的能力。許多人引用了GoDaddy對(duì)Node的使用.js這有助于他們每秒處理10，000個(gè)請(qǐng)求，而僅使用10%的硬件。不僅如此，Netflix還使用Node.js將其啟動(dòng)時(shí)間從40分鐘縮短到幾秒鐘。

　　Node.js因其在后端與微服務(wù)合作的方式而受到尊敬。微服務(wù)很小，獨(dú)立，可以通過(guò)API進(jìn)行良好的通信。在前端，有微型(或模塊化)前端;這就是我們?cè)诜ㄎ髂饭陀玫?

　　這意味著能夠?qū)⒛木W(wǎng)站分解為更小的“路線” - 通常是不同的頁(yè)面 - 可以由個(gè)人或單獨(dú)的團(tuán)隊(duì)創(chuàng)建，管理和運(yùn)行。模塊化前端意味著開(kāi)發(fā)人員具有更大的靈活性，更快速構(gòu)建的網(wǎng)站和簡(jiǎn)單的可擴(kuò)展性。Node.js的后端微服務(wù)能力和Fathym的微前端與 React 可能是天作之合。

　　節(jié)點(diǎn).js優(yōu)勢(shì)：

　　簡(jiǎn)單易學(xué)

　　簡(jiǎn)單可擴(kuò)展

　　高性能

　　偉大的社區(qū)和支持

　　全棧開(kāi)發(fā)

　　加載時(shí)間有助于“快速緩存”

　　節(jié)點(diǎn).js缺點(diǎn)：

　　仍然需要使用 React，因?yàn)樗皇且粋€(gè)框架

　　不是一個(gè)偉大的支持庫(kù)

　　運(yùn)行繁重的計(jì)算任務(wù)時(shí)性能困難

　　不穩(wěn)定的接口

　　努克斯特.js

　　什么是努克斯特？

　　Nuxt是一個(gè)JavaScript框架，它有點(diǎn)類(lèi)似于Nuxt.js Nuxt.js是在Vue.js之上構(gòu)建的。它提供了一種更簡(jiǎn)單的方法來(lái)創(chuàng)建通用或單頁(yè) Vue 應(yīng)用程序。

　　Nuxt也類(lèi)似于節(jié)點(diǎn)和下一個(gè)，因?yàn)檫@三者都承諾通過(guò)客戶(hù)端和服務(wù)器端渲染的組合來(lái)提高SPA的SEO分?jǐn)?shù)。Nuxt還因其在移動(dòng)SPA方面的表現(xiàn)以及為用戶(hù)帶來(lái)的體驗(yàn)而受到歡迎。

　　然而，使Nuxt與其他網(wǎng)站區(qū)別開(kāi)來(lái)的是它能夠生成開(kāi)箱即用的靜態(tài)網(wǎng)站。對(duì)于那些希望趕快去那里建立一個(gè)網(wǎng)站的人來(lái)說(shuō)，這是一件大事。靜態(tài)網(wǎng)站更簡(jiǎn)單，不適合所需的每種類(lèi)型的網(wǎng)站，但它們可用于諸如只有幾個(gè)頁(yè)面的博客或促銷(xiāo)網(wǎng)站之類(lèi)的東西，這些網(wǎng)站只會(huì)持續(xù)一定的時(shí)間。同樣，靜態(tài)站點(diǎn)對(duì)安全性也非常有用，因?yàn)樗鼈兾催B接到服務(wù)器或任何信息。

　　Nuxt所做的另一件事是通過(guò)自動(dòng)代碼拆分來(lái)最小化應(yīng)用程序的大小。它們以輕巧的57kb進(jìn)入。

　　那么，為什么你會(huì)使用Nuxt.js而不是Vue.js，它建立在它之上呢?Nuxt.js有助于構(gòu)建更快、更高效的 Vue 應(yīng)用程序，原因如前所述。

　　努.js優(yōu)勢(shì)：

　　針對(duì) SPA 的搜索引擎優(yōu)化

　　移動(dòng)應(yīng)用性能

　　具有開(kāi)箱即用創(chuàng)建靜態(tài)網(wǎng)站的功能

　　靜態(tài)網(wǎng)站同樣具有很高的安全性

　　與 Vue 相比，企業(yè)就緒.js

　　自動(dòng)代碼拆分

　　努.js缺點(diǎn)：

　　缺乏常用插件

　　您網(wǎng)站上的高流量可能會(huì)導(dǎo)致服務(wù)器緊張

　　調(diào)試?yán)щy

　　背后的小社區(qū)

　　鳳凰框架

　　什么是鳳凰框架？

　　這里應(yīng)該注意的是，雖然上面提到的其他三個(gè)都是用JavaScript制作的，但鳳凰不是一個(gè)JavaScript框架，它是用另一種叫做Elixir的語(yǔ)言構(gòu)建的。

　　Elixir的鳳凰于2014年首次登場(chǎng)，但其目前的穩(wěn)定版本(1.6.6)于2022年1月5日發(fā)布。鳳凰被認(rèn)為是大批量應(yīng)用的絕佳選擇，因?yàn)樗墙⒃贐EAM之上的，這是Erlang的VM。這就是為什么像Adobe(協(xié)作工作流程)，不和諧(數(shù)百萬(wàn)用戶(hù)和消息)和Moz(SEO分析)這樣的公司使用Elixir的鳳凰。

　　Elixir的語(yǔ)言被認(rèn)為是一種“函數(shù)式編程語(yǔ)言”，這意味著更容易測(cè)試，調(diào)試和代碼庫(kù)的可維護(hù)性。

　　然而，缺點(diǎn)是有一個(gè)非常大的學(xué)習(xí)曲線，因?yàn)樗耆且环N新的語(yǔ)言，而不是另一個(gè)JavaScript框架。繼續(xù)說(shuō)下去，與其他社區(qū)相比，社區(qū)要小得多，圖書(shū)館的生態(tài)系統(tǒng)也更小。

　　鳳凰框架優(yōu)勢(shì)：

　　由于代碼是“功能性”代碼，因此易于使用，或者也易于閱讀

　　可擴(kuò)展性很簡(jiǎn)單

　　鳳凰框架的缺點(diǎn)：

　　使用成本更高，因?yàn)槟赡苄枰刚?qǐng)具有Elixir特定技能的開(kāi)發(fā)人員

　　繼續(xù)這種思路，開(kāi)發(fā)人員也需要了解二郎。

　　社區(qū)更小，因?yàn)樗?/p>

　　結(jié)論

　　事實(shí)證明，制作這些最新框架的人真正關(guān)心的是SEO，特別是幫助人們構(gòu)建單頁(yè)應(yīng)用程序，這些應(yīng)用程序也擅長(zhǎng)SEO。如前所述，Next.js、Node.js和Nuxt都能夠同時(shí)執(zhí)行客戶(hù)端和服務(wù)器端渲染。這有助于谷歌更容易找到這個(gè)網(wǎng)站，這意味著可能會(huì)有更多的人訪問(wèn)。

　　除此之外，上面提到的多個(gè)框架還專(zhuān)注于自動(dòng)代碼拆分，以幫助構(gòu)建重量更輕，加載速度更快的網(wǎng)站和應(yīng)用程序。

　　有一個(gè)最喜歡的 JavaScript 框架，你想專(zhuān)門(mén)用來(lái)構(gòu)建嗎？您可以在 Fathym 開(kāi)發(fā)您的網(wǎng)站，我們將利用我們的微軟 Azure 云進(jìn)行托管。

　　或者，也許您想嘗試一個(gè)新的框架？多個(gè)新框架？多個(gè)框架和一個(gè)無(wú)代碼的網(wǎng)站構(gòu)建器并排？您可以在一個(gè)網(wǎng)站上完成所有這些操作，這要?dú)w功于Fathym的可組合架構(gòu)。