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

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

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

國(guó)內(nèi)國(guó)外，前端最新動(dòng)態(tài)

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

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

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

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

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

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

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

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

立足實(shí)踐，提示實(shí)際水平

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

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

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

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

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

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

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

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

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

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

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

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

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

「前端之巔」是 InfoQ 旗下關(guān)注前端技術(shù)的垂直社群，加入前端之巔學(xué)習(xí)群請(qǐng)關(guān)注「前端之巔」公眾號(hào)后回復(fù)“加群”。投稿請(qǐng)發(fā)郵件到 [email protected]，注明“前端之巔投稿”。