前端每週清單第 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，註明「前端之巔投稿」。