近年來，Web 應用在整個軟件與互聯網行業承載的責任越來越重，軟件複雜度和維護成本越來越高，Web 技術，尤其是 Web 客戶端技術，迎來了爆發式的發展。
在過去的一年中，前端開發的世界再次迅速發展，本文總結了2019年以來前端和Web開發的主要事件和趨勢。
關鍵詞：TypeScript、PWA、WebAssembly、Serverless、Flutter、CSS-in-JS
TypeScript 使用率激增
2019年是TypeScript的一年。TypeScript不僅成爲在JS代碼中添加數據類型的最佳選擇，而且許多開發人員會選擇在個人項目和工作中使用它。在年初發布的StackOverflow調查中，TypeScript與Python並列第二，成爲最受歡迎的語言，僅次於Rust。可以預見，在2020年，它的地位將進一步攀升。
TypeScript 已經席捲了整個 Web 開發世界——前端和後端皆是如此。一些開發人員認爲 TS 只是跟風炒作的產物，覺得它會步 CoffeeScript 後塵；但 TypeScript 已被證明可以解決 JS 開發人員面臨的一大核心問題，而且它的使用率看來只增不減。
TypeScript 與所有主流文本編輯器的集成，爲 Web 開發人員提供了更好的開發體驗。JavaScript 開發人員將 TypeScript 視爲一種工具，它可以減少錯誤，還可以通過（提供自帶描述的）類型和對象接口更輕鬆地讀取代碼。
值得注意的是，TypeScript 在 2019 年的 NPM 下載量超越了 React，其流行程度可見一斑。此外，它的下載量也比 Flow 和 Reason 等競爭對手高得多。
下一代Web應用：PWA
老生常談，我們先對比一下生活中WebAPP 和 原生APP的優劣：- web APP 對比 原生APP 的優勢，開發成本低，適配多種移動設備，不用IOS
安卓多套代碼，迭代更新容易,省去了審覈、發包、各種渠道發佈帶來的時間損耗，無需安裝成本，拿來即用。 - 當然原生APP也有它獨到的優勢，這些web app所沒有的優勢我們也不知道以後會不會有突破！
PWA解決的問題
- 能夠顯著提高應用加載速度
- 甚至讓 web 應用可以在離線環境使用 （Service Worker）
- web 應用能夠像原生應用一樣被添加到主屏、全屏執行 （Web App Manifest）
- 進一步提高 web 應用與操作系統集成能力，讓 web 應用能在未被激活時發起推送通知 （Push API 與 Notification
API） 等等。
推送Push Notification
Push API 的出現則讓推送服務具備了向 web 應用推送消息的能力，它定義了 web 應用如何向推送服務發起訂閱、如何響應推送消息，以及 web 應用、應用服務器與推送服務之間的鑑權與加密機制；由於 Push API 並不依賴 web 應用與瀏覽器 UI 存活，所以即使是在 web 應用與瀏覽器未被用戶打開的時候，也可以通過後臺進程接受推送消息並調用 Notification API 向用戶發出通知。
WebAssembly成爲連接Web的第四種語言
什麼是WebAssembly? WebAssembly 是由主流瀏覽器廠商組成的 W3C 社區團體 制定的一個新的規範。 它的縮寫是".wasm"，.wasm 爲文件名後綴，是一種新的底層安全的二進制語法。可以接近原生的性能運行，併爲諸如C / C ++等語言提供一個編譯目標，以便它們可以在Web上運行。它也被設計爲可以與JavaScript共存，允許兩者一起工作。
能突破前端3D game 、 VR/AR 、 機器視覺、圖像處理等運行速度瓶頸。
WebAssembly 是一種新的字節碼格式，目前主流瀏覽器都已經支WebAssembly。和 JS 需要解釋執行不同的是，WebAssembly 字節碼和底層機器碼很相似，可以快速裝載運行，因此性能相對於 JS 解釋執行而言有了極大的提升。也就是說WebAssembly 並不是一門編程語言，而是一份字節碼標準，需要用高級編程語言編譯出字節碼放到 WebAssembly 虛擬機中才能運行，瀏覽器廠商需要做的就是根據 WebAssembly 規範實現虛擬機。
有了 WebAssembly，在瀏覽器上可以跑任何語言。從 Coffee 到 TypeScript，到 Babel，這些都是需要轉譯爲 js 才能被執行的，而 WebAssembly 是在瀏覽器裏嵌入 vm，直接執行，不需要轉譯，執行效率自然高得多。
WebAssembly成爲連接HTML，CSS和JavaScript的Web第四種語言。經過一年的平靜之後，WebAssembly在12月初被 W3C 聯盟正式收編，並推薦的Web語言。
2019年，很多的公司都開始投入人力進行WebAssembly的學習個改造，相信2020年WebAssembly會經歷爆發式期。
Serverless火爆
Serverless 的火爆是乎可以歸因於前端。因爲 Serverless 能夠較完美的⽀持Node.js，使⽤ Serverless 幫助前端開發者解決了使用Node.js 過程中的諸多問題。當前的前端工程師大多都是科班出身，雖不能和正宗的服務端開發同學比，但也可寫很多服務端層的業務邏輯。當前已經有很多公司在做 BFF 層，來滿足這部分訴求，但依舊擺脫不掉運維、機器分配 這條攔路虎。隨着 Serverless 的逐步落地，BFF 這層的代碼會擺脫運維、機器分配等複雜的問題，同時大概率會由前端同學寫這部分代碼，服務端同學專注中臺系統的實現。從業務上說，業務的試錯成本也會大幅度降低。隨着 Node.js 成爲前端開發者必備技能之後，雲計算的不斷普及會讓Serverless 觸不可及。當越來越多的開發者嚐到研發⾼效的甜頭之後，Serverless 必將對前端的研發模式產生變化。
同時，使用Serverless的同學一定會使用 TS。這也意味着，2020 不寫 TS 可能真的就 Out 了。
Flutter爆炸發展元年，挑戰React Native跨平臺框架王者地位
Flutter在React Native發行2年後發佈，目前Star數已81.1k, 超過React Native的83.2k指日可待。 但其的issue數，已穩定保持了多年的5000+。Flutter沒有像React Native那樣與React Web開發人員一樣擁有開發人員社區來實現共同進步，所以這個受歡迎程度是實打實的：Flutter正在使自己成爲最佳的跨平臺框架。
CSS-in-JS勢頭強勁
如前所述，Facebook甚至可能將CSS-in-JS視爲前端的未來，並將發佈自己的庫。 在傳統應用中，我們添加樣式需要這麼做：// Component JS file
const MyComp = ({ isActive }) => {
const className = isActive ? 'active' : 'inactive';
return <div className={className}>HI</div>
}
// CSS file
.active { color: green; }
.inactive { color: red; }
使用CSS-in-JS，你將不再管理CSS類，只需傳遞props給樣式化的組件，它便使用聲明性語法處理動態樣式。代碼更加簡潔。
現在，所有內容都像正常的React代碼一樣讀取：
const Header = styled.div`
color：$ {（{isActive}）=> isActive嗎？'green'：'red'};
`;
const MyComp =（{isActive}} =>（
<Header isActive = {isActive}> HI </ Header>
）
CSS-in-JS兩個主要的庫是：styled-components和emotion。
2020年的趨勢預測
- TypeScript成爲創業公司和新項目的默認選擇。未來項目會越來越複雜，用了 TS 項目的風險會可控很多。
- 隨着代碼拆分和PWA的進一步利用，性能仍然是Web上最重要的一部分。
- WebAssembly變得越來越普遍，得到了實際採用，並被用於產品中。
- Flutter可能會取代React Native成爲構建跨平臺移動應用的最佳方式。
- CSS-in-JS可能會成爲默認的樣式設置方法，而不是普通的CSS。
後記：
小夥伴們，如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。如果覺得本文還不錯，記得點個贊哦！
本文首發地址爲： Vae’s Blog
