前端每週清單專注前端領域內容，以對外文資料的蒐集為主，幫助開發者瞭解一週前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源專案、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每週清單。
新聞熱點
國內國外，前端最新動態
Chrome 61 新特性介紹：Chrome 61 中即將原生地支援 JavaScript 模組，意味著開發者可以不用 Babel 等轉換器即直接在瀏覽器中執行模組化程式碼。除此之外，Chrome 61 還允許開發者使用
navigator.share來觸發 Android 原生的分享對話方塊，並且引入了 WebUSB 介面來訪問受信的 USB 裝置；更多特性介紹請檢視原文。Yarn 1.0 釋出：著名的 JavaScript 包管理器 Yarn 終於釋出了其 1.0 版本，目前已經有超過 175000 個 Github 上的專案包含了 yarn.lock 檔案，每個月有超過三十億的下載量。在新版本中，Yarn 引入了工作空間、自動合併 lockfiles、可選擇的版本解決等特性，並且進行了其他一系列的效能提升與錯誤修復等工作。
Meteor 15.2 釋出：經過超 40 個 Pull Request 的請求合併之後，Meteor 釋出了 1.5.2 版本；新版本中放棄了對於 MongoDB 2.4 版本的支援，修復了 Node.js 垃圾回收的 Bug，引入了一系列的新特性，詳情請檢視原文。
百度與 W3C 中國聯合組織移動網頁加速技術研討會：2017年8月30日，百度聯合W3C中國在北京中關村軟體園國際會議中心主辦了“移動網頁加速技術研討會”，W3C中國以及騰訊、阿里巴巴及UC、搜狗、小米、傲遊、中國移動、中國電信、DCloud、聽雲等W3C中國區會員及廠商代表積極參與了本次研討會。本次研討會探討了百度MIP（Mobile Instant Pages）技術以及類似技術（如：Google AMP、Facebook Instant Article、騰訊雲加速）涉及到的標準化問題，即如何讓一個頁面被內容分發平臺即時展現渲染，從而以更快的載入速度和更友好的展現互動方式來提升使用者在內容分發平臺上的瀏覽體驗。研討會探討了使用Pre-fetch/Pre-render page、Async open page、CDN服務來實現這類服務的可能性。
開發教程
步步為營，掌握基礎技能
面向 Web 開發者的 VR 指南：近日來，越來越多的瀏覽器新增了對於 VR 特性的支援，本文即是盤點下目前瀏覽器中 VR 技術發展的現狀，並且對可用的 WebVR 相關 API 進行簡要介紹。本文首先介紹了 VR 以及 WebVR 的基礎概念，列舉了 WebVR 目前的瀏覽器以及裝置的支援情況，然後分析了 WebVR 的發展趨勢與潛在機會；更多 WebVR 相關資料參考這裡。
基於 Vue.js 與 Webpack 的三種程式碼分割正規化：程式碼分割是提升單頁應用初始載入速度的重要方式之一，其能有效提升使用者體驗；本文則著眼於介紹 Vue.js 應用開發中常見的三種程式碼分割方式，分別是按照頁面切分、按照頁面的可見區域摺疊切分以及按條件載入。更多 Vue.js 相關資料參考這裡。
利用 Flow 與 Recompose 編寫高階元件：高階元件是 React 應用開發中典型的設計模式之一，我們常常會利用 Recompose 庫來實踐高階元件；另一方面，Flow 靜態型別檢測工具能夠有效提升應用的魯棒性，本文即是介紹如何在開發中協同使用 Flow 與 Recompose，編寫具有靜態型別的高階元件。本文依次介紹瞭如何從 Recompose 中引入型別宣告、如何為類元件新增型別宣告、如何編寫高階函式等內容；更多 React 相關資料參考這裡。
Node.js 中 async_hooks 圖解：async_hooks 是 Node.js 8 中引入的實驗性介面，其允許開發者依賴 init、before、after、destroy 四個回撥函式監控非同步資源的執行情況。本文則是以手繪圖形象地介紹 async_hooks 的工作原理與執行機制；更多 Node.js 相關資料參考這裡
如何在 Chrome DevTools 中除錯 JavaScript：Chrome DevTools 是非常強大的除錯工具，本文著眼於介紹如何使用 Chrome DevTools 來新增斷點並且單步執行 JavaScript 程式碼，從而幫助開發者更有效地定位到錯誤點。本文首先介紹了測試用例以及如何重現錯誤，然後依次闡述了新增斷點、單步除錯、檢查當前值、修復錯誤並重新儲存等內容；更多 Web 除錯相關資料參考這裡。
工程實踐
立足實踐，提示實際水平
- TypeScript 與 Webpack 的激情碰撞：本文是 ts-loader 的核心維護者之一，分享的多個能提升 Webpack 中 TypeScript 使用體驗的外掛。fork-ts-checker-webpack-plugin 能夠利用子程式來進行型別校驗，HappyPack 則允許併發處理多個檔案從而提升 Webpack 的編譯速度，thread-loader 與 cache-loader 還能進一步提升編譯速度；更多 Webpack 相關資料參考 https://parg.co/bVs 。
理想的 React 架構應該具備的特徵：React 本身並不是某種應用架構，它只是 MVC 架構中的檢視層；本質上只是擁有內部元件生命週期的單向資料繫結的檢視庫。本文則是作者分享的自己實踐中總結出的 React 應用架構特徵：控制器與模型層不應該直接被 React 元件表示、Props 儘可能少地在深層元件間傳遞、儘可能地使用不可變資料以減少計算壓力；更多 React 相關資料參考這裡。
來自 HousingEngg 的 React Native 實踐分享：HousingEngg 去年開始 PWA 化應用以來，極大地提升了使用者體驗；而在進行移動端應用開發的技術選型時，為了儘可能地完成程式碼複用，決定用 React Native 進行開發。本文首先介紹了開發目標與 React Native 相關技術棧選型，包括 react-navigation、redux-observable、ramda、redux-persist 等；然後介紹了 storybook、fastlane、detox、sentry 等常用的工具，最後分享了些開發過程中遇到的坑以及構建流程的搭建。更多 React Native 相關資料參考這裡。
利用 requestAnimationFrame 優化動作效能：requestAnimationFrame 為我們提供了相對底層的介面，本文則是對於 requestAnimationFrame 的深度解析。本文首先介紹了 requestAnimationFrame 的基礎用法與執行機制，然後介紹了其在 Easing 動畫、SVG 繪製、定時器方面的應用；更多 Web 動畫相關資料參考這裡。
深度閱讀
深度思考，昇華開發智慧
car2go 的前端框架選擇：本文是 car2go 的工程師分享的他們在前端框架選擇時候的考量；今年組建新的前端開發團隊時，需要根據團隊內成員不同的經驗、背景、程式設計傾向與技能來進行選擇。技術選型主要從文件、專案的維護者的投入、StackOverflow 等常見平臺的問題豐富度、工具鏈的完善程度、外掛或者擴充套件的數量、Web 技術標準、上手難易程度、程式碼風格、API 設計、可擴充套件性等方面進行考慮，最終的候選者是 React 與 Vue.js；不過因為 Vue.js 更加完善的文件，最終勝出。
面向創業者與 CTO 的 React 開源協議解析：本文是 Facebook 前工程師，後來的創業者對於近日沸沸揚揚的 React BSD + 專利協議的個人解釋，希望能夠幫助更多的人理解 Facebook 設定該協議的初衷，以及對於使用者的潛在影響。本文首先介紹了 2012 年雅虎對於 Facebook 的專利訴訟及其應對方式，然後分析了該事件對於 Facebook 專利戰略的啟示；筆者認為 Facebook 設定該協議更多的是處於防衛考慮，避免受到惡意的專利訴訟。不過對於那些潛在的可能和 Facebook 進行直接競爭的創業公司，還是需要慎重地使用 React 等系列框架。
10 個常見的軟體架構概述：很多人都會好奇大型商業系統的設計是如何進行的，實際上在大型軟體開發啟動之前，我們都會選擇合適的能夠提供想要的功能與高效能的特性的架構；本文則是介紹軟體設計中常見的十種架構，對比了其使用場景、優勢與劣勢。本文依次介紹了分層模式、客戶端-伺服器模式、主從模式、管道過濾模式、代理模式、點到點模式、訊息匯流排模式、黑板模式、直譯器模式等。
Mobile Web 效能優化手冊：無論是開發者、設計師或者市場專員，都會關心終端使用者對於產品的使用體驗；而在移動端愈發成為主要入口的今天，移動 Web 的效能優化也愈發重要。本手冊則是圖文並茂地介紹了移動 Web 優化應該考慮的點。本手冊依次分析了效能優化的實際意義、效能優化的感知指標會有哪些、常見的移動 Web 優化策略以及 AMP 與 PWA 等常見的優化建議等內容；更多 Web 效能優化相關資料參考這裡。
開源專案
樂於分享，共推前端發展
react-imgpro：react-imgpro 是基於 React 的圖片處理元件，該元件能夠提供常見的縮放、調色等圖片處理功能，並且將處理之後的圖片以 base64 編碼形式返回。
Lozad.js：Lozad.js 是基於 IntersectionObserver API 的輕量級、高效能、可配置的純 JavaScript 懶載入器，其能夠被用於進行圖片、iframe 等多種形式的元素。
Rythm.js：Rythm.js 是非常有趣的 JavaScript 庫，它能夠為你的頁面新增動感地音樂效果，彷彿在搖滾中起舞。
Downshift：Downshift 是 PayPal 開源的簡單、靈活的 React 輸入元件，提供了自動完成、下拉選擇等多種豐富的功能；Downshift 提供了 Render Function as Children 的介面，從而給予了開發者極大的靈活性與自由發揮的空間。
Fastify：Fastify 是新近釋出輕量級的 Node.js 服務端框架，其受到了 Hapi、Restify 以及 Express 的啟發，不過在效能評測上卻遠遠優於 Hapi 或者 Express，僅次於原生的 http.Server()。
巔峰人生
- 5 年，從新手程式媛到研發總監，如何獲得跨越式的成長路徑？：本文是百度外賣技術總監張燦在二叉樹 Live 上的分享，介紹了自己對於技術領域的轉型中的轉型動機分析、轉型問題的應對，如何應對技術發展的瓶頸期，從實習生到研發總監的升級之路在歷經的初級菜鳥、資深技術、技術管理等相關方面的感悟與經驗總結。
前端之巔
「前端之巔」是InfoQ旗下關注前端技術的垂直社群，加入前端之巔學習群請關注「前端之巔」公眾號後回覆“加群”。投稿請發郵件到editors@cn.infoq.com，註明“前端之巔投稿”。
