前端 JavaScript 新聞簡報（2021 年第三季度）

Honeybadger 的季度簡報讓您了解編程社區中最重要的發展。我們會整理新聞，以便您可以花更多時間關注真正重要的事情。

• 活動：會議和聚會。即將完成，最近完成。
• 安全性：最近的漏洞報告
• 項目：有關主要社區項目的新聞
• 熱門話題：每個人都在談論的大話題摘要
• 突出內容：不適合其他部分的內容，但太酷了，不能省略。

活動

CascadiaJS 於 11 月 3 日至 11 月 4 日

CascadiaJS 是在太平洋西北部發起的 Web 開發人員會議。會議將在網上和幾個地點（西雅圖、波特蘭、溫哥華不列顛哥倫比亞省）舉行。主題會有所不同，從 JavaScript 到 Web 組裝，再到黑客硬件，再到建立健康的工程團隊。

• 9 月 23 日：發布初步時間表。
• 9 月 10 日：您應該參加 CascadiaJS 2021 的 10 大理由。

React 高級會議 2021，10 月 22 日和 25 日

React 生態系統和社區在過去幾年中急劇增長，Web 和 JavaScript 應用程序開發的複雜性也隨之增加。本次會議在倫敦（或遠程）舉行，提供了與全球現場專家網絡聯繫並探索框架的機會。

• 時間表現已發布。

Next.js Conf 2021 10 月 26 日

第二屆 Next.js 全球社區大會正在線上舉行，慶祝流行的 React 框架問世五週年。

• 徵集提案。

國際 JavaScript 會議，紐約，9 月 27 日至 30 日

國際 JavaScript 會議是一個全棧會議，將國際專家聚集在一個地方，分享對當前和未來 JavaScript 的見解。

安全

• 8 月 16 日：10.0.0 和 11.0.0 之間的 Next.js 版本包含一個跨站點腳本漏洞，該漏洞最終在 Next.js 11.1.1 中修復。
• 8 月：Next.js 包含一個漏洞，該漏洞可能允許通過從受信任的域重定向到攻擊者的域來進行網絡釣魚攻擊。該問題已在 11.1.0 版中修復。

項目

Vue.js

Vue.js 是一個用於構建用戶界面和單頁應用程序的 JavaScript 框架。

• 8 月 5 日：此版本包含許多重要的新功能和性能改進，並且不包含重大更改。
• 9 月 21 日：petite-vue 是 Vue 的替代發行版，針對漸進增強進行了優化。它提供與標準 Vue 相同的模板語法和反應性思維模型。

餘燼

Ember.js 是一個自以為是、功能齊全且包含電池的 JavaScript 框架，用於構建現代 Web 應用程序。

• 9 月 7 日：Ember 3.28 發布，標誌著該項目的 3.x 系列結束。還宣布了所有子項目的 Ember 4.0 測試週期的開始。為確保順利升級到 4.x 系列，已宣布 3.28 為 LTS（長期支持）候選版本。
• 7 月 14 日：Ember 開發人員討論了 Ember 4.0 中的新功能。遵循之前主要版本中設置的流程，Ember 4.0 的測試版沒有引入新功能 4.0 版測試版也已發布。相反，它移除了對 Ember 3.x 中已棄用的公共 API 的支持。

TypeScript

TypeScript 是一種由微軟開發和維護的編程語言，它為 JavaScript 語言添加了可選的靜態類型。

• 8 月 26 日：TypeScript 4.4 發布，帶來了許多新功能，例如別名條件和判別式的控制流分析、符號和模板字符串模式索引簽名、static 類中的塊，默認為 unknown 在 catch 變量中，等等！
• 8 月 24 日：TypeScript 有了一個新主頁。核心團隊在本文中解釋了他們對重新設計的思考過程。

SolidJS

Solid 是一個響應式 JavaScript 庫，用於在沒有虛擬 DOM 的情況下創建用戶界面。

• 6 月 29 日：Solid 的創建者展示了 Solid 如何解決 React 的缺點，同時提供類似 Svelte 的簡單性。
• 8 月 9 日：Solid v1.1 發布。

Next.js

Next.js 是一個用於開發 JavaScript 應用程序的 React 框架。它啟用了一些額外的功能，包括服務器端渲染和生成靜態網站。

• 8 月 11 日：Next.js 11.1 發布，支持 ES 模塊、基於 Rust 的新工具、改進的構建性能等。

熱門話題

Next.js (10)

本季度許多前端 Web 開發人員都在談論 Next.js，許多人討論了他們為什麼選擇遷移到該框架，或者為什麼停止使用它，而其他人則寫到如何更有效地使用該框架。

• 如何從 jQuery 遷移到 Next.js

  • 法昆多·朱利安尼
  • 本文討論了將使用 jQuery 框架的 Web 應用程序遷移到 Next.js 的不同方法和策略。

• Next.js 是最好的 React 框架

  • 哈利·沃爾夫
  • 本視頻討論了 Next.js 的多個方面，包括開箱即用的功能、開發者體驗、路由和其他功能。

