前端技術觀察第12期 – 2020 年 Node.js 將會有哪些新功能

• 2020 年 1 月 2 日
• 筆記

《前端技術觀察》是由字節跳動 IES 前端團隊收集、整理、推薦的業界高品質前端資源合集，主要分為以下幾個板塊：

• Highlights – 業界最新的技術、熱點文章 – 業界對（新）技術的深度地、優秀地實踐
  • 《前端技術觀察》的目的是讓大家：
  • 好的教程、深度解讀已有技術的文章
  • Tutorial
  • Tools And Codes – 優秀的工具、庫
• 更及時的了解到業界最新的技術
  • 受益於高品質的教程、文章
  • 了解業界更優秀的程式碼、工具
  • 更多地、氛圍更濃厚地討論、研究、落地技術

highlights

前端領域在 2019 都發生了什麼[1]

回顧這一年的重大事件、新聞和當前前端開發領域最流行的那些事物~

https://levelup.gitconnected.com/a-recap-of-frontend-development-in-2019-1e7d07966d6c

2020 年 Node.js 將會有哪些新功能[2]

2019 年是 Node.js 誕生的第 10 個年頭，npm 上可用的包數量超過了 100 萬。Node.js 社區仍在蓬勃發展，即便是到了 2020 年仍然沒有放緩的跡象。

https://juejin.im/post/5df7007b518825122c4ca882

如何提升低端設備的 Web 性能？試試自適應載入模式[3]

任何用戶都可能有過運行緩慢的體驗。這個世界的設備千差萬別，「一種規格」走天下的體驗可能並不是哪裡都行得通。一些網站滿足了使用高端設備的用戶，但在低端設備上卻可能卡得沒法用。特別是在普通的移動設備和桌面硬體，以及新興市場的主流設備上尤為明顯。

https://www.infoq.cn/article/cIQV4pJkHL3xsK0r7VtP

深入淺出 Serverless：優勢、意義與應用

Serverless 是炙手可熱的技術，被認為是雲計算髮展的未來方向。尤其是在前端研發領域，使用 Node 開發雲函數，可以讓前端工程師更加專註於業務邏輯，實現全棧工程師的角色轉變。

https://mp.weixin.qq.com/s/geT7x5RG4xhD-Ro1eZvrdg

你真的了解 React 生命周期嗎[4]

對比了新舊的生命周期，梳理了一些常見問題

https://juejin.im/post/5df648836fb9a016526eba01

看不見的 CSS-in-JS 性能消耗[5]

CSS-in-JS 在現代的前端頁面開發中越來越受歡迎，因為它提供了類 JS 方案去書寫樣式。這篇文章討論了相關書寫導致的性能問題，我們可以在日常開發中，酌情適當使用 CSS-in-JS。

The unseen performance costs of modern CSS-in-JS libraries in React apps

11 個開發者應該了解的命令行指令[6]

相比於點擊 GUI 操作電腦，命令行使我們的開發更為簡單便捷。本篇文章介紹了 11 個日常開發中會經常使用的指令，大家可以立馬學習上手用在實際工作中~

https://medium.com/better-programming/here-are-11-console-commands-every-developer-should-know-54e348ef22fa

WICG 引入了展現鎖定，實現更快的 Web 渲染[8]

Web 孵化社區群組（Web Incubator Community Group，WICG）最近引入了展現鎖定（Display Locking）提案，該提案可以輕鬆提高瀏覽器頁面內容量並對渲染進行控制。

https://www.infoq.cn/article/C3X8UFi7pXM5Ss9WXyy1

新創立的位元組碼聯盟宣布 WebAssembly 微進程提案，旨在安全使用非信任模組[9]

來自 Mozilla 的 Lin Clark 最近宣布創立位元組碼聯盟（Bytecode Alliance）。位元組碼聯盟提出了微進程（nanoprocess），為運行第三方 Wasm 包提供了隔離和安全性。

https://www.infoq.cn/article/LODHgj9UIdEPTspevYov

tutorial

Node.js 在攜程的落地和最佳實踐[10]

本文主要介紹在攜程，Node.js 技術棧是如何從 0 到 1 進行技術落地的，以及在不斷磨合的過程中，總結出來的最佳實踐。

https://www.infoq.cn/article/3sDgGFdAGQFH2vPgMKUd

Airbnb：我們如何將大部分 API 遷移到 GraphQL[11]

Airbnb 已經成功地將其大部分 API 遷移到了 GraphQL ，從而縮短了頁面載入時間並提供了更直觀的用戶體驗。

https://www.infoq.cn/article/WaZ5OMwZ16o86uGv7p2z

高品質前端快照方案：來自頁面的「自拍」[12]

將網頁保存為圖片（以下簡稱為快照），是用戶記錄和分享頁面資訊的有效手段，在各種興趣測試和營銷推廣等形式的活動頁面中尤為常見。

https://juejin.im/post/5df2e8ab6fb9a0163770816d

20 個幫你成為更好的 NodeJS 開發者的方法[13]

作者經過細心挑選，整理收集了 20 個 NodeJS 小技能。

https://medium.com/@me_37286/20-ways-to-become-a-better-node-js-developer-in-2020-d6bd73fcf424

提升 JS 測試能力的葵花寶典[14]

這篇文章從 A 到 Z 給出了 JavaScript & Node.js 的穩定性指南。它為你整理總結了市面上大量的最佳部落格文章、書籍以及工具。

https://github.com/goldbergyoni/javascript-testing-best-practices/blob/master/readme-zh-CN.md

tools And codes

Javascript Algorithms 最全指南[15]

此篇包含了多種基於 JavaScript 的演算法與數據結構。每種演算法和數據結構都有自己的 README，包含相關說明和鏈接

https://github.com/trekhleb/javascript-algorithms/blob/master/README.zh-CN.md

如何在 JavaScript 中處理 null 和 undefined？[16]

在 JavaScript 的開發工作中，許多開發人員都頭疼的一個問題就是處理可選值。怎樣才能最大程度減少由 null、undefined，或在運行時未初始化的值所引發的錯誤，有哪些最佳策略呢？

https://www.infoq.cn/article/tsfJmMq4sPa9kmsBKypY

npm-run-all 命令來啦[17]

一個可以讓你執行更多 npm-scripts 的命令行

https://github.com/mysticatea/npm-run-all

使用 useAuth 快捷接入鑒權你的 React APP[18]

useAuth 是目前最簡單的 React 鑒權方案，包括用戶管理、Cookies、組件內狀態分享、登錄邏輯等等，開箱即用。有興趣可以看看源碼是怎麼實現的。

https://swizec.com/blog/useauth-the-simplest-way-to-add-authentication-to-your-react-app/swizec/9179

如何使你的 JSX 更清晰[19]

相信大家都經歷過組件在不斷堆疊邏輯後，JSX 語法是如何地難以理解。這時候，你需要幾個方法論梳理整合 JSX 程式碼，寫出更優雅的組件，使其更整潔易懂且便於維護。

https://verekia.com/react/logic-less-jsx/