Deno 衝上榜首，Vue.js 首次屈居第二，JAVAScript 年度「新起之秀」都有誰？
整理 | 鄭麗媛
出品 | CSDN資訊
近些年來，科技領域飛速發展，人工智慧、雲計算、大數據、物聯網等新興技術日益蓬勃，各類前沿技術逐漸落地，服務於每個人的日常點滴。 這些技術究其根本，便是各類程式設計語言，而今天我們要談的就是 JavaScript。
JavaScript 這幾年也在全力以赴地跟進創新，使得其各類相關工具及框架的淘汰速度也隨之加快，可能曾經風靡一時的專案，幾個月後便不見蹤影。 由此，Best Of JS 通過比對 12 個月來在 GitHub 上新增的 Star 數，來查看當年哪些專案受到更多關注。 目前，最新 2020 年的榜單已出爐，看看都有哪些「新起之秀」吧！
一、總體最受歡迎專案
仿佛為了貼合 2020 年"特殊"的畫風，2020 年 JavaScript 的"新秀之冠"也不走尋常路了：Vue.js 5 年來首次讓位，Deno 衝上榜首。
Deno 是由 Node.js 建立者 Ryan Dahl 開發的一個 JavaScript 運行環境。 由於 Deno 吸取了 Node.js 10 年的經驗與反覆運算，修正並改正了許多要點，因此 Deno 通常被視作 Node.js 的續作。
Deno 的主要特點包括：
- 預設包含 TypeScript 編譯器（也可以使用 JavaScript 編碼）
- 沒有集中的包管理器，可從任意 URL 載入 JavaScript 依賴項
- "標準庫"為通常需要在 Node.js 中安裝包的常見需求提供了解決方案
- Deno 用了許多 Web 標準 （例如： Fetch API）
- 使用 ECMAScript 模組導入的檔
- 內置測試運行器和調試器
- Deno 的生態系統還很年輕
Deno 的成功證實了 2 大趨勢：
- 無論在前端還是用戶端中，TypeScript 語言都正在興起
- 通過 Snowpack 等解決方案即時導入的 ES6 模組的興起
二、前端框架
Vue.js 和 React 一直在爭前端框架的"第一"，不過近 5 年來都是 Vue.js 穩操勝券。 Angular 在 2020 年也"一雪前恥"，奪回了 2019 年被 Svelte 搶去的第三。
值得一提的是，前五名中有個新面孔——Alpine.js，一個由 Laravel LiveWire 為瀏覽器設計的極簡反應框架，借鑒了 Vue.js 和 Angular 中自定義 HTML 指令和雙向綁定等特點。 某些層面上，Alpine.js 是快速增強現有功能的理想解決方案，因為在 HTML 頁面上添加一個
三、Node.js 框架
在 Node.js 框架中，有兩種類型的專案佔主導地位。 一種，是像 Next.js 和 Nuxt 這樣的全疊框架，在將 React 和 Vue.js 帶入伺服器端時會對如何構建應用有自身的見解;還有一種，是那些只在伺服器上運行的經典選項，例如 Nest （去年該類別的冠軍） 和 Fastify。
與 2018 年一樣，該類別由 Next.js 領頭。 起初，Next.js 作為在伺服器上呈現 React 應用程式的解決方案而聞名。 現在，它是使用 React 構建全棧 Web 應用程式的領先解決方案。
關於全棧框架，出現了兩個新競爭者：Blitz 和 Redwood，均旨在提供最佳開發體驗以構建完整的 Web 應用程式。 還有個有趣的發現，11年前出生的 Express 在 JavaScript 領域仍然很重要。
四、React 生態系統
對於 React 生態系統，Lee Robinson （在 Vercel 擔任解決方案架構師的開發者、作家兼建立者）評價道：
2020 年 React 生態系統的主題是「穩定」。 儘管 React 17 並沒有帶來突破性改變，但它為未來奠定了基礎：React Server Components。
通過減少用戶端包大小和縮短啟動時間，React Server Components 將改變構建 React 應用程式的方式。 此外，它們將簡化數據獲取和對數據源（如資料庫和文件系統）的訪問。
Next.js 目前是構建 React 應用程式最受歡迎的解決方案。 支援庫（如 React Query，Recoil 和 React Hook Form）也已成熟發展。 與完善的元件庫配合使用時，React 開發者在工具上會有更多的選擇。
五、Vue 生態系統
2020 年 Vue.js 社區中最大的新聞應該是 Vue.js 3 的發布。 其新的 Composition API，可改善 Vue.js 2 中的三個限制：
- 很難通過元件內部的邏輯關係來組織代碼;
- 簡化跨元件的代碼重用（使用 Vue 2，mixins，mixing factory 和 scoped slots 不是最佳選擇）;
- 對 TypeScript 更加支援。
另外，一個新的網路構建工具 Vite 也在 2020 年問世。 該工具由 ES 模組提供支援，是從命令行開始使用 Vue.js 應用程式的最快方法。
六、Angular 生態系統
排名前 5 位的 Angular 專案和 2019 年基本一致，除了一個新面孔——排名第三的 Scully。 Scully 是一個靜態網站生成器，該專案於 2019 年 12 月啟動，它將 Angular 帶入 Jamstack。
Angular 在 2020 年發佈了三個主要版本：Angular 9、Angular 10 和 Angular 11。
Angular 9 在 2 月份發布，主要變化是轉向了 Ivy 編譯器，帶來了更小的包大小和許多其他構建改進。 Angular 10 於 6 月份發表，更新了部分元件以及配置，包括新的日期範圍選擇器，使用了新的默認瀏覽器配置，加入限制更嚴謹的嚴格模式。 Angular 11 在 11 月份公開，主要將 TypeScript 升級到 4.0， 對 TypeScript 3.9 不再支援，並放棄了對 IE 9 、10 的支援。
七、構建工具
Sébastien Lorber （React 的早期消費者，與 Docusaurus 上的 Facebook Open-Source 合作）對 2020 年的建構工具有著這樣的評價：
2020 年是構建工具的重要一年，因為我們看到了許多新趨勢。
Snowpack 和 Vite 將賭注壓在了 ES 模組優先的方法上：它們不會在開發過程中捆綁代碼，反饋迴圈非常快，並且會退回僅用於生產捆綁（除非增加瀏覽器支援）。
swc 和 esbuild 充分利用了 Rust 和 Go 的出色性能，均支援 TypeScript。
Webpack 通常被描述得過於複雜，而諸如 Parcel 和 Rollup 之類的簡單替代品已經成熟。 但 Webpack 仍是實用的建構工具，其新緩存層可顯著提高構建性能。
Monorepos 正在成為主流：Yarn 和 Lerna 被廣泛使用，npm 7 也加入了進來。
2021 年看點：Rome、Toast、Turborepo。
八、CSS 框架
與 2019 年相比，2020 年新增了這一環節，該部分將重點介紹 Tailwind CSS 的成功及其"實用程式至上"的方法。
與 Bootstrap 或 Bulma 等更傳統的 CSS 框架相比，Tailwind CSS 提供了命名約定，開發者可透過編寫類名為頁面和元件設置樣式。
根據 CSS 出色狀態報告，Tailwind CSS 滿意度最高。 其版本2的發佈帶來了許多新功能，包括支援受人喜愛的"黑暗模式"。
九、其餘類別部分排名
JavaScript 中的 CSS
測試工具
移動應用程式
JS 特色/編譯器
狀態管理
GraphQL
學習資源
十、總結
2020 年對於 JAVAScript 領域又是偉大的一年，Best of JS 在不同的類別排名中發現了幾個新的"領軍者"。
- 後端開發人員可以享受 Deno 帶來的樂趣，並立即開始使用 TypeScript，而不必擔心依賴關係。
- 前端開發人員現在可以使用諸如 esbuild，Snowpack 和 Vite 之類的解決方案來更快、更簡單地建構工具。
- 而工具上，NPM的第 7 版提供了可在單個存儲庫中處理多個包的工作區，這曾是其競爭對手 Yarn 的一大優勢。
- 對於樣式，Tailwind CSS 之類的解決方案也來自同一方向，提供了許多便利，並圍繞一個簡單的概念構建了一個生態系統。
那麼，2021 年將會發生什麼呢？
- 或許可以期待 React Server Components 將帶來怎樣有趣的變化。
- 既然現在 Sebastian McKenzie 正專心致力於 Rome 的開發，那它在統一 JavaScript 工具方面會走多遠？ 它將是處理編譯、測試、檢測等一切過程的唯一選項嗎？
- 另外，全棧框架 Redwood 專案也值得密切關注，該專案與 GraphQL
配合良好，並且具有使用其所謂的"單元"來處理數據提取的獨特方法。