2023-第二十四週

該周報主要為各個地方內容的彙總整理

summary: ''
技術
工具
更新
- Introducing the Vercel AI SDK
其他
- Performance Doesn't Matter...Until It Does.
- 成為優秀工程師的八大法則

技術#

ESLint guide: how to use it with confidence #

ESLint 是一個靜態代碼分析工具，它可以隨著代碼編寫幫助維護和改進代碼的質量。
ESLint 允許團隊遵循在配置文件中記錄的規範，並使他們不必每次重新編碼和應用這些規範。
新的 ESLint 配置系統 Flat config 在項目中配置 ESLint 的方式提出了激烈的變革，並已在 CLI 中得到支持，並且從版本 8.23.0 開始提供了官方文檔。

本文是一系列文章的一部分，旨在解釋如何將 ESLint 配置作為外部依賴項共享以自動化代碼標準。它首先介紹了 ESLint 作為一個靜態代碼分析工具，通過基於規則自動形成意見並在規則被破壞時發出警告來幫助維護和改進代碼質量。該文章還回顧了 ESLint 配置對象的主要屬性，例如規則和覆蓋。然後介紹了名為 Flat config 的新的 ESLint 配置系統，它替換了遺留系統，並在項目中配置 ESLint 提出了激烈的變革。文章最後總結了系列計劃，其中包括掌握 ESLint，遷移到 flat config，創建 ESLint 可共享配置，並改進體驗以獲取更多工具的支持。

Is React Having An Angular.js Moment?#

React 伺服器端組件（React Server Components）對 React 開發引入了重大變化，需要重新學習從數據獲取到樣式等所有內容。
現有的 React 第三方庫不適用於伺服器端組件，開發者需要手動編碼或等待庫作者修改。
React 伺服器端組件破壞了當前 React 生態系統的優勢，使得沒有 UI 工具包、表單框架、API 客戶端和 SaaS 集成等工具十分困難。

React 伺服器端組件是由 React 和 Next.js 團隊推廣的一種構建 Web 應用程序的新方法。它涉及到 React 應用程序構建方式的重大變化，並需要重新學習。例如，數據獲取現在依賴於異步組件內的 fetch 方法，而常規的 React hooks 在伺服器端組件中會導致錯誤。此外，CSS-in-JS 與伺服器端組件不兼容，調試也非常具有挑戰性。React 伺服器端組件還破壞了幾乎所有現有的 React 第三方庫。這是一項重大變革，破壞了現有的 React 生態系統，開發者可能需要手動編寫許多代碼。

Thoughts on React vs Vue vs Everything Else in 2023 #

建議為了專業目的學習 React 和 Next.js，它們是當前業界最廣泛使用的前端平台。
前端開發的狀態非常複雜且資源密集，甚至難以在沒有整個工具鏈的情況下構建簡單的交互。
對於個人發展和副業項目而言，Vue 可能更可取，因為它易於使用且更難被誤用。

文章討論了前端框架和平台的狀態，並為初學者提供了選擇學習哪個的建議。作者指出，React + Next.js 是專業人士的首選平台，但 Vue 對於個人項目也是不錯的選擇。作者還表達了對現代前端開發複雜性和資源使用的沮喪之情。他們建議學習 TypeScript 並在 React 代碼中保持性能警覺。文章以對 React 和 Vue 的渲染週期討論作為結論。

Isomorphic Development #

等同開發 (isomorphic development) 涉及編寫可在伺服器和客戶端環境中安全高效運行的代碼，並不一定更容易讓前端開發人員完成。
對於全棧開發人員來說，代碼被拆分在前端和後端之間，他們必須在兩個獨立的調試環境中平衡，並防止數據洩漏和安全漏洞。
全棧開發人員還必須關注客戶端和伺服器之間的性能差異，以及主數據庫性能、查詢優化和索引等問題。

文章討論了等同開發的挑戰，其中代碼在伺服器和客戶端環境中運行。作者認為這種範式轉換並不一定使開發更容易，而是引入了與調試、安全、性能和數據查詢相關的新複雜性。作者還指出，當前的開發工具並沒有完全配備處理這些挑戰的能力，開發人員需要獲取新的知識和技能才能在這種環境下有效地工作。作者建議使用一個新詞彙 "等同開發"，來描述這種方法。

Vite 是如何兼容舊版本瀏覽器的 #

