Jing Tech 前端技術週報 #14

⚛

Hi！這裡是 Jing Tech 前端技術週報！除了 Substack 電子報外，也可以在筆者的部落格 jing-tech.me 與 instagram: jing.tech 關注前端大小事！

本週熱點與選讀

文章

1. Josh Comeau | Snappy UI Optimization with useDeferredValue

   useDeferredValue 是 React 17 中所新增的 Hook，允許開發者將 UI 進行優先分級，讓 React 在渲染的時後會去延遲對低優先級區域的渲染，直到高優先級渲染工作完成後再去更新。Josh 這篇文章寫得淺顯易懂，非常推薦閱讀。

2. Marvin | Speeding up the JavaScript ecosystem - Server Side JSX

   我們都知道 JSX 是 React 對 JS 語法的擴充，其在瀏覽器是無法直接運行的，必須透過轉譯器將它轉換成 JS，而作者透過 Template literals 的方式有效提升伺服器端的 JSX 轉換成 JS 的速度，主要是避免了 JSX 轉譯器在編譯過程中會為每個 JSX 區塊建立短期物件，這會消耗過多的記憶體並導致垃圾回收機制頻繁暫停，效能就會隨著 JSX 區塊越多而顯著遞減。儘管這無法組件只能用在 HTML，但對整體的效能只會增快不會減少，非常值得一讀。

3. Build Your Own React.js in 400 Lines of Code

   作者用 400 行程式碼實作 React 中渲染與更新的功能，推薦給想要知道 JSX 如何渲染到 DOM、如何觸發再次渲染（例如使用 useState）以及 React Hook 如何運作的讀者。也推薦相關的經典著作 Swyx 在 React Hooks 發佈不久後就做過一個入門級的實作 以及 偏進階但閱讀體驗非常好的 Rodrigo Pombo | Build your own react。

4. Design Docs at Google

   Design Docs 是開發週期中非常重要的一環，這篇文章提到了設計文件應該要有的內容、什麼時候需要寫它以及其生命週期。

5. Artem | Why Patching Globals Is Harmful

   MSW 創建者 Artem 近期發佈了文章批評一些主要框架和運行時，像是React、Next.js 以及 Bun，在全局 API (e.g. fetch) 上添加自定義功能的做法是有害的 Anti-Pattern，其會造成維護上的困難、提升不可預測性、阻礙學習、框架鎖定以及傷害語言本身的發展。

Videos

1. OpenAI | Introducing GPT-4o

2. React Compiler: In-Depth Beyond React Conf 2024

   深入淺出的 React Compiler 介紹影片，透過簡單到複雜的範例講解了編譯後的程式碼。其內容類似於先前週報分享 React 核心團隊成員 Sathya Gunasekaran | Compiler Theory and Reactivity 的文章。

3. [React Conf] Forget About Memo

   React Compiler 能夠自動 memorize 組件，甚至比開發者手動添加 memo 來優化組件更好。編譯器會自動分析和優化組件的依賴項，確保組件只在需要時重新渲染。

4. [React Conf] React For Two Computer

   Dan 這次的演講關於 React Server Component 以及 Client Component 之間的關係，與他先前的部落格文章 The Two Reacts 是類似，也就是當我們今天不再透過 fetch API 去取得要呈現的資料，而是將整個組件搬到 Server 上，並使用 use client 標示哪些程式應該在客戶端執行。而這種方法，Server 可以生成初始 HTML 並嵌入所需的數據，而 Client 在加載時可以接續 Server 未完成的動作，從嵌入的 JSON 數據中讀取資料。由於時間的限制 Dan 並沒有仔細說明這中間到底是如何轉換的，但想知道的讀者接續看 Dan 在去年寫的文章 RSC From Scratch. Part 1: Server Components 就可以把整個脈絡串起來。

Hightlights

1. HTML 2023

   HTML 2023 的調查結果也在這週發布了，統計顯示許多開發者希望擁有更多互動性和可客製化的 HTML 元素 (像是現有的 Dialog, Popover 與 View Transition API)。

2. Web API: Popover API

   原生支援的 Popover API 終於被各大瀏覽器支援，MDN 也有實作一系列的範例。

3. Web Platform Status Dashborad

   Google 在本週開發者大會上雖然都聚焦在 AI，但也釋出關於 Web 的一系列更新，其中他們開發了 Web API Status 儀表板 [影片連結]，讓開發者可以查詢 API 在各大瀏覽器的支援度，但與 Can I Use 與 MDN 不同的是其搜尋結果是已集中化的方式呈現，並且加入了 Baseline Newly Available 和 Baseline Widely Available 可以快速知道該 API 是否能夠安全地使用。

4. Apple announces new accessibility features

   Apple 在本週也有一些對於無障礙功能更新，其中最令人印象深刻的就是用眼睛去操控 iPhone 與 iPad 的功能。

Podcast

1. devtools.fm | Ryan Dahl - Node, Deno and JSR

   Deno 以及 Node.js 的作者 Ryan Dahl 談了對於 Deno 以及 JSR 的近況與未來展望，推薦給對 Deno 與 JSR 有興趣的讀者。

---

本期內容就更新到這裡，感謝大家的閱讀，如果有任何問題或想法歡迎一起討論，也歡迎分享給更多人知道！你的每一份支持，都是我持續創作的動力！更多關於我的創作可以點擊這裡。

Happy Coding!