業(yè)務(wù)專(zhuān)線：13711534025
與后端技術(shù)相比，前端似乎沒(méi)有那么受人尊重。很多研發(fā)工程師曾經(jīng)看不上JavaScript，但是后來(lái)的時(shí)代變了，開(kāi)源和大量相關(guān)工具的興起，引領(lǐng)Web應(yīng)用快速增長(zhǎng)。
這種發(fā)展，讓前端工程師開(kāi)始離開(kāi)JQuery，很多的科技公司開(kāi)始使用最新的JavaScript和Eslint、Babel以及Webpack等工具構(gòu)建應(yīng)用。
如今，前端的發(fā)展速度快得令人難以置信。本文就是要讓大家趕上2022年前端技術(shù)發(fā)展領(lǐng)域的大方向。也許在這些趨勢(shì)中，你能找到合適自己的東西。
Svelte越來(lái)越受歡迎
Svelte是一個(gè)相對(duì)較新的工具，因?yàn)樗鸩捷^晚，沒(méi)有機(jī)會(huì)與React、Vue以及Angular匹敵。但它卻在以前所未有的速度穩(wěn)步普及。
2021年，StackOverflow宣布Svelte為最受歡迎的前端框架。
但Svelte 并不只是一個(gè)前端框架，它還是一個(gè)構(gòu)建和優(yōu)化前端的編譯器。
它不像其它流行的框架那樣導(dǎo)入到應(yīng)用程序中，而是被編譯為純JavaScript，因此它在速度上要?jiǎng)儆赗eact或Vue等框架。
使用Svelte很方便，以下是代碼示例：
Using the framework is very easy. Here is an example of using state + forms.
let a = 1;
let b = 2; {a} + = {a + b}可以看到，就是這么簡(jiǎn)單?？偨Y(jié)有以下三件事值得開(kāi)發(fā)者信任Svelte框架：
1、簡(jiǎn)單優(yōu)雅的表單處理，如同SPA框架，不需要加入onChange事件在輸入中；
2、標(biāo)簽與邏輯可并存，封裝了邏輯和視圖層；
3、管理狀態(tài)相對(duì)其它框架很容易。
現(xiàn)在Svelte在社區(qū)中受歡迎程度很高，相信流行只是時(shí)間問(wèn)題。
React、VUE與Augular們會(huì)繼續(xù)存在
大約6年前，在Augular2發(fā)布之前，我開(kāi)始了自己的前端旅程。后來(lái)也在很多文章上看到無(wú)數(shù)次說(shuō)到Vue、React或者Auglar要被淘汰。
然而直到現(xiàn)在，這三個(gè)框架到現(xiàn)在仍然存在，而且都很受開(kāi)發(fā)者們歡迎。我們?nèi)缦聢D所示：
可以看到上圖，Angular的流行度是開(kāi)始時(shí)的十倍還多，而React和Vue的增長(zhǎng)更快。這三個(gè)框架不相伯仲，無(wú)論你選擇哪一個(gè)，未來(lái)幾年內(nèi)都會(huì)有人使用支持，所以不必?fù)?dān)心。
2021年React沒(méi)有太大的變化，但它的適應(yīng)能力令人驚奇，目前React是擁有擴(kuò)展庫(kù)和支持最多的框架。
值得一提的兩個(gè)例子是 Next 和 Gatsby，后者將是下一個(gè)熱門(mén)趨勢(shì)之一。
前端框架應(yīng)同時(shí)支持靜態(tài)和動(dòng)態(tài)兩種類(lèi)型頁(yè)面
讓我們來(lái)看靜態(tài)頁(yè)面和動(dòng)態(tài)頁(yè)面的定義。
動(dòng)態(tài)頁(yè)面是用戶(hù)打開(kāi)網(wǎng)頁(yè)時(shí)實(shí)時(shí)獲取或處理內(nèi)容。靜態(tài)頁(yè)面是在構(gòu)建就預(yù)定義好的，它們是分別生成的獨(dú)立文件，它們看起來(lái)和動(dòng)態(tài)文件一樣，但用戶(hù)端瀏覽器要做的工作卻要少很多。
比如一個(gè)在線商店，你可以只有一個(gè)動(dòng)態(tài)的商品頁(yè)面，也可以根據(jù)SKU數(shù)量，生成數(shù)千個(gè)甚至更多個(gè)靜態(tài)商品頁(yè)面，每個(gè)商品一個(gè)。
總結(jié)來(lái)說(shuō)，靜態(tài)頁(yè)面對(duì)用戶(hù)來(lái)講性能更高，但編譯構(gòu)建時(shí)間要更長(zhǎng)些。
不用靜態(tài)頁(yè)面的原因是React或Vue的單頁(yè)應(yīng)用（SPA）框架的普及，但SPA的動(dòng)態(tài)頁(yè)頁(yè)要比用HTML寫(xiě)的頁(yè)面要慢得多，特別是從服務(wù)器端下載、處理數(shù)據(jù)，性能問(wèn)題比較大。
Gatsby通過(guò)在Reat中搭建靜態(tài)頁(yè)面框架以及基礎(chǔ)設(shè)施來(lái)解決此類(lèi)問(wèn)題。
另外，Vercel和Nextjs框架能夠運(yùn)行在服務(wù)器端，在后端渲染，能夠讓開(kāi)發(fā)者生活更輕松。
Netlify 專(zhuān)注于客戶(hù)端框架，例如純 React 和 Vue。它提供了很多的有用工具，例如即用型表單、身份驗(yàn)證和無(wú)服務(wù)器功能，它是傳統(tǒng)客戶(hù)端應(yīng)用的最佳選擇。
前端優(yōu)化的關(guān)鍵
對(duì)性能產(chǎn)生負(fù)面影響的庫(kù)，如 Moment.js，將被更輕、高性能的庫(kù)所取代，如 Day.js。其他的則被重構(gòu)以減小JS包的大小。包括 Material UI 和 Lodash。
Tailwind 目前廣受歡迎，2022 年它肯定會(huì)繼續(xù)流行。它可以像幾乎沒(méi)有其他 CSS 工具一樣處理減少應(yīng)用程序加載時(shí)間。但是它的問(wèn)題是可讀性極差，學(xué)習(xí)曲線也比較高。
各位也可以嘗試 Linaria。Linaria 結(jié)合了樣式組件的優(yōu)點(diǎn)和使用靜態(tài) CSS 文件的速度。
GitHub：https ://github.com/callstack/linaria 。
Linaria代碼示例如下：
import { styled } from '@linaria/react';
import mainTheme from 'themes/mainThemeV2';
export const Wrapper = styled.div`
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
width: 30px;
max-height: 60px;
border-bottom: 1px solid ${mainTheme.colors.neutral300};
background-color: ${mainTheme.colors.primary300}; border-radius: 8px;以上的結(jié)合，就有了非常好的用戶(hù)體驗(yàn)，速度也更加快速。
小結(jié)
有很多創(chuàng)新正在發(fā)生，前端技術(shù)正在快速發(fā)展。希望這篇文章給大家一些有價(jià)值的東西。感謝閱讀！