2019年的大前端領(lǐng)域雖然并沒有出現(xiàn)什么顛覆性技術(shù)，但是Flutter、WebAssembly、Serverless的火爆發(fā)展還是超乎我們預(yù)期，也讓我們進(jìn)一步看到大前端的融合趨勢(shì)。

在已經(jīng)復(fù)工的2020年，大前端領(lǐng)域又有哪些你不能錯(cuò)過的頂級(jí)技術(shù)趨勢(shì)呢？今天就跟小編一起來看看吧~

TypeScript

TypeScript 是一門基于 JavaScript 基礎(chǔ)之上的編程語(yǔ)言，很多時(shí)候我們都在說它是一個(gè) JavaScript 的超集，或者叫擴(kuò)展集。所謂超集，其實(shí)就是在 JavaScript 原有的基礎(chǔ)之上多了一些擴(kuò)展特性。多出來的呢，實(shí)際上就是一套更強(qiáng)大的類型系統(tǒng)，以及對(duì) ECMAScript 新特性的支持。而且它最終會(huì)編譯為原始的 JavaScript。

這也就是說，使用 TypeScript 過后，我們開發(fā)者在開發(fā)過程中可以直接使用 TypeScript 所提供的新特性，以及 TypeScript 中更強(qiáng)大的類型系統(tǒng)去完成開發(fā)工作。然后將其編譯為能在生產(chǎn)環(huán)境直接運(yùn)行的 JavaScript 代碼。

那它的作用也就很明顯了。類型系統(tǒng)優(yōu)勢(shì)我們已經(jīng)有所體會(huì)，就是幫我們避免開發(fā)過程中有可能的類型異常，提高編碼的效率，以及代碼的可靠程度。新特性支持也不用多說。ECMAScript 幾年迭代了很多非常有用的新功能，但是在很多成就的環(huán)境中都有兼容問題。TypeScript 支持自動(dòng)轉(zhuǎn)換這些新特性，所以我們可以立即去使用它們。

那即便我們不需要類型系統(tǒng)，通過 TypeScript 去使用 ECMAScript 的新特性也是一個(gè)很好的選擇。因?yàn)?TypeScript 最終可以選擇編譯到最低 ES3 版本的代碼，所以兼容性非常好。

因?yàn)樽罱K是編譯為 JavaScript。所以任何一個(gè) JavaScript 運(yùn)行環(huán)境下的應(yīng)用程序，都可以使用 TypeScript 開發(fā)。例如瀏覽器應(yīng)用，Node.js 應(yīng)用，React Native，或者是 Electron 桌面應(yīng)用。

相比較于 Flow，TypeScript 作為一門完整的編程語(yǔ)言，它的功能更為強(qiáng)大。生態(tài)也更健全、更完善。特別是對(duì)于開發(fā)工具這一塊，微軟自家的開發(fā)工具對(duì) TypeScript 的支持都特別友好。

Vue3.0

Vue 是“一個(gè)用于構(gòu)建用戶應(yīng)用程序的漸進(jìn)式框架”。它的設(shè)計(jì)非常靈活，可以將單個(gè) Vue 庫(kù)集成到其他項(xiàng)目中，也可以完全使用 Vue 構(gòu)建復(fù)雜的項(xiàng)目。Vue 通常被視為一個(gè)易于理解和實(shí)現(xiàn)的框架，它支持純 HTML 模板，而 React 需要使用 JavaScript 定義來 DOM 元素。

Vue 3.0 的五個(gè)關(guān)鍵變化：

1、速度

速度更快是 Vue 目前的主要賣點(diǎn)之一,Vue 以其渲染速度而聞名，與其他框架一樣，Vue 使用虛擬 DOM 來渲染組件。為了加速渲染過程，必須減少虛擬 DOM 的工作負(fù)載。通過編譯時(shí)間提示、組件快速路徑、單態(tài)調(diào)用、優(yōu)化 slot 生成等手段來達(dá)到提速目的。

2、體積

目前，Vue 的體積已經(jīng)很小了（壓縮后 20KB）。由于進(jìn)行了搖樹優(yōu)化（消除非重要代碼），3.0 的預(yù)計(jì)大小約為 10KB（壓縮后）。主要是移除了對(duì) Vue 項(xiàng)目來說不是很重要的庫(kù)，可以通過 import 語(yǔ)句來使用它們，而不是把它們打包在主 src 代碼中。

