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

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

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

活動

JSCAMP Virtual 2021 年 7 月 15 日至 16 日

為期兩天的國際會議，主題包括 WebAssembly、React、TypeScript、調試、2021 ECMAScript 功能和即將提出的提案。

• 位置 ：西班牙巴塞羅那和虛擬
• 演講者
• 時間表

2021 年 7 月 23 日和 2021 年 7 月 30 日的網絡方向全球範圍

GlobalScope 旨在專注於 JavaScript 這種語言。它面向所有使用 JavaScript 的人，從前端和節點開發人員到庫和框架開發人員。

• 位置 ：虛擬。
• 演講者
• 時間表

Render-Atlanta (RenderATL) 2021 2021 年 9 月 13 日 - 2021 年 9 月 15 日

RenderATL 是美國南部的第一個大型 React 會議。它由熱情的 React 工程師團隊構思，他們希望幫助推動更多的文化、包容性和可訪問性進入 React 生態系統。

• 位置 ：美國亞特蘭大。
• 演講者

2021 年 9 月 17 日和 2021 年 9 月 24 日的網絡方向代碼

漸進式 Web 應用程序和 Web 平台會議。它側重於開發 PWA、相關瀏覽器 API 的實踐，以及交付複雜 Web 應用程序的模式和最佳實踐。

• 位置 ：虛擬。

安全

• 4 月 23 日：1.14.6 之前的 React Draft Wysiwyg 允許在用戶之間共享草稿時在 decorators/Link/index.js 中的鏈接裝飾器的鏈接目標中使用 javascript URI，從而導致 XSS。

項目

角度

Angular 是一個應用程序設計框架和開發平台，用於創建高效和復雜的單頁應用程序。

• 5 月 18 日：Angular 團隊發布了 Angular DevTools。它是一個 Chrome DevTools 擴展程序，可用於檢查應用程序的結構並分析其性能。
• 5 月 13 日：Angular v12 發布。雖然新版本不是一場革命，但它是朝著完全過渡到 Angular 的下一代編譯和渲染管道 Ivy 邁出的重要一步。以前稱為 View Engine 的編譯和渲染管道現已棄用。
• 4 月 27 日：Angular 團隊將在 Angular v12 中棄用對 Internet Explorer 11 的支持，併計劃在 Angular v13（2021 年末）中移除對此瀏覽器的支持。

Vue.js

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

• 4 月 2 日：Vue.js 團隊發布了一項計劃，取消對 Vue 3 的 IE11 支持。關於 Hacker News 和 Reddit 的討論。
• 6 月 7 日：Vue.js 3.1.0 (Pluto) 發布。主要亮點是旨在幫助將現有 Vue 2 應用遷移到 Vue 3 的遷移構建。

通天塔

Babel 是一個 JavaScript 編譯器。

• 5 月 10 日：數百萬人使用 Babel，為什麼我們的錢用完了？關於 Hacker News 和 Reddit 的討論
• 4 月 29 日：v7.14.0 發布，默認啟用新的類功能、TypeScript 4.3、異步執行表達式和更好的 CommonJS 互操作性。

反應

React 是一個用於構建用戶界面的 JavaScript 庫。

• 6 月 8 日：React 團隊詳細介紹了 React 18 的計劃，包括計劃中的功能和發佈時間表。在這里和這裡討論 Hacker News 和 Reddit。

熱門話題

CSS-IN-JS (8)

CSS-in-JS 是一種編寫應用程序樣式的現代方法，在前端工具中佔有一席之地，並且這種趨勢在不久的將來應該會繼續下去。儘管有其優勢，但它仍然是一項有爭議的技術，因為許多開發人員不斷詢問是否值得在他們的工作流程中採用它。

• 真實世界的 CSS 與 CSS-in-JS 的性能比較

  • 托馬斯·普斯特尼克
  • 作者通過 Chrome DevTools 和 Lighthouse 將 Styled Components（一種流行的 CSS-in-JS 庫）與現實世界應用程序中傳統靜態生成的 CSS 樣式表的性能進行了比較。結果可以幫助您確定哪種解決方案對您的用例具有最合理的權衡。關於 Hacker News 和 Reddit 的討論。