Vite 使用 @vitejs/plugin-legacy 來通過生成使用 babel 轉譯代碼的舊文件來支持舊版瀏覽器。
index.html 文件包括腳本，根據__vite_is_modern_browser 變量動態加載舊代碼。
在腳本標記中使用 type="module" 和 nomodule 屬性可根據瀏覽器對模塊加載和 ES6 語法的支持選擇性地執行代碼。

本文討論如何使用 @vitejs/plugin-legacy 插件使 Vite 與舊版瀏覽器兼容。該插件使用 babel 為每個文件生成舊版文件來生成兼容代碼。文章解釋了在 index.html 文件中的代碼，該文件創建一個帶有 "type=module" 屬性的腳本標記來導入主腳本文件。它還創建了一個腳本標記來加載 polyfills-legacy 文件和 index-legacy 文件，以兼容舊版瀏覽器。文章指出，如果瀏覽器支持模塊但不支持最新語法，則插件可能存在潛在的錯誤。

How We Sped Up Search Latency with Server-sent Events in Express.js #

通過使用伺服器推送事件（Server-sent Events，SSE）在稀疏查詢中傳輸搜索結果可以改善用戶體驗，而無需更改身份驗證或請求狀態。
SSE 事件可以包括事件和數據等字段，並使用 \n\n 進行分隔。
在客戶端上使用 React 集成 SSE 可能會有些棘手，但可以通過在 EventSource 周圍創建自定義包裝器來實現。

該文章討論了在 HyperDX 平台上實現伺服器推送事件（SSE）以流式傳輸搜索結果的實現。由於其簡單性和與 HTTP 的兼容性，選擇了 SSE 而不是 Websockets。文章提供了如何將 SSE 添加到 Express.js 路由以及如何格式化 SSE 事件的示例。文章還討論了使用 EventSource 從客戶端進行查詢，並提供了實施的建議。作者建議在實現 SSE 時考慮應用程序特定和 React 特定的功能，並願意根據反饋撰寫後續文章。

Hydration is a tree, Resumability is a map #

水合（Hydration）是一種算法，它通過在瀏覽器中執行樹中的每個組件，恢復在序列化為 HTML 時丟失的狀態和事件處理程序，使得單頁應用（SPA）框架能夠在瀏覽器中實現互動。
部分水合（Partial hydration）通過創建 “互動島嶼” 減輕了瀏覽器的工作量，但會創建邊界，可能阻礙應用程序不同部分之間的通信。
可恢復性（Resumability）是一種不同的算法，將事件處理程序放置在根部，將所有組件視為靜態，並消除了水合或遍歷組件的需要。

該文章討論了在 Web 應用程序中添加互動性的不同方法，特別關注了水合和可恢復性的概念。水合涉及從根部重新執行整個應用程序，以恢復在序列化為 HTML 時丟失的狀態和事件處理程序，而可恢復性將事件處理程序視為根部，不需要下載和執行所有互動組件。部分水合和 React Server Components 是水合的不同變體，提供了不同的權衡，而可恢復性則是一種根本不同的算法。開發人員可以選擇最適合其需求的方法。

移動端 H5 頁面在不同 Android 和 iOS 設備上的兼容適配 #

本文討論了移動互聯網時代中，H5 頁面在移動應用程序開發中的重要性，並探討了在不同手機型號、操作系統版本和瀏覽器內核環境下的兼容性問題。文中重點介紹了移動端 H5 頁面兼容適配的重要性，以及在 Android 和 iOS 設備上的兼容適配實踐。針對不同分辨率的屏幕和 WebView 的差異，提供了相應的處理方法和代碼示例。此外，還提到了處理移動設備默認字體大小、Safari 瀏覽器中的問題以及常見的兼容性 Bug 及解決方案。通過合理的兼容適配方案，可以提高移動應用程序的兼容性和用戶體驗。

Behind the block()#

在 Million.js 中使用 block () 函數可以通過在 React 組件內部使用 Million.js 來實現超優化的渲染速度。
編譯器可以從 React 組件中提取出狀態並將其轉換為 Million.js 可以理解的 prop，繞過運行時實現的限制。
通過在組件之間使用不同的渲染方法，我們可以充分利用兩者的優點，選擇適合特定任務的正確工具。

這篇文章解釋了如何將 Million.js 中的塊作為 React 中的高階組件（HOC）使用，這些組件在渲染速度上進行了超優化。作者解釋了 block () 函數的工作原理，如何實現它以及如何使用編譯器從嵌套組件中提取狀態。文章指出，使用這種方法可能意味著性能不再是遷移的權衡，並且類似的概念已經在 “島嶼架構” 中使用過。文章最後感謝 Ryan Carniato 創建了一個概念驗證，這概念驗證啟發了本文。

