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

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

前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點；分為新聞熱點、開發(fā)教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單。

國內(nèi)國外，前端最新動態(tài)

Atom 發(fā)布代碼協(xié)同工具 Teletype: 本周，Atom 發(fā)布了遠程協(xié)同工具 Teletype，其允許開發(fā)者以 P2P 的方式進行結(jié)對編程；盡管 Beta 版本尚存在很多的 Bug，還是拭目以待未來更方便的團隊協(xié)同工具。同時，VS Code 也發(fā)布了所謂的 Live Share 規(guī)劃，其同樣允許開發(fā)者使用 Visual Studio 2017 或者 VS Code 來實時協(xié)同編輯代碼。

Firefox 57.0 發(fā)布: Firefox Fast Again! 本周 Firefox 57.0 版本正式發(fā)布，給用戶帶來了一個全新的 Firefox，暢快地使用體驗。該版本中最大的變化，即是引入面向現(xiàn)代設(shè)備的瀏覽器引擎：Quantum；同時該版本還重新設(shè)計了用戶界面，為用戶提供清新爽朗，且觸摸屏友好的界面。更多詳細內(nèi)容可以查看原文或者下文介紹的 Quantum 揭秘一文。

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

Expo SDK 23.0.0 發(fā)布: 本周 Expo SDK 23.0.0 正式發(fā)布，其基于 React Native 0.50；在該版本中也正式引入了 React 16.0.0，從而可使用新版本的 React 中的各項特性。該版本還嘗試引入了 Release Channels 功能，允許開發(fā)者更方便地發(fā)布與更新自己的應(yīng)用；并且開始支持 iOS OTA 更新的后臺抓取功能。除此之外，該版本還更新了 Android 中的 JavaScriptCore、更新了 Snack 以及多個 API 的表現(xiàn)。

步步為營，掌握基礎(chǔ)技能

Angular 初學(xué)者完備指南: 本文是一篇非常完備的 Angular 初學(xué)者指南，不僅循序漸進地引導(dǎo)開發(fā)者搭建簡單的 Angular 項目，還囊括了 Angular 中諸多基礎(chǔ)概念。本文首先介紹了 Angular 的概念與定位，包括了 SPA、Angular 框架與整個平臺的構(gòu)成、Angular 各個版本之間的關(guān)系等內(nèi)容；接下來本文介紹了 Angular CLI 以及如何使用它搭建簡單的項目，并且討論了 Angular CLI 中常見參數(shù)的作用。然后本文在簡單項目的基礎(chǔ)上，分析了 Angular 項目的目錄結(jié)構(gòu)與文件含義；最后從 Angular 組件的語法開始，依次介紹了服務(wù)、模塊等關(guān)鍵部分的語法與接口。更多 Angular 相關(guān)資料參考這里。

你需要了解的有關(guān) React 的一切: 很多人已熟悉或使用著 React，不過其也在不斷地變化，本文便是一篇不錯的入門介紹文章，也能夠梳理下 React 的關(guān)鍵知識點。本文以構(gòu)建簡單的 React 音樂播放器為例，循序漸進地介紹什么是 React 組件、ReactDOM 渲染、類組件與函數(shù)式組件、JSX、State、事件處理、異步 setState、Props、Refs 等內(nèi)容；更多 React 教程參考 React 與前端工程化實踐。

函數(shù)式編程實踐教程: 本文是作者在 LinkedIn 演講的總結(jié)，旨在解釋函數(shù)式編程及其組合的思想如何能幫助開發(fā)者編寫更好的代碼；而不是著眼于某個語言或者執(zhí)著于討論 Monads 這些名詞。作者從四十年前 Fortran 的作者 John Backus 對于函數(shù)式編程的引入談起，討論了組合（Composition）在計算機科學(xué)中的意義；然后分別以 Java 與 JavaScript 等常用語言為例，討論了如何通過組合將復(fù)雜的問題分解，并且將函數(shù)式的、細節(jié)的方案有機組合為整體的解決方案。更多函數(shù)式編程相關(guān)資料參考這里。

立足實踐，提示實際水平

JavaScript 的代價與優(yōu)化: 本文是 Addy Osmani 大神的又一力作，著眼于討論如何在移動設(shè)備上快速地提升站點加載速度與用戶交互地響應(yīng)性能。本文依次從如何減少包體尺寸與傳輸數(shù)據(jù)量、優(yōu)化 JavaScript 代碼的解析、編譯、執(zhí)行，如何實踐 PRPL 模式等方面進行闡述；更多性能優(yōu)化相關(guān)資料參考這里。

擴展 React 服務(wù)端渲染的實踐: 作者在本文中分享了，其在近期擴展 React 服務(wù)端渲染過程中的實踐經(jīng)驗；雖然文中很多的討論點都是 React 相關(guān)，但是面臨的通用擴展挑戰(zhàn)，或者解決的問題都是值得重復(fù)借鑒的。本文并沒有直接討論 React 服務(wù)端優(yōu)化，而是從常見的負載均衡談起，介紹了常見負載均衡的算法與策略；然后討論了客戶端渲染的兜底方案，即當流量過大導(dǎo)致服務(wù)端無法及時響應(yīng)的情況下，如何給用戶合適的反饋。接下來本文還討論了分級卸載、組件緩存、依賴處理、同構(gòu)渲染等內(nèi)容；更多 React 教程參考 React 與前端工程化實踐。