• 全面解析 CSS-in-JS

  • 安德烈·菲佛
  • 本文不討論是否或為什麼應該採用 CSS-in-JS 解決方案。它的目標用戶是想要使用這種方法但很難決定選擇哪種解決方案的人。作者比較了該領域 10 個最受歡迎的圖書館的突出特點，以幫助讀者做出更明智的決定。

• 揭開樣式組件的神秘面紗

  • 約書亞·科莫
  • 在本文中，作者對樣式化組件庫的工作原理進行了很好的解釋。他的理由是，學習工具如何在更深層次上工作有助於培養我們的直覺，以找出哪些類型的組合有意義，哪些沒有意義。它在調試時也有很大幫助，因為如果我們確切知道該工具在做什麼，我們可以更輕鬆地追踪問題的根源。

網絡性能（12）

本季度，關於前端性能的討論在社區中很普遍，大多數話題都集中在 Google 的 Core Web Vitals 指標上。

• 用於檢測生產中 JavaScript 性能問題的新瀏覽器 API

  • 邁克爾·施皮特
  • 本文介紹了使用 performance.now() 等原生瀏覽器 API 來衡量 Web 應用程序實際性能的方法 、Long Task API（帶有 PerformanceObserver）、Event Timing API 和 JavaScript Self-Profiling API。並非本文討論的所有 API 都已在所有瀏覽器中實現，但它們都可以使用最新版本的 Google Chrome 進行測試。

• 衡量核心網絡生命力的深入指南

  • 巴里·波拉德
  • Core Web Vitals 是一組三個指標，旨在衡量用戶感覺網站是快還是慢的“核心”體驗，Google 宣布，從 2021 年 6 月起，這些指標將影響搜索排名。本文討論瞭如何衡量核心網絡生命值、如何確定您的修復是否達到了預期效果，以及如何在 Google Search Console 中監控結果。

• 我最近發現的三個前端審計工具

  • 斯蒂芬·朱迪斯
  • 本文介紹了三種鮮為人知的工具，用於發現 Web 應用程序中的性能問題。

• Google 不再需要 AMP，但替代品可能會更糟

  • 斯科特·吉爾伯森
  • 本文認為，儘管轉向 Core Web Vitals 是朝著正確方向邁出的一步，但這也意味著 Google 獨自決定了“出色的頁面體驗”意味著什麼，並且它的壟斷地位正被用來迫使其餘的網絡做它想做的事。黑客新聞討論。

WebAssembly (10)

WebAssembly 仍然是一項相對較新的技術，W3C 於 2018 年發布了最終的規範草案。開發人員對這項技術感到好奇，尤其是關於它將如何影響 Web 開發、生態系統的當前狀態以及 Web 之外的應用領域開發者。

• 2021 年 WebAssembly 的狀態

  • 科林·埃伯哈特
  • 這篇博文分享了從 2021 年 6 月進行的第一次 WebAssembly 狀態調查中獲得的見解。它提供了有關最常用和最受歡迎的 WebAssembly 語言的數據、WebAssembly 預計會產生重大影響的領域以及哪些方面在不久的將來最需要關注以提高采用率。

• WebAssembly 是神奇的性能嗎？

  • 達斯蘇瑪
  • 在作者看來，WebAssembly 與很多人的性能密切相關。但這是否意味著 WebAssembly 總是比 JavaScript 快？作者是 Google 的一名網絡倡導者，他執行了幾項測試，將 JavaScript 與由 AssemblyScript（以及 Rust 和 C++）在 V8 上生成的 WebAssembly 二進製文件的性能進行了比較，得出了一些有趣的結果。關於 Hacker News 和 Reddit 的討論

• 讓 JavaScript 在 WebAssembly 上快速運行

  • 林克拉克
  • 在本文中，作者建立了一些在 WebAssembly 中運行 JavaScript 的用例，為什麼當前這樣做的方法很慢，以及可以做些什麼。本文中討論的技術也可以應用於其他動態語言，例如 Python、Ruby 或 Lua，以使它們在 WebAssembly 中運行。黑客新聞討論。

• 使用來自 WebAssembly 的異步 Web API

  • 英格瓦·斯捷潘尼安
  • 網絡上的 I/O API 是異步的，但在大多數係統語言中它們是同步的。在將代碼編譯到 WebAssembly 時，您需要將一種 API 連接到另一種 API——而這種連接就是 Asyncify。在這篇文章中，您將了解何時以及如何使用 Asyncify，以及它是如何工作的。黑客新聞討論。

