前端食堂技術週刊第 42 期:Vue 2.7 Beta、TS 4.8 Beta、React 開源獎、ECMAScript 2022

語言: CN / TW / HK

theme: fancy highlight: github-gist


美味值:🌟🌟🌟🌟🌟

口味:青橘伏特加

PC 端在倉庫裡看體驗更好,順手賞個 Star 是對食堂最大的支援。

本期摘要

  • Vue 2.7 Beta
  • TypeScript 4.8 Beta
  • React 開源獎
  • JavaScript 開源獎
  • Umi 4 釋出
  • 5 月登陸瀏覽器的 API
  • Component party 9 大框架的語法和特性概覽
  • Ecma International 批准的新標準
  • Git Command Explorer
  • Jiffy Reader

大家好,我是童歐巴。歡迎來到本期的前端食堂技術週刊,我們先來看下上週的技術資訊。

技術資訊

  1. Vue 2.7 Beta

為了讓還在使用 Vue2 的使用者享受到 Vue3 的好處,Vue3 中的一些重要特性將會向後移植到 Vue2.7:

  • Composition API
  • SFC <script setup>
  • SFC CSS v-bind

向後移植的功能不僅是上面幾點,還包括其他的 API 和內容(API 暴露注意事項、與 Vue3 的行為差異、Beta 採用指南等),可以前往連結檢視。

2.7 穩定版計劃於 2022 年 6 月底左右釋出,截止本期週刊撰稿時,Vue 團隊宣佈 2.7 穩定版將於下週釋出。一旦 2.7 穩定版釋出,Vue2 將不再接收新功能,並將進入持續 18 個月的 LTS(長期支援),這意味著 Vue2 將在 2023 年底結束生命週期。

  1. TypeScript 4.8 Beta

主要更新如下:

  • --strictNullChecks 下帶來一系列正確性和一致性的改進
  • 改進 infer 在模板字串型別中的型別推斷
  • --build、--watch、--incremental 效能優化
  • 比較物件和陣列字面量時的錯誤
  • 改進 Binding Patterns 推斷
  • 修復檔案監聽
  • Find-All-References 效能改進

Breaking Changes

  • lib.d.ts 更新
  • 不受約束的泛型不再可分配給 {}
  • 無法在 JavaScript 檔案中匯入/匯出型別
  • Binding Patterns 不再改變函式呼叫中的推斷結果的型別

  • React 開源獎

GitNation 基金會於 2022 年 6 月 17 日頒佈了 React 的 Open Source Awards。

年度最佳創新突破獎

  • jotai:原始且靈活的 React 狀態管理庫。
  • Remix:一個將 90 年代 Web 簡單的心智模型與現代平臺功能相結合的元框架,實現首屈一指的 UX 和 DX。
  • refine:一個基於 React 的框架,用於快速構建內部工具。
  • wagmi:以太坊的 React Hooks。
  • Preview.js:在 IDE 中實時預覽 React、Solid 和 Vue 元件。

最激動人心的技術應用

  • Remotion:用 React 製作影片。
  • React Flow:一個高度可定製的 React 元件,用於構建互動式圖形和基於節點的編輯器。
  • react-native-tvos:Fork 自 React Native,額外支援 Apple TV 和 Android TV。
  • React Unity WebGL:為 Unity WebGL 構建嵌入 React 應用程式提供了一種現代解決方案,同時為 Unity 和 React 之間的雙向通訊和互動提供了高階 API。
  • Jest Preview:在瀏覽器中預覽 Jest 測試,並幫助你輕鬆的除錯。

年度趣味專案

  • Cuberun:使用 react-three-fiber 構建的合成波無限跑酷遊戲。
  • Tetromino:使用 React、Redux 和 Tailwind 構建的俄羅斯方塊遊戲。
  • Corona Game:使用 react-three-fiber 構建的 3d 遊戲。
  • Heart Switch:React 的心形切換開關元件。
  • LBA2 Remake:用 TypeScript、Three.js 和 React 實現 A Little Big Adventure 2。

對社群最有影響力的貢獻專案

  • ReactJSGirls:React 愛好者聚會,女性登臺分享她們的學習和經驗。
  • React Newsletter:React 週刊。
  • React Native Radio:播客,一起探索 React Native。
  • Poimandres:一個開源開發者團隊,主要維護和支援 React Spring、React Three Fiber 及其生態系統。
  • Reactiflux:一個由 170,000 多名 React 開發人員組成的聊天社群。

生產力助推器

  • Mantine:一個功能齊全的 React 元件庫。
  • React Use:React Hooks 工具包。
  • Superplate:具有超能力的前端模版庫,提供 30 多個外掛,支援 React 和 Next.js。
  • React Uploady:基於 React Hook 的上傳元件。
  • React Virtual:在 JS/TS、React、Solid、Vue 和 Svelte 中實現虛擬化滾動元素的無頭 UI 。

  • JavaScript 開源獎

GitNation 基金會於 2022 年 6 月 16 日頒佈了 JavaScript Open Source Award。

年度最佳創新突破獎

  • Hoppscotch:開源的 API 開發生態系統。
  • Solid:用於構建使用者介面的宣告式、高效且靈活的 JavaScript 庫。
  • Web3.js:以太坊 JavaScript API。

最激動人心的技術應用

  • vanilla-extract:TypeScript 中的零執行時樣式表,CSS Modules in TypeScript。
  • tRPC:端到端的型別安全 API。
  • zx:用 JavaScript 編寫 Shell 指令碼。
  • Q.js:瀏覽器中的量子計算。
  • Tauri:使用 Web 前端構建更小、更快、更安全的桌面應用程式,底層引擎和後端繫結由 Rust 編寫。
  • Partytown:將資源密集型第三方指令碼從主執行緒轉移到 Web Worker 中。

