前端小報 – 201812 月刊

阿里巴巴TXD發表於2019-03-01
前端

訂閱 / 投稿：github.com/txd-team/mo…
本期小編： Hkmu (扶容) / x-cold (尹摯)

新聞快報

  • npm 釋出 2018 年的生態資料，預測 2019 年新趨勢

JavaScript 越來越受歡迎，而 npm 是 JavaScript 庫的管理中心，目前擁有超過 836,000 個庫，是世界上最大的開源庫集合。

回顧 2018 年，npm 正在被用在越來越多的場景下，包含瀏覽器，服務端，移動支援，IoT / 機器人等方面；另外可以看到現在 Web 應用程式中大量依賴 npm，佔其程式碼總量的 97%；npm 本身在 2018 年加入了 NSP 安全審計，更加註重包的安全管理（當然今年也發生了不少的 npm 包事件，參考工具推薦部分的“翻車現場”）。更多關於 npm 有趣的一些趨勢可以瀏覽前端之巔翻譯的報告，英文好的同學可以參考原始報告。

  • Rollup 釋出 v1.0 版本

從 Rollup 出現到現在已經接近 3 年半的時間，帶來了讓人眼前一亮的 Tree Shaking 等特性，前端應用的專案構建上我們使用的頻率可能相對低一些，而在一些庫/框架的開發中經常會用到它，包括 React, Vue 也在使用。在 2018 年 12 月 28 日，Rollup 終於釋出了 1.0.0 版本，結束了 0.x.x 時代。當然，升級到最新版本的 Rollup 需要改動不少的配置，參見更新日誌。

  • Babel 7.2.0 釋出，支援私有例項方法

關於私有作用域 (Private Fields) 的支援已經進入最新的提案中，Babel 的更新支援意味著我們可以在語言層面直接在我們的類 (Class) 中定義私有的變數和方法了，可以參考下面的示例：

class Person {
  #age = 19;

  #increaseAge() {
    this.#age++;
  }

  birthday() {
    this.#increaseAge();
    alert("Happy Birthday!");
  }
}
複製程式碼

在這個提案之前，我們也可以通過下劃線命名，Symbol 命名，閉包和 ES6 Proxy 等方式來實現私有作用域，可以參考這篇文章。關於 Babel 7.2.0 帶來的更多特性可以讀一下官方的更新日誌。

  • AI 也能幫你寫程式碼 (TypeScript / JavaScript / Python / C++ / C#) 了！！！

微軟和 IntelliCode 團隊一起推出 Visual Studio IntelliCode 擴充套件，預覽版可以在 VSCode 外掛市場直接查詢「Visual Studio IntelliCode」安裝。在我們編寫程式碼的時候，外掛會自動給出推薦的編碼補全，當然它不只是個語法的提示工具，它的做法是根據編碼的上下文來提供智慧的建議，趕緊安裝體驗吧~

intellicode_3.gif

  • 2019 年十款流行的 Node.js 框架

文章介紹了框架帶來的收益以及如何選擇適合的框架，並且對比了 10 款目前流行的 Node.js 框架，包括老牌的 Express、Meteor，以及一些新興框架，例如 Adonis, Nest 等。感興趣的同學可以閱讀原文。

值得一提的是，在諸多框架橫空出世的黃金開發時代，框架之間更多是特性的互補，所以並沒有必要去分出高下，更重要的是選擇跟業務成長相契合的框架。另外作者列舉的更多的是海外流行的框架，其實國產的 Egg, ThinkJS 也已經有不少的企業級實踐，感興趣的可以到對應的 Github 倉庫繼續深入瞭解。

  • 阿里開源企業級設計系統最佳解決方案 Fusion

2018 年 12 月 16 號，Fusion Design 在 OSC 深圳源創會年終盛典上正式開源，它是阿里巴巴耗時近三年打造的企業中後臺解決方案，關於 Fusion 的詳細介紹可以參考這裡。

  • 微軟宣佈 Edge 將採用 Chromium 核心

這對於諸多的前端開發者而言，無疑是本年底最大的福音~！具體的計劃可以參考官網的部落格，在不久的將來，基於 Chromium 的 Edge 瀏覽器將要正式和我們見面啦。

Github Trending

洞察 Github 近期 Hot Fresh Repository

一款簡單易用，輕量級的動態佈局的 JavaScript 庫，與它的名字不同，Magic-Grid 不是 CSS Grid 庫，它支援彈性佈局/瀑布流等，還提供了一個支援 Vue 的版本。

大型 Node.js 最佳實踐的精品總結和分享，裡面包含了豐富的使用場景及最佳實踐（附帶解釋），閱讀這本大型書籍也能收穫不少關於 Node.js 的知識。

高效能的 Node.js 影像處理模組，影像處理又多一種新的選擇。

不容錯過的 GPRC 服務視覺化客戶端，可以理解為 HTTP 之 Postman, GraphQL 之 Playground，GRPC 之 BllomRPC。

Github 社交聚合平臺，個人認為更像是個人工作臺，支援 Web, iOS, Android, Desktop 多平臺，如果你是 Github 使用者，這裡可能提供了你想要的一切。

rrweb 是 `record and replay the web` 的簡寫，旨在利用現代瀏覽器所提供的強大 API 錄製並回放任意 Web 介面中的使用者操作。

一款基於 Markdown 的筆記應用程式，支援無限資料夾 / 標籤管理，喜歡純粹的 Markdown 編輯體驗的同學可以嘗試使用一下，README 檔案中有和其他競品對比的報告。

精品學習

在這個經常翻車的年代，網路安全逐漸受到重視。在前端這個開放的世界中，開發人員更應該對安全有所瞭解，並在自己的應用程式中部署適當的安全工具和策略，保護使用者隱私以及系統的安全執行。文章閱讀時間約 15 分鐘。

如何保證程式碼的交付質量？結對程式設計是否有科學依據？實際上，Code Review 無論是在軟體工程體系，亦或是開源社群的執行秩序中，都是非常重要的環節。正確的 Code Review 姿勢不僅能提高程式碼質量，降低故障發生的風險，還能給團隊開發帶來效能的提升。如果你的團隊還沒有 Review 程式碼的習慣，不妨來看下燕燕翻譯的這篇部落格。文章閱讀時間約 10 分鐘。

工具推薦

還記得曾今的 WAP 時代嗎？當我們在瀏覽網頁的時候，經常能看到一個綠色的下一頁按鈕，點選之後可以“幾乎無重新整理”的跳轉到新的頁面中，它其實是一種預載入的策略。現在 quicklink 也可以給普通的 Web 應用程式提供類似的能力，使用它我們可以讓瀏覽器在空閒的時間預先將使用者即將訪問的頁面預先快取，從而極大地提高了切換頁面的速度。

可以將 Node.js 模組打包成單個檔案的神奇工具，讓你的模組最小化。這種打包的方式非常適合一些需要更“純粹”的交付場景，比如 serverless，通過 ncc 我們可以很輕鬆地把應用程式及依賴轉換成單個檔案進行交付。

最近半年發生的 npm 事故稍微有些頻繁，因此通過 npm 安裝一個靠譜的 package 和 version 非常重要。npq 會在安裝之前進行前置的檢查，其中包括了安全掃描、包的釋出時間、熱度、安裝指令碼分析等。另外帶大家回顧一下今年的大型翻車現場：

debug：visionmedia/debug#603
React：facebook/react#14208
event-stream：zhuanlan.zhihu.com/p/50938220

相關文章