前端每週清單第 40 期: JS 的 Core 與 Cost，Node 內存溢出調試，Software 2.0

前端每週清單第 40 期: JS 的 Core 與 Cost，Node 內存溢出調試，Software 2.0

做者：王下邀月熊 編輯：徐川

前端每週清單專一前端領域內容，以對外文資料的蒐集爲主，幫助開發者瞭解一週前端熱點；分爲新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峯人生等欄目。歡迎關注【前端之巔】微信公衆號（ID：frontshow），及時獲取前端每週清單。

新聞熱點

國內國外，前端最新動態

• Atom 發佈代碼協同工具 Teletype: 本週，Atom 發佈了遠程協同工具 Teletype，其容許開發者以 P2P 的方式進行結對編程；儘管 Beta 版本尚存在不少的 Bug，仍是拭目以待將來更方便的團隊協同工具。同時，VS Code 也發佈了所謂的 Live Share 規劃，其一樣容許開發者使用 Visual Studio 2017 或者 VS Code 來實時協同編輯代碼。

• Firefox 57.0 發佈: Firefox Fast Again! 本週 Firefox 57.0 版本正式發佈，給用戶帶來了一個全新的 Firefox，暢快地使用體驗。該版本中最大的變化，便是引入面向現代設備的瀏覽器引擎：Quantum；同時該版本還從新設計了用戶界面，爲用戶提供清新爽朗，且觸摸屏友好的界面。更多詳細內容能夠查看原文或者下文介紹的 Quantum 揭祕一文。

• Github 發佈安全告警功能: 上個月 Github 引入了 Dependency Graph，容許以可視化地方式呈現 JavaScript 與 Ruby 倉庫的依賴圖譜。在此基礎上，Github 發佈了倉庫的安全告警功能，在用戶打開 Dependency Graph 的狀況下，其可以自動地檢測依賴項目是否存在安全漏洞；一旦發現了存在漏洞的依賴，其會及時地給予開發者反饋。

• Expo SDK 23.0.0 發佈: 本週 Expo SDK 23.0.0 正式發佈，其基於 React Native 0.50；在該版本中也正式引入了 React 16.0.0，從而可以使用新版本的 React 中的各項特性。該版本還嘗試引入了 Release Channels 功能，容許開發者更方便地發佈與更新本身的應用；而且開始支持 iOS OTA 更新的後臺抓取功能。除此以外，該版本還更新了 Android 中的 JavaScriptCore、更新了 Snack 以及多個 API 的表現。

開發教程

步步爲營，掌握基礎技能

• Angular 初學者完備指南: 本文是一篇很是完備的 Angular 初學者指南，不只按部就班地引導開發者搭建簡單的 Angular 項目，還囊括了 Angular 中諸多基礎概念。本文首先介紹了 Angular 的概念與定位，包括了 SPA、Angular 框架與整個平臺的構成、Angular 各個版本之間的關係等內容；接下來本文介紹了 Angular CLI 以及如何使用它搭建簡單的項目，而且討論了 Angular CLI 中常見參數的做用。而後本文在簡單項目的基礎上，分析了 Angular 項目的目錄結構與文件含義；最後從 Angular 組件的語法開始，依次介紹了服務、模塊等關鍵部分的語法與接口。更多 Angular 相關資料參考這裏。

• 你須要瞭解的有關 React 的一切: 不少人已熟悉或使用着 React，不過其也在不斷地變化，本文即是一篇不錯的入門介紹文章，也可以梳理下 React 的關鍵知識點。本文以構建簡單的 React 音樂播放器爲例，按部就班地介紹什麼是 React 組件、ReactDOM 渲染、類組件與函數式組件、JSX、State、事件處理、異步 setState、Props、Refs 等內容；更多 React 教程參考 React 與前端工程化實踐。

• 函數式編程實踐教程: 本文是做者在 LinkedIn 演講的總結，旨在解釋函數式編程及其組合的思想如何能幫助開發者編寫更好的代碼；而不是着眼於某個語言或者執着於討論 Monads 這些名詞。做者從四十年前 Fortran 的做者 John Backus 對於函數式編程的引入談起，討論了組合（Composition）在計算機科學中的意義；而後分別以 Java 與 JavaScript 等經常使用語言爲例，討論瞭如何經過組合將複雜的問題分解，而且將函數式的、細節的方案有機組合爲總體的解決方案。更多函數式編程相關資料參考這裏。

工程實踐

立足實踐，提示實際水平

• JavaScript 的代價與優化: 本文是 Addy Osmani 大神的又一力做，着眼於討論如何在移動設備上快速地提高站點加載速度與用戶交互地響應性能。本文依次從如何減小包體尺寸與傳輸數據量、優化 JavaScript 代碼的解析、編譯、執行，如何實踐 PRPL 模式等方面進行闡述；更多性能優化相關資料參考這裏。

• 擴展 React 服務端渲染的實踐: 做者在本文中分享了，其在近期擴展 React 服務端渲染過程當中的實踐經驗；雖然文中不少的討論點都是 React 相關，可是面臨的通用擴展挑戰，或者解決的問題都是值得重複借鑑的。本文並無直接討論 React 服務端優化，而是從常見的負載均衡談起，介紹了常見負載均衡的算法與策略；而後討論了客戶端渲染的兜底方案，即當流量過大致使服務端沒法及時響應的狀況下，如何給用戶合適的反饋。接下來本文還討論了分級卸載、組件緩存、依賴處理、同構渲染等內容；更多 React 教程參考 React 與前端工程化實踐。