• 將 Notion 的營銷網站遷移到 Next.js

  • 科里·埃茨科恩
  • 本文討論了 Notion 將其客戶端呈現的 SPA 遷移到由 Next.js 提供支持的客戶端呈現方法的決定。他們討論了舊網站面臨的一些問題、他們選擇 Next.js 的原因以及遷移過程是什麼樣的。

• 遠離 Next.js

  • 路易斯·內維斯
  • 這位作者分享了他的團隊如何在 11 個月前離開 Next.js，以及他們為何沒有回頭的故事。

• Next.js 中的全局與本地樣式

  • 亞歷山大·杜博沃伊
  • Next.js 對如何組織 JavaScript 而不是 CSS 有強烈的看法。在本文中，作者探討瞭如何在不偏離框架邏輯的情況下開發鼓勵最佳 CSS 實踐的模式。

• Next.js 中的狀態管理

  • 阿提拉·法西納
  • 在 Next.js 應用程序中管理狀態很快就會變得棘手。本文著眼於一些模式，以幫助避免常見場景中的複雜性並避免“供應商地獄”。

下一代 JavaScript 功能（5）

關於 ECMAScript 未來版本的內容總是有一些討論，本季度也不例外。事實上，有些人開始指責 JavaScript 功能太多，慢慢變成了 Java。

• ES2022 特性：類靜態初始化塊

  • 博士。阿克塞爾·勞施邁爾
  • 關於類靜態初始化塊的 ECMAScript 提案處於第 4 階段，併計劃包含在 ECMAScript 2022 中。本文介紹了此功能，並考慮了 JavaScript 是否變得更像 Java。黑客新聞討論。

• JavaScript 的管道運算符 (|>)

  • TC39
  • 2020 年 JS 現狀調查問題“您認為 JavaScript 目前缺少什麼？”的最佳答案之一是一名管道操作員。該提案（目前處於第 2 階段，共 4 階段）主張在語言中包含此功能，並解釋了為什麼需要它。

• 時間：開始使用 JavaScript 的新日期時間 API

  • 博士。阿克塞爾·勞施邁爾
  • 眾所周知，JavaScript 的當前日期時間 API 難以使用。 ECMAScript 提案“Temporal”是一個新的更好的日期時間 API，目前處於第 3 階段。這篇博文讓您了解 Temporal 的工作原理，並幫助您開始使用它。黑客新聞討論。

結構化前端應用程序和組件（5）

過去已經寫過一長串“如何構建前端應用程序”的文章，但它仍然是一個長期有趣的話題，因為真的沒有辦法。

• 如何構建大型 Vue.js 應用程序

  • 丹尼爾·凱利
  • 本文提出了一種構建 Vue.js 項目的方法，該方法可以避免代碼重複，提高穩定性，並幫助它隨著增長而保持可維護性和可擴展性。

• 如何構建和組織 React 應用程序

  • 塔尼亞·拉夏
  • 本文描述了作者認為的用於大規模生產 React 應用程序的直觀且可擴展的系統。

• 70 年代關於如何拆分 React 組件的指南

  • 若昂·福爾加
  • 本文提供了一個指南，用於驗證拆分 React 組件以增加代碼重用並降低維護成本的想法。討論的想法來自 David Parna 於 1979 年撰寫的論文“Designing Software for Ease of Extension and Contraction”。

• 防彈反應

  • 艾倫·阿利科維奇
  • 這個項目試圖展示一種使用生態系統中最好的工具來創建 React 應用程序的方法，該工具具有良好的項目結構，可以很好地擴展。它基於使用許多不同代碼庫的經驗。

JavaScript 捆綁 (4)

• 小包，快速頁面：使用過多 JavaScript 怎麼辦

  • 本·施瓦茨
  • 減少 JavaScript 的交付是提高 Web 應用程序性能的一種方法！捆綁包的大小很重要，本文介紹了一些用於監控、可視化並將其縮小到可管理水平的策略。

• 捆綁非 JavaScript 資源

  • 英格瓦·斯捷潘尼安
  • 本文討論瞭如何以一種適用於瀏覽器和捆綁程序的方式從 JavaScript 導入和捆綁各種類型的資產。

• 沒有 JavaScript 捆綁或轉譯的現代網絡應用程序

  • 大衛·海涅邁爾·漢森
  • 流行的 Ruby on Rails 框架的原始創建者解釋了他對 JavaScript 在基於 Rails 的應用程序中的未來的看法。它涉及使用導入映射，而不需要像 Webpacker 這樣的打包程序——相反，應用程序只會拉入所需的 ES 模塊。

突出內容

• 如何構建彈性 JavaScript UI

  • 卡勒姆·哈特
  • 本文探討了優雅的降級、防禦性編碼、可觀察性和對失敗的健康態度如何使您作為 JavaScript 開發人員處於更好的位置。

• React 18 有什麼新功能？

  • Yagmur Cetin Tas
  • 本文概述了 React 的下一個（尚未發布的）主要版本中即將出現的內容。

• Chrome 擴展程序如何影響瀏覽器性能？

  • 馬特·澤納特
  • 本報告調查了 1000 個最流行的 Chrome 擴展程序如何影響瀏覽器性能和最終用戶體驗。黑客新聞討論。