Node.js 中內(nèi)存溢出與內(nèi)存膨脹調(diào)試: 內(nèi)存問題是服務(wù)端應(yīng)用程序的常見痛點之一，本文作者近日就受困于內(nèi)存泄露（Memory Leak）與內(nèi)存膨脹（Memory Bloat），本文即是他的調(diào)試經(jīng)驗分享。所謂的內(nèi)存泄露是指無用的內(nèi)存卻未被回收釋放，而內(nèi)存膨脹指程序使用了過量的內(nèi)存；作者介紹了使用堆快照以及 Chrome DevTools 來輔助回溯、搜集、分析與解決這些內(nèi)存問題。如果想要了解 Web 應(yīng)用中 JavaScript 的內(nèi)存調(diào)試可以參考內(nèi)存分析與內(nèi)存泄漏定位一文。

前端測試金字塔：重新思考你的測試: 本文著眼于前端測試方面，從所謂的測試金字塔結(jié)構(gòu)談起，梳理前端測試的關(guān)鍵內(nèi)容與設(shè)計理念。作者認為所謂的前端測試金字塔自底向上為單元測試、快照測試、端到端測試，然后以簡單的模態(tài)彈窗為例，介紹各個測試模塊的設(shè)計要點。一般來說，單元測試用于測試代碼庫中的函數(shù)、類等原子對象，而快照測試則能夠記錄組件渲染之后的狀態(tài)并且隨時進行比較；端到端測試則是用于黑盒保證產(chǎn)品的最終體驗。更多 Web 測試相關(guān)資料參考這里。

深度思考，升華開發(fā)智慧

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

WebAssembly 已被所有主流瀏覽器支持: 在過去幾周蘋果的 Safari 瀏覽器與微軟的 Edge 瀏覽器分別發(fā)布新版本，支持了 WebAssembly，再加上早已支持的 Firefox 和 Chrome，WebAssembly 已得到所有主流瀏覽器支持。在廣泛的瀏覽器支持下，開發(fā)者試驗使用 wasm 模塊開發(fā)的新特性將觸達絕大多數(shù)用戶。如此廣泛的支持得益于 asm.js 項目早期的成功，因為它是 JavaScript 的子集，因此可以運行在所有瀏覽器上，如 Facebook 的社交游戲 Candy Crush Saga 等就使用了它。

Software 2.0: 本文是特斯拉 AI 主管 Andrej Karpathy 發(fā)表的其對于軟件未來發(fā)展的看法，見仁見智，大家也可以帶著批判的態(tài)度去閱讀。所謂的軟件 1.0 即是程序員使用 Python、C++、Java 等編寫代碼，然后再編譯為機器碼指令或者由解釋器執(zhí)行，每一行代碼賦予程序特定的功能。作者認為深度學(xué)習(xí)即是軟件 2.0，神經(jīng)網(wǎng)絡(luò)不僅是一個分類器，更意味著編程基礎(chǔ)開始發(fā)生變化，而開發(fā)者也可以通過神經(jīng)網(wǎng)絡(luò)權(quán)值進行編程。軟件 2.0 擁有著同態(tài)計算、更易燒錄、持續(xù)運行、常量存儲、運算高效、十分敏捷等特性。

樂于分享，共推前端發(fā)展

Datasette: Datasette 為我們提供了面向 SQLite 數(shù)據(jù)庫的開箱即用的、只讀的 JSON API；同時 Datasette 還提供了用于將數(shù)據(jù)庫打包為 Docker 容器，并且將其部署到 Zeit Now 等云端容器的工具。

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

Luxon: Luxon 是由 Moment 出品的，用于操作 JavaScript 中時間與日期對象的工具庫；Luxon 可以看做對于 Moment.js 的現(xiàn)代化接口包裹。Luxon 提供了 DateTime、Duration、Interval 等擴展類型，支持鏈式函數(shù)式風(fēng)格的接口調(diào)用，能夠?qū)ΤＲ姼袷降臅r間字符串進行解析與轉(zhuǎn)換，并且不需要 locale 或者 tz 文件就可以進行國際化轉(zhuǎn)換。

React 誕生記：Facebook 并購 Instagram 與開源 React.js: 毫無疑問，React 已成為最著名的且最流行的 JavaScript 界面庫之一，它在 Github 上有超過 70K 的 Star，超過 1100 名貢獻者與每月超過六百萬的下載量，并且它已經(jīng)在數(shù)千家公司的技術(shù)棧中得到了應(yīng)用。不過在 React 面世之初，并未有太多的人關(guān)心它；本文是對 Stack Stories 訪談節(jié)目的記錄總結(jié)，是由 React 的最初創(chuàng)造者之一的 Pete Hunt， 來分享 React 誕生前后的故事：為什么會有 React，它是如何獲得 Facebook 的關(guān)注，它又經(jīng)過了怎樣的流程才進入到公眾的視線，等等。

「前端之巔」是 InfoQ 旗下關(guān)注前端技術(shù)的垂直社群，加入前端之巔學(xué)習(xí)群請關(guān)注「前端之巔」公眾號后回復(fù)“加群”。投稿請發(fā)郵件到 editors@cn.infoq.com，注明“前端之巔投稿”。