前端週刊第二十九期

2022-07-24 12:00:08

前端週刊發表每週前端技術相關的大事件、文章教學、一些框架的版本更新、以及程式碼和工具。每週定期發表,歡迎大家關注、轉載。
如果外連不能存取,關注公眾號前端每週看,裡面有解決辦法

大事件

  • RedwoodJS vs. Blitz.js:全棧元框架的未來—— 對這兩個框架進行了相當長的回顧。Redwood 是一個固執己見的基於 React 的框架,主要圍繞 GraphQL 伺服器作為應用程式核心的「一個 API」的想法。另一方面,Blitz 是 Next.js 之上的受 Ruby on Rails 啟發的層,具有 SPA、伺服器端渲染和靜態站點生成功能。

  • 開發人員面臨的 10 個常見 JavaScript 問題——如果你已經使用 JavaScript 多年(可能是從 2014 年首次撰寫這篇新更新的文章以來),那麼這些是你(可能)已經知道如何解決的坑,但是還有很多否則在這裡咀嚼。

  • 將大型 JavaScript SDK 包的大小減少 29%——在對他們的 JavaScript 包的大小進行了一些評論之後,Sentry(應用程式監控服務)的開發人員開始努力爭取最初減少 30%。事實證明,treeshaking效果最大。

  • Payload 1.0:基於節點構建的無頭 CMS 平臺——一個令人興奮的專案,於 2021 年初出現,並在幾個月前成為開源專案。如果您需要一個無頭 CMS,包括可客製化的基於 React 的管理系統、GraphQL或REST API、靈活的身份驗證和檔案上傳系統,並且它很容易上手,那麼Payload有很多優點。

文章

  1. 關於 JavaScript 中整數數學的思考 — 這裡沒有具體的例子,但如果你需要快速整數數學,你可以做的比建立在 James 的思想上更糟糕(他希望寫一個更完整的後續文章)。

  2. JavaScript 混淆技術範例 — 我認為圍繞這篇文章的Hacker News 討論可能更有趣。

  3. JavaScript AST Manipulation with Babel: The First Steps — 來自與混淆專案(上圖)相同的作者,介紹了使用 Babel 將混淆程式碼轉換為語法樹,然後再轉換為更具可讀性的 JavaScript 的基礎知識。

  4. 80 分鐘介紹 SvelteKit — Svelte是一種越來越流行的構建反應式前端應用程式的方式,Svelte Kit提供了一個框架和更完整的 Svelte 開發體驗。

  5. Blazingly Fast 'React' with Fresh — 最受歡迎的 React YouTube 使用者之一前往 Deno-side 檢視Fresh ,這是一個新的基於島嶼的 Web 框架,它本身不使用 React ,但......足夠接近,使用 Preact和用於渲染和模板的 JSX。

框架釋出

  1. NeutralinoJS 4.7.0 – 帶有 JS 和 HTML 的輕量級跨平臺應用程式。
  2. npm-check 6.0 – 檢查過時或未使用的依賴項。
  3. Fastify 4.3 – 快速的 Node.js Web 框架。
  4. ESLint 8.20
  5. Angular 14.1
  6. Vue 2.7.8
  7. PrimeNG 14 – 80 多個 Angular UI 元件套件。
  8. Acorn 8.8 – 用純 JS 編寫的微型 JS 解析器。
  9. Discord.ts 10.0 – 建立 Discord 聊天機器人的框架。
  10. Prisma 4.1 – 適用於 Node.js 和 TypeScript 的流行 ORM。
  11. MelonJS 13.0 – 基於 2D sprite 的 JS 遊戲引擎。
  12. Secure Electron Template 20.0 – 一個電子樣板應用程式。
  13. zip.js 2.6.2 – 在瀏覽器或 Deno 中壓縮和解壓縮檔案。
  14. Octokit.js 2.0.4 – 用於瀏覽器、Node 和 Deno 的 GitHub SDK。

程式碼和工具

  1. Tweakpane 3.1:用於調整引數和檢視值更改的緊湊 UI 元素: 這是您在創意編碼演示中經常看到的那種東西您可以建立自己的基本 UI 控制元件迷你窗格,以動態調整(或僅反映)與頁面上正在發生的事情相關的值。它很簡單而且看起來很棒,如果你想要一個演示,那麼……

  2. Fireworks.js 2.0:從字面上看是為您的網頁設計的 Fireworks:嗯,至少在視覺上是這樣的 ;-) 主頁是一個簡潔的演示,因為您可以動態地使用庫的所有引數。

  3. https://superstate.dev/:甚至如此微型,以至於入門教學都需要 30 秒才能閱讀。

  4. TanStack Table v8: Headless UI for Building Tables and Datagrids:想要管理表格或資料網格元素的繁重工作,但想要保持對標記和樣式的 100% 控制?這就是您所需要的(如果「無頭 UI」的想法對您來說是新的,請閱讀此介紹)。Vanilla JS、React、Vue、Solid 和 Svelte 開發人員都得到了照顧。

  5. Atropos:建立觸控友好的 3D 視差懸停效果:與普通 JS、React 或 Vue 一起使用,並且無需依賴即可輕鬆設定。主頁包含一些非常引人注目的範例,這些範例並不像您所期望的那麼重要。