3、可維護(hù)性

Vue 3.0 將從 Flow 轉(zhuǎn)到 TypeScript，同時(shí)又非常重視兼容性易用性，不喜歡使用 TypeScript 的用戶仍然可以使用純 JavaScript。Vue 3.0 提供了更好的模塊化，從而變得更加可定制和靈活，還提供了透明性，開發(fā)人員可以深入到源代碼中。編譯器重寫是最令人興奮的功能之一，不僅帶來了更好的 IDE 支持，而且可以創(chuàng)建源碼映射，如果存在運(yùn)行時(shí)錯(cuò)誤，它將給出錯(cuò)誤對(duì)應(yīng)的文件位置和行號(hào)。

4、面向原生

Vue 3.0 將與平臺(tái)無關(guān)——它將運(yùn)行純 JavaScript，并且在其主構(gòu)建中不會(huì)假設(shè)使用諸如 Node.js 之類的東西。這種靈活性使構(gòu)建 Web、iOS 或 Android 應(yīng)用程序變得更容易。面向原生使 Vue 更像是 React 的替代品。

5、易用性

公開 Reactivity API——新的變更允許開發(fā)人員顯式創(chuàng)建反應(yīng)式對(duì)象和自定義重渲染 hook。3.0 還解決了 Vue 用戶經(jīng)常抱怨的一個(gè)問題：什么時(shí)候以及為什么要重新渲染組件？3.0 提供了一個(gè) renderTriggered 事件，人們可以通過它查看是什么觸發(fā)了更新。這個(gè)出色的功能將使 Vue 更加透明。

JAMStack

JAMstack是指使用JavaScript、API和Markup構(gòu)建的技術(shù)堆棧，JAM是JavaScript、API和Markup的簡(jiǎn)稱，前面第一個(gè)字母縮寫，JAMstack一種基于客戶端JavaScript，可重用API和預(yù)構(gòu)建Markup的現(xiàn)代Web開發(fā)架構(gòu)，需要符合下面三個(gè)標(biāo)準(zhǔn)：

1. JavaScript：請(qǐng)求/響應(yīng)周期中的任何動(dòng)態(tài)編程都由JavaScript處理，完全在客戶端上運(yùn)行。這可以是任何前端框架，庫(kù)，甚至是輕量JavaScript。

2. API：所有服務(wù)器端進(jìn)程或數(shù)據(jù)庫(kù)操作都被抽象為可重用的API，使用JavaScript通過HTTPS訪問。這些可以是定制的或利用第三方服務(wù)。

3. Markup：模板化標(biāo)記應(yīng)該在部署時(shí)預(yù)先構(gòu)建，通常使用內(nèi)容站點(diǎn)的站點(diǎn)生成器或Web應(yīng)用程序的構(gòu)建工具。

為什么JAMstack會(huì)逐漸流行？

1. 更好的性能：為什么要在部署時(shí)生成頁(yè)面時(shí)等待頁(yè)面動(dòng)態(tài)構(gòu)建？當(dāng)談到最小化第一個(gè)字節(jié)的時(shí)間時(shí)，沒有什么能比通過CDN提供的預(yù)構(gòu)建文件更好。

2. 安全性更高：將服務(wù)器端進(jìn)程抽象為微服務(wù)API，可以減少攻擊的表面區(qū)域。您還可以利用專業(yè)第三方服務(wù)的專業(yè)知識(shí)。

3. 更便宜，更容易擴(kuò)展：當(dāng)您的部署相當(dāng)于可以在任何地方提供服務(wù)的一堆文件時(shí)，擴(kuò)展就是在更多地方提供這些文件的問題。CDN是完美的，通常包括擴(kuò)展他們的所有計(jì)劃。

4. 更好的開發(fā)者體驗(yàn)：松散耦合和控制分離允許更有針對(duì)性的開發(fā)和調(diào)試，并且為站點(diǎn)生成器擴(kuò)展選擇CMS選項(xiàng)消除了為內(nèi)容和營(yíng)銷維護(hù)單獨(dú)堆棧的需要。

2020年前端發(fā)展趨勢(shì)已經(jīng)十分明朗，可以說弄不懂這三大技術(shù)到底是何原理，勢(shì)必會(huì)嚴(yán)重影響工作效率，乃至跳槽時(shí)也將處于不利地位。