• 面向 JavaScript 開發人員的 WebAssembly 簡介

  • 帕斯卡帕雷斯
  • 本文是對 JavaScript WebAssembly 接口的介紹。它展示了 JavaScript 代碼如何與 WebAssembly 模塊交互，對於那些想了解包裝器（例如由 emscripten 生成的包裝器）的實現的人來說，它也會很有趣。

更快的構建工具 (8)

使用 Rust/Go 編寫 JavaScript 工具的趨勢仍在繼續。

• 比較新一代構建工具

  • 休·霍沃斯
  • 本文討論了 Vite、Esbuild、Snowpack 等較新構建工具的價值主張，通過比較它們的用例和常見功能來幫助讀者決定在項目中採用哪種工具。關於 Hacker News 和 Reddit 的討論。

• 包裹2 beta 3

  • 包裹團隊
  • Parcel 團隊發布了 Parcel 的 beta 3，這是一個 webpack 替代品。此版本包括對他們在 Rust 中的 JavaScript 編譯器的徹底重寫，這將整體構建性能提高了 10 倍。在這里和這裡討論 Hacker News 和 Reddit。

• 宣布 Rome Tools, Inc.

  • 塞巴斯蒂安·麥肯齊
  • Babel 的創建者正在構建一個名為 Rome 的新工具，旨在將 Babel、ESLint、webpack、Prettier、Jest 等工具整合到一個 CLI 中。他們在本季度籌集了第一輪種子資金。關於 Hacker News 和 Reddit 的討論。

• 從 Parcel 遷移到 Snowpack

  • 本·弗蘭
  • 作者討論了他從 Parcel (v1) 切換到 Snowpack 的原因，以及在選擇其中一種之前需要注意的差異。

• 為什麼我們從 Webpack 切換到 Vite

  • 謝爾蓋·切斯塔科夫
  • 這篇文章討論了 Replit 從 Webpack 切換到 Vite 的決定。黑客新聞的討論可能比文章本身更有趣。

突出內容

• 我們如何在 GitHub 上使用 Web 組件

  • 克里斯蒂安·奧德森
  • GitHub 團隊詳細介紹了他們如何在其前端代碼庫中使用 Web 組件，以提供獨立、隔離和可重用的代碼片段，從而使他們的團隊能夠快速高效地交付高保真 UI，同時仍保持其高標準的質量。黑客新聞討論。

• 2021 年網絡工作者的狀態

  • 達斯蘇瑪
  • 網絡是單線程的。這使得編寫流暢且響應迅速的應用程序變得越來越困難。工人的名聲不好，但在任何 Web 開發人員的工具帶中都可以成為解決此類問題的重要且有用的工具。本文將幫助您快速了解 Workers on the Web！

• WebContainers 簡介：在瀏覽器中本地運行 Node.js

  • 埃里克·西蒙斯
  • StackBlitz 的 WebContainers 允許您創建全棧 Node.js 環境，該環境可在幾毫秒內啟動並立即在線和鏈接共享 — 只需單擊一下即可。該環境加載了 VS Code 強大的編輯體驗、完整的終端、npm 等。它也通過 WebAssembly 完全在瀏覽器內部運行，儘管它目前僅限於 Chromium 瀏覽器。關於 Hacker News 和 Reddit 的討論。

• 緩慢而穩定：將 Sentry 的整個前端轉換為 TypeScript

  • 普莉希拉·奧利維拉和馬克的故事
  • Sentry 最近將 100% 的前端 React 代碼庫從 JavaScript 轉換為 TypeScript。這項為期一年的工作涉及工程團隊的十幾名成員、1,100 個文件和 95,000 行代碼。在這篇博文中，他們分享了他們的流程、技術、挑戰，以及最終他們在此過程中學到的東西。

• React 狀態模式的現代指南

  • 弗雷德里克·斯特蘭德·奧斯伯格
  • 在某個階段，您基本上可以只說“使用 Redux”，但現在有很多選擇，本指南簡要介紹了幾種在 React 中處理複雜狀態的方法。