• Node.js 中內存溢出與內存膨脹調試: 內存問題是服務端應用程序的常見痛點之一，本文做者近日就受困於內存泄露（Memory Leak）與內存膨脹（Memory Bloat），本文便是他的調試經驗分享。所謂的內存泄露是指無用的內存卻未被回收釋放，而內存膨脹指程序使用了過量的內存；做者介紹了使用堆快照以及 Chrome DevTools 來輔助回溯、蒐集、分析與解決這些內存問題。若是想要了解 Web 應用中 JavaScript 的內存調試能夠參考內存分析與內存泄漏定位一文。

• 前端測試金字塔：從新思考你的測試: 本文着眼於前端測試方面，從所謂的測試金字塔結構談起，梳理前端測試的關鍵內容與設計理念。做者認爲所謂的前端測試金字塔自底向上爲單元測試、快照測試、端到端測試，而後以簡單的模態彈窗爲例，介紹各個測試模塊的設計要點。通常來講，單元測試用於測試代碼庫中的函數、類等原子對象，而快照測試則可以記錄組件渲染以後的狀態而且隨時進行比較；端到端測試則是用於黑盒保證產品的最終體驗。更多 Web 測試相關資料參考這裏。

深度閱讀

深度思考，昇華開發智慧

• JavaScript. The Core 第二版: 本文是 JavaScript 核心概述的第二版，主要對於 ECMAScript 語言標準與其運行時的核心組件進行講解。本文依次介紹了 Object、Prototype、Class、Execution Context、Environment、Closure、This、Realm、Job 以及 Agent 的概念；更多 JavaScript 教程參考現代 JavaScript 語法基礎與工程實踐。

• WebAssembly 已被全部主流瀏覽器支持: 在過去幾周蘋果的 Safari 瀏覽器與微軟的 Edge 瀏覽器分別發佈新版本，支持了 WebAssembly，再加上早已支持的 Firefox 和 Chrome，WebAssembly 已獲得全部主流瀏覽器支持。在普遍的瀏覽器支持下，開發者試驗使用 wasm 模塊開發的新特性將觸達絕大多數用戶。如此普遍的支持得益於 asm.js 項目早期的成功，由於它是 JavaScript 的子集，所以能夠運行在全部瀏覽器上，如 Facebook 的社交遊戲 Candy Crush Saga 等就使用了它。

• Software 2.0: 本文是特斯拉 AI 主管 Andrej Karpathy 發表的其對於軟件將來發展的見解，見仁見智，你們也能夠帶着批判的態度去閱讀。所謂的軟件 1.0 便是程序員使用 Python、C++、Java 等編寫代碼，而後再編譯爲機器碼指令或者由解釋器執行，每一行代碼賦予程序特定的功能。做者認爲深度學習便是軟件 2.0，神經網絡不只是一個分類器，更意味着編程基礎開始發生變化，而開發者也能夠經過神經網絡權值進行編程。軟件 2.0 擁有着同態計算、更易燒錄、持續運行、常量存儲、運算高效、十分敏捷等特性。

開源項目

樂於分享，共推前端發展

• Datasette: Datasette 爲咱們提供了面向 SQLite 數據庫的開箱即用的、只讀的 JSON API；同時 Datasette 還提供了用於將數據庫打包爲 Docker 容器，而且將其部署到 Zeit Now 等雲端容器的工具。

• SQL Operations Studio: SQL Operations Studio 是由 Microsoft 開源的數據管理工具，其支持 SQL Server，Azure SQL DB 以及 SQL DW 等多種微軟旗下的數據庫；SQL Operation Studio 可以和 VS Code 深度集成，運行在 Windows、macOS、Linux 等主流操做系統平臺中。SQL Operations Studio 提供了 SQL Server 鏈接管理、對象查詢、完備的 T-SQL 編輯器、多種格式數據源導出、數據備份與回滾、自定義腳本、歷史任務查詢等等豐富的功能特性。

• Luxon: Luxon 是由 Moment 出品的，用於操做 JavaScript 中時間與日期對象的工具庫；Luxon 能夠看作對於 Moment.js 的現代化接口包裹。Luxon 提供了 DateTime、Duration、Interval 等擴展類型，支持鏈式函數式風格的接口調用，可以對常見格式的時間字符串進行解析與轉換，而且不須要 locale 或者 tz 文件就能夠進行國際化轉換。

巔峯人生

• React 誕生記：Facebook 併購 Instagram 與開源 React.js: 毫無疑問，React 已成爲最著名的且最流行的 JavaScript 界面庫之一，它在 Github 上有超過 70K 的 Star，超過 1100 名貢獻者與每個月超過六百萬的下載量，而且它已經在數千家公司的技術棧中獲得了應用。不過在 React 面世之初，並未有太多的人關心它；本文是對 Stack Stories 訪談節目的記錄總結，是由 React 的最初創造者之一的 Pete Hunt， 來分享 React 誕生先後的故事：爲何會有 React，它是如何得到 Facebook 的關注，它又通過了怎樣的流程才進入到公衆的視線，等等。

前端之巔

「前端之巔」是 InfoQ 旗下關注前端技術的垂直社羣，加入前端之巔學習羣請關注「前端之巔」公衆號後回覆「加羣」。投稿請發郵件到 editors@cn.infoq.com，註明「前端之巔投稿」。