Designing a Scalable Backend in Node.js #

本文討論了一個虛構的 Node.js 後端系統中的三個擴展挑戰，該系統對用戶交易進行分類，以幫助個人預算管理。第一個挑戰涉及用戶登錄時出現的問題，登錄時間長且在工作日下午 3 點至 4 點經常失敗。文章建議監控 CPU、內存和 IOPs 等關鍵資源，以診斷擴展問題的根本原因，並消除瓶頸和故障點。第二個挑戰是處理突發工作負載，其中數據庫負載的峰值源於系統外部。文章建議使用隊列來平滑峰值並控制吞吐量。第三個挑戰涉及優化數據庫查詢以提高性能和可擴展性。

監控關鍵資源，如 CPU 和內存消耗以及數據庫指標，對於診斷後端系統的擴展問題非常重要。
慢查詢監控可以幫助識別系統中的故障點並減輕瓶頸。
在面對突發工作負載時，使用隊列可以平滑峰值並控制吞吐量。

RSC From Scratch. Part 1: Server Components #

從 0 開始探索 RSC

工具#

traf #

在 monorepos 中找到真正受影響的包

usellm #

在你的 React 應用中使用大型語言模型

monolith #

⬛️ 用於將完整網頁保存為單個 HTML 文件的 CLI 工具

tinylibs - ts-writer #

TS Writer 是一個 1.5Kb 的模板字符串模板引擎，指定用於在運行時生成代碼

queue #

並發可調的異步函數隊列

framed #

用於項目管理的 CLI 工具

mods #

一個在命令行和管道中使用 AI 的簡單工具，支持 OpenAI 和 LocalAI

react-spreadsheet-import #

具有自動列匹配和驗證功能的 Excel (.xlsx) 和 CSV 文件的導入流程

highlight #

highlight.io：開源的全棧監控平台。錯誤監控、會話重播、日誌記錄等

sd-webui-txt-img-to-3d-model #

sd-webui 的自定義擴展，允許您基於 OpenAI Shap-E 從 txt 或圖像生成 3D 模型

更新#

Introducing the Vercel AI SDK #

Vercel AI SDK 是一個開源庫，旨在幫助開發人員使用 JavaScript 和 TypeScript 構建對話式、流式和聊天用戶界面。該 SDK 支持 React/Next.js、Svelte/SvelteKit，並即將支持 Nuxt/Vue。Vercel 的 AI SDK 支持互操作性，並提供對 OpenAI、LangChain 和 Hugging Face Inference 的一流支持。該公司還推出了 Chat & Prompt Playground，開發人員可以實時比較各種語言模型的結果，並生成 Next.js、Svelte 和 Node.js 代碼。

Vercel 推出了新工具，旨在改進其平台上的人工智能體驗，包括 Vercel AI SDK 和 Chat & Prompt Playground。
Vercel AI SDK 是一個開源庫，旨在幫助開發人員使用 JavaScript 和 TypeScript 構建對話式、流式和聊天用戶界面。
該 SDK 支持 React/Next.js、Svelte/SvelteKit，並即將支持 Nuxt/Vue，還提供對 OpenAI、LangChain 和 Hugging Face Inference 的一流支持。

其他#

Performance Doesn't Matter...Until It Does.#

性能很重要，但並不是所有公司都需要高性能的技術和框架。在構建應用程序時，最重要的是解決用戶的問題。隨著用戶數量的增加，新功能的需求會減少，穩定性和迭代速度變得更加重要。每個公司和項目都應該考慮長期的特性增量和迭代，定義一個合適的轉換點。

穩定性和迭代速度在用戶數量增加時變得更加重要。
每個公司和項目都應該考慮長期的特性增量和迭代，定義一個合適的轉換點。
技術選擇應該根據項目的不確定性和需求來進行。

這個世界日以繼夜、竭盡全力讓你成為其他人，如果你想做你自己，就意味著要打一場最艱難的仗。

-- E・E・卡明斯（E. E. Cummings），20 世紀美國著名詩人

人們依靠機器，希望這能帶給他們更多自由，但這只會讓擁有機器的人奴役他們。

-- 弗蘭克・赫伯特，科幻小說《沙丘》的作者