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

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

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

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

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

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

　　所以，讓我們快速看看這些新來者，他們是什么時候開始的，他們以什么而聞名。

　　下一個.js

　　下一步是什么.js？

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

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

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

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

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

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

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

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

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

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

　　下一個的優(yōu)勢.js：

　　在加載時間方面具有出色的性能

　　加載時間有助于“延遲加載”和自動代碼拆分

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

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

　　縮短上市時間

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

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

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

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

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

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

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

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

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

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

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

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

　　Node.js因其在后端與微服務(wù)合作的方式而受到尊敬。微服務(wù)很小，獨(dú)立，可以通過API進(jìn)行良好的通信。在前端，有微型(或模塊化)前端;這就是我們在法西姆雇用的!

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

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

　　簡單易學(xué)

　　簡單可擴(kuò)展

　　高性能

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

　　全棧開發(fā)

　　加載時間有助于“快速緩存”

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

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

　　不是一個偉大的支持庫

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

　　不穩(wěn)定的接口

　　努克斯特.js

　　什么是努克斯特？

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

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

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

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

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

　　努.js優(yōu)勢：

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

　　移動應(yīng)用性能

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

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

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

　　自動代碼拆分

　　努.js缺點(diǎn)：

　　缺乏常用插件

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

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

　　背后的小社區(qū)

　　鳳凰框架

　　什么是鳳凰框架？

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

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

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

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

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

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

　　可擴(kuò)展性很簡單

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

　　使用成本更高，因?yàn)槟赡苄枰刚埦哂蠩lixir特定技能的開發(fā)人員

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

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

　　結(jié)論

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

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

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

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