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

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

TypeScript

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

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

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

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

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

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

Vue3.0

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

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

1、速度

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

2、體積

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

3、可維護性

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

4、面向原生

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

5、易用性

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

JAMStack

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

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

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

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

為什么JAMstack會逐漸流行？

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

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

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

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

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