摘要：已被所有主流瀏覽器支持在過去幾周蘋果的瀏覽器與微軟的瀏覽器分別發布新版本，支持了，再加上早已支持的和，已得到所有主流瀏覽器支持。

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

前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（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，注明“前端之巔投稿”。