前端每周清單第 30 期：WebVR 指南，Vue 代碼分割範式，理想的 React 架構特性

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

aHR0cDovL3dlaXhpbi5xcS5jb20vci9lMFFKRWNmRWhwcjVyWU55OXhGcA== (二維碼自動識別)