年度趣味專案

  • Big Heads:自動生成頭像。
  • Ossart:將你的 GitHub activity 列印為藝術品。
  • Gaze Detection:在 JavaScript 中使用機器學習來檢測眼球運動並構建注視控制體驗。
  • Yoha:一個實用的手部跟蹤引擎。

對社群最有影響力的貢獻專案

  • pnpm:快速、節省磁碟空間的包管理器,精益求精。
  • Three.js journey:學習 Three.js 的最佳方式。
  • Devs for Ukraine:Devs For Ukraine 是一個免費的線上工程師會議,旨在籌集資金併為烏克蘭提供支援。
  • Medusa:開源 Shopify 替代品。
  • Bytes.dev:最佳 JavaScript Newsletter。

生產力助推器

  • Amplication:自動生成使用 TypeScript 和 Node.js 構建的後端應用程式,以及使用 React 構建的客戶端。
  • Zod:帶有靜態型別推斷的 TypeScript 優先模式驗證。
  • Hardhat:Hardhat 是一個用於編譯、部署、測試和除錯以太坊軟體的開發環境。
  • Omni:提高生產力的多合一瀏覽器外掛,提供瀏覽器選項卡、書籤、歷史記錄等管理功能。

  • Umi 4 釋出

新功能

  • 多構建引擎:支援 Vite 和 Webpack。
  • 預設快:MFSU V3 + Webpack 5 快取(解決 Dev 時編譯慢的問題)、Webpack 5 物理快取 + CD 平臺(解決 Build 時編譯慢的問題)、esbuild 作為 js 和 css 的壓縮器、jest 的 transformer 等等的環節提速。
  • Umi Max:內網 Bigfish 的外部版本。
  • React Router 6,路由層實現更優雅,不過有一些 Break Change。
  • 支援 Vue,由社群同學提供,只需裝載一個 preset 即可切換到 Vue。
  • 預設最快的 CSR 請求,避免 React 專案經典的 Render-Then-Fetch 的載入瀑布流問題。
  • 白盒穩定的 Lint,內建精挑細選的 lint 規則。
  • SSR,重寫 SSR 功能,此功能目前處於 beta 階段。
  • API 路由,打包成不同平臺支援的 Serverless Function 產物。
  • 微生成器,小型腳手架、控制功能的開啟與關閉、庫版本切換。

DX 改進

  • 自動 https(實現基於 mkcert)。
  • 瀏覽器裡的構建進度條。
  • Terminal 中的日誌。
  • umi.js 產物除錯。
  • 專案級外掛:plugin.ts(可以在專案級做很多事,比如 deadCode 檢測等)。
  • Umi UI 捲土重來(排查問題時,提供 Umi 框架的內部狀態作為開發輔助)。

  • 5 月登陸瀏覽器的 API

一些在 2022 年 5 月登陸穩定版和測試版瀏覽器的新功能。

穩定的瀏覽器

  • Chrome 102 和 Safari 15.5 包含 inert 屬性,一個全域性 HTML 屬性,使開發人員能夠從 tab 順序和可訪問性樹中移除一個元素,帶來更好的可訪問性。
  • Chrome 102 包含 hidden=until-found,可以在頁面中查詢並滾動到摺疊區域內的文字。
  • Chrome 102 釋出了 Navigation API,經典的 Histroy API 看起來很簡單,但是它的定義不是很明確,在極端情況和不同瀏覽器的實現方式方面存在 大量問題,Navigation API 是全新的實現。
  • Firefox 101 支援 Constructable Stylesheets,使 Shadow DOM 建立和分發可重用樣式變得更加容易。
  • Firefox 101 包含 prefers-contrast,該媒體功能用來檢測使用者是否請求以較低或者較高的對比度呈現頁面內容。

Beta 瀏覽器

  • Chrome 103 包含 Local Font Access API,允許訪問使用者本地安裝的字型。
  • Firefox 102 包含 update 媒體功能,用於查詢輸出裝置是否可以在內容渲染後修改其外觀。

下面我們來看技術資料。

技術資料

  1. Component party

九大前端框架語法和特性快速概覽。

  1. Ecma International 批准的新標準

第 123 屆 Ecma 大會批准了 ECMAScript 2022 語言規範,該規範是 ECMAScript 語言規範的第十三版,包括如下特性:

此外,還包括 ECMAScript 2022 國際化 API 規範C# 語言規範資料遷移方法

  1. Git Command Explorer

互動式 Git 命令探索器,可以離線訪問。根據你的輸入,幫你找到正確的 Git 命令,作者還實現了一個陣列方法探索器

  1. Jiffy Reader

最近很火的一個黑科技 Bionic Reading,通過將英文單詞的前幾個字母加粗,從而提升你的閱讀速度(高達 10 倍),這個瀏覽器外掛可以將文字渲染成 Bionic Reading,你覺得閱讀速度提升了嗎?

其他資訊

好文推薦

下面來看一下好文推薦,本週推薦的好文是:

  1. 維護內部 React 元件庫的注意事項

  2. 轉轉搭建 iconfont 平臺實踐

好了,以上就是本期的食堂週刊,觀眾老爺們如果覺得還不錯,一鍵三連是對食堂老闆最大的支援。

你的前端食堂,吃好每一頓飯,我們下期見。

❤️愛心三連擊

1.如果你覺得食堂酒菜還合胃口,就點個贊支援下吧,你的是我最大的動力。

2.關注公眾號前端食堂吃好每一頓飯!

3.點贊、評論、轉發 === 催更!

透明footer.png

「其他文章」