前端每週清單專注前端領域內容，以對外文資料的蒐集為主，幫助開發者瞭解一週前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源專案、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每週清單。
新聞熱點
國內國外，前端最新動態
Prettier 1.6.0 釋出：本週釋出的 Prettier 1.6.0 版本引入了數個期待已久的特性，包括 .prettierrc，.prettierignore 專案配置檔案、JSX 顯示格式優化、允許 JSON 檔案新增自定義註釋等；除此之外，該版本還進一步優化了對於 JavaScript、TypeScript、CSS、GraphQL 等格式檔案的支援，還提供了更多的命令列特性。
Firefox 引入 Headless 模式：類似於 Chrome 的 Headless 模式，現在 Firefox 也引入了 Headless 模式，其允許開發者利用 Firefox 進行更加方便地自動化測試、動態網頁抓取等操作；本文也介紹瞭如何利用 Selenium 控制 Firefox 進行自動化瀏覽器操作等內容。
Webpack 4 開發計劃：本文討論了 Webpack 4 相關的規劃與目標，在先前釋出的 Webpack 3 版本中並未引入什麼斷層變化，但是 Webpack 4 中會引入些重大的變革。Webpack 4 的主要目標包括 WASM 支援、新的 CSS 工作流、支援 async script 標籤、效能提升、繼續優化 ESM、更加完善地支援型別系統等。
TypeScript 2.5 版本釋出：近日釋出的 TypeScript 2.5 版本中引入了許多新的特性，並且能夠更好地與 VSCode 協同開發。該版本中提供了函式與方法抽取重構、快速型別修復、JavaScript 檔案中的 JSDoc 型別斷言支援、可選的 catch 語句等特性，同時還進一步優化了效能與使用體驗。
開發教程
步步為營，掌握基礎技能
基於 Node.js 的 HTTP2 服務端推送：Node.js 8.4.0 版本中引入了實驗性的 HTTP/2 支援，開發者可以通過
--expose-http2標識位啟用 HTTP/2 支援。本文首先介紹了 HTTP/2 服務端推送中重要的知識點，然後從零開始建立簡單的 Node.js 應用，來形象闡述如何使用 HTTP/2 以及其特性；更多 HTTP/2 相關資料參考這裡。使用官方 Vue.js 測試工具與 Jest 編寫元件的單元測試：Vue.js 以其靈活、高效能、易上手的特性正逐步被應用到更多的 Web 專案中，本系列文章則著眼於介紹 Vue.js 應用開發中的單元測試相關內容。本系列文章依次介紹了編寫首個簡單的元件單元測試用例、測試遞迴渲染的 Vue.js 元件、測試元件的樣式與結構、測試元件的狀態，計算屬性與方法、測試屬性與自定義事件、測試生命週期回撥、測試 Vue.js Slots、利用模組別名配置 Jest 等內容；更多 Vue.js 相關資料參考這裡。
利用 Service Worker 離線執行 Angular 應用：本文主要討論如何通過 Service Worker 為 Angular 應用新增離線執行特性。本文首先介紹了 Service Worker 的概念與原理，然後介紹了 Google 提供的工具集 Workbox，以及如何使用 Workbox 建立簡單的 Service Worker，最後以簡單的應用說明了如何建立自定義的 Service Worker、選定快取內容與快取策略。更多 Angular 相關資料參考這裡。
60 分鐘內構建 Github 搜尋欄：本文是來自 Appbase.io 的工程師分享的，如何快速構建漂亮大方的 Github 應用搜尋介面。本文中使用 React 開發前端介面，依次闡述瞭如何按照元件來切割介面、如何從底向上依次構建各級所需要的元件、如何新增元件事件響應、如何通過 Github API 獲取資料並且渲染到介面上等內容；更多 React 相關資料參考這裡。
工程實踐
立足實踐，提示實際水平
基於 Puppeteer 與 Chrome Headless 的網頁抓取：Puppeteer 是 Google Chrome 團隊釋出的 Chrome Headless 官方工具。而隨著 Chrome Headless 的釋出，包括 PhantomJS、Selenium Firefox 等在內很多的專案都宣佈停止開發；Chrome Headless 正逐步成為 Web 應用自動化測試的行業領袖。而本文則是一步一步地介紹瞭如何利用 Chrome Headless、Puppeteer、Node 以及 Mongodb 來抓取 Github 上的相關內容；更多 Chrome Headless 相關資料參考這裡。
V8 中物件屬性的快速訪問：本文將會介紹 V8 引擎是如何處理 JavaScript 物件中屬性的機制；雖然在使用層面上字元型鍵與數值型鍵並無差異，但是 V8 處於效能與記憶體的考慮會使用不同的方式來處理這兩種屬性。本文則會介紹 V8 提供的快速屬性訪問機制與動態屬性的處理，理解 inline caches 的執行機制等內容；更多 V8 相關資料參考這裡。
基於 Webpack 的 Vue.js 應用程式碼分割：早期利用 Webpack 打包前端應用的一大缺陷在於其會產生較大的包體，而後來引入的程式碼分割特性則能有效地提升首屏載入速度。本文介紹了 Vue.js 應用開發中，如何利用 Webpack 與 Async components 來進行程式碼的動態載入；更多 Vue.js 相關資料參考這裡
SparkUI：FreeWheel 的 React 開發實踐：SparkUI 是由 FreeWheel 根據自身業務特點開發的一套完整且靈活的前端開發解決方案。該方案基於 React，由 Modula 應用狀態管理框架、一系列可重用的前端元件、以及構建 SPA 所需的各類支援庫組成。 該方案重視可重用性、靈活性、可測試性以及開發效率，解決了前端社群常見的一些針對商業前端應用開發的痛點，如複雜狀態、Side Effect，元件拆分等，更在工程實踐、文件化、本身程式碼質量等方面達到較高標準，為前後端分離架構下的商業前端應用開發提供了堅實的基礎。目前 SparkUI 已成功應用在 FreeWheel 的前端專案中。
深度閱讀
深度思考，昇華開發智慧
為什麼我們從 Angular 2 遷移到了 Vue.js（以及為什麼不用 React）：本文是來自 Rever 的工程師分享的他們在構建新版本 Web 應用時技術選型的考量。作者主要從易用性、程式碼執行速度、文件、社群活躍度、移動端的支援、開源協議等多個角度對比分析了 Angular.js、Vue.js 與 React 這三個主流框架。其中 Angular.js 的缺陷在於版本更迭過快、程式碼執行速度略慢、響應式不足等方面；React 的程式碼執行速度一般，其最近的證照風波也是令人遲疑，而 Vue.js 目前的主要缺陷在於其社群還不如 React 與 Angular 龐大。更多 Vue.js 相關資料參考這裡
Web 的現狀：網頁效能提升指南：隨著因特網的快速發展，至今已有約 46% 的人們可以通過裝置接入到網路中；而其中的大多數又是通過移動裝置來瀏覽網頁或其他操作。本文即是對目前 Web 發展現狀進行概要性描述，並且討論了當前狀態下網頁應該關注的效能提升點。本文依次分析瞭如何優化 JavaScript、CSS 等資原始檔、選擇合適的圖片、優化網頁字型、優化 JavaScript 執行、如何正確地追蹤效能指標等內容；更多 Web 效能優化相關資料參考這裡。
Webkit 中 JavaScript 併發程式設計提案：隨著 SharedArrayBuffer 被引入，JavaScript 也正逐步轉向提供併發支援；本文即是 Webkit 開發團隊分享的它們對於併發 JavaScript 程式設計的考慮與設計。本文依次討論了 Thread 相關的 API、JavaScript 記憶體模型、如何與 DOM 進行互動、如何進行併發控制以及 WebKit 的實現方案等內容；
澄清對 AMP 的十個誤解：AMP 是由 Google 出品的，採用了白名單強約定策略的開源 Web 元件格式和類庫；因為 AMP 本身處於效能的考慮限制了網頁本身的開發自由，也導致了開發者對 AMP 頗有微詞。本文則是對於 AMP 的常見誤解進行闡述，包括 AMP 的定位與執行環境、AMP 的適用目標、AMP 與現有網站的整合方式、AMP 與 PWA 之間的關係等內容。
開源專案
樂於分享，共推前端發展
asm-dom: asm-dom 是輕量級的基於 WebAssembly 的 Virtual DOM 框架，其允許開發者使用 C++ 來構建 Web 單頁應用。開發者可以僅使用 C++ 來編寫 Web 應用，然後通過 Emscripten 來將其轉化為 WebAssembly；其能允許開發者直接使用現有的 C++ 標準庫程式碼，從而保證程式碼複用與效能提升。
Vivify：Vivify 是輕量級的 CSS 動畫庫，提供了數十種常見的 CSS 動畫實現，包括 ball、blink、driveInBottom、fadeIn、flip、popIn 等；開發者只需要將樣式檔案引入頁面中即可使用。
React Map GL：React Map GL 是 Uber 出品的基於 React 與 Mapbox GL 的地相簿，其提供了 Browserify、Webpack 2、create-react-app 多種整合嘗方式；官方也給出了與 Redux 的便捷整合方式。
Push: Push 是 BrowserStack 出品的，快速實現基於 JavaScript 的桌面訊息推送工具；Push 能夠自動利用 Chrome、Safari、Firefox、IE9+ 這些現代瀏覽器提供的底層介面，為開發者提供跨平臺的統一呼叫方式。
r2：r2 是 request 的作者基於多年的現代開發實踐總結出的輕量級、高可用 HTTP 客戶端；r2 基於瀏覽器端的 fetch 實現，使用了 node-fetch 提供了 Node.js 環境下的支援。
巔峰人生
- 與 Node.js 創立者 Ryan Dahl 的對話：Ryan Dahl 是 Google Brain 團隊的軟體工程師，也是 Node.js 專案的創立者；而他目前則就職於深度學習專案，著手圖片轉化等相關的方向。本文則是與 Ryan Dahl 的一次訪談記錄，談論了 Ryan Dahl 的技術生涯發展、工作選擇、創立 Node.js 的考量等內容。
前端之巔
「前端之巔」是InfoQ旗下關注前端技術的垂直社群，加入前端之巔學習群請關注「前端之巔」公眾號後回覆“加群”。投稿請發郵件到editors@cn.infoq.com，註明“前端之巔投稿”。