前端每週清單第 27 期：React Patent License 回覆，Shopify WebVR 購物，原生 JS MVC 設計，Flow 優化 React

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

前端每週清單專注前端領域內容，以對外文資料的蒐集為主，幫助開發者瞭解一週前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源專案、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每週清單。

新聞熱點

國內國外，前端最新動態

React 就開源許可證風波進行回覆：數週前，Apache 基金會決定禁止旗下專案使用 React，因為其在標準的 BSD 許可證之外新增了專利宣告；此舉引發了社群的廣泛討論，希望 React 能夠更新其開源許可證。經過數週的討論，近日 Facebook 正式做出了回覆，不過令人遺憾的是最終還是拒絕更新許可證，以避免未來可能遇到的專利衝突；Facebook 在開源許可證中宣告，使用 React 進行開發的商業專案，不可以專利反訴 Facebook ，也可以檢視此篇文章或者社群的討論瞭解更多資訊。
Bootstrap 4 Beta 釋出：經過兩年的開發，Bootstrap 4 Beta 版本終於釋出；該版本中值得注意的變化包括，從 Less 遷移到了 Sass、佈局系統幾乎全部遷移到了 Flexbox、優化了卡片的使用體驗、自定義了 Normalize.css、放棄了對於 IE8 與 IE9 的支援、複寫了幾乎所有的 JavaScript 外掛、提升了 Tooltip 等使用體驗等。
Node.js 8.4.0 釋出：本週 Node.js 8.4.0 版本釋出，其重要的特性變化包括，引入內建的 http2 實驗支援、允許在 inspector 控制檯中檢視 require()、更新了 N-API、修復了 Stream 中存在的部分錯誤、util.format 提供了新的佔位符等。
ESLint 4.5.0 釋出：近日釋出的 ESLint 4.5.0 版本是對於 ESLint 的小版本更新，引入了部分新的特徵支援與錯誤修復。新版本完善了對於 indent 規則、new.target 表示式以及 NaN 的支援，並且修復了 junit 結果以及 verifyAndFix 引數的錯誤。

開發教程

步步為營，掌握基礎技能

Preact：輕巧快速的 React 替代：Preact 是提供了相容 React ES6 API 的輕量級前端庫，Preact 本身選擇了非常精巧的實現模式，避免了 React 中因為過度工程化帶來的部分缺陷。本文著眼於介紹 Preact 的基礎用法，從 Preact 與 React 以及常見的替代庫的對比、Preact 與 React 在使用上的區別、如何使用 preact-compat 來無縫替換 React 到使用 preact-cli 快速開發專案等相關知識；更多 React 相關資料參考這裡。
React 基礎概念縱覽：本文並不會介紹 React 是什麼或者為什麼要學習 React，而是希望能夠在單篇文章內，對實用的 React 相關概念進行介紹；讓那些對 DOM API 有所瞭解的開發者快速上手開發 React。本文依次介紹了 React 元件化的設計理念、JSX 到底是啥以及在 JSX 中如何使用 JavaScript、如何利用 JavaScript 類來編寫 React 元件、如何處理使用者響應事件、如何為元件編寫 Story、如何設定私有狀態等內容；更多 React 相關資料參考這裡。
Chrome DevTools 進階指南：Chrome DevTools 是非常強大的開發工具，而本文則是以數十張動圖的方式細緻生動地介紹瞭如何使用 Chrome DevTools 進行常見的開發除錯。本文涉及的內容包括瞭如何進行 CSS 覆蓋率分析、如何進行 CPU 使用率分析、如何不使用擴充套件而進行瀏覽器截圖、如何進行 Profiling、如何進行時間軸回溯等內容；更多 Web 除錯相關資料參考這裡
Flow 0.53.0 引入更完善的 React 支援：在早期的 Flow 版本中，其主要還是針對 React.createClass() 進行程式碼檢測；在近日釋出的 0.52.0 版本中，Flow 引入了更加完善的 React 支援，其最大的區別在於 Flow 開始完全支援基於 React.Component 類繼承的元件定義方式。此外，本文還介紹瞭如何為 React Children、HoC 等實踐模式新增靜態型別檢測；更多 Flow 相關資料參考這裡。
將現有的 Angular 應用轉化為 PWA：本教程將會介紹如何將現有的 Angular 應用逐步地轉化為 Progressive Web App，該教程適用於任何基於 @angular/cli 命令列工具建立的專案。本文首先介紹了 Service Worker 的作用、如何在專案中整合 Service Worker、如何建立自定義的 App Manifest；然後討論瞭如何管理離線特徵，最後說明了如何利用 Google LightHouse 進行應用的效能、可用性與最佳實踐的測試，以及如何提升應用的效能。

工程實踐

立足實踐，提示實際水平

React Native 中可共享的元素變換：本文著眼於討論如何構建能夠同時執行在 Android 與 iOS 應用中的 React Naive 動畫；以常見的列表詳情頁動畫切換為例，首先介紹了動畫過程中幀的設計，然後介紹了 Animated 庫及基礎的語法，並且討論了潛在的效能瓶頸以及如何使用 useNativeDriver；最後介紹瞭如何在變換過程中隱藏源與目標影象，以及如何實現返回按鈕的功能。更多 React Native 相關資料參考這裡。
探索 ReactJS 中的 CSS 架構：本文著眼於討論 React 開發中常用的 CSS 架構，從 BEM 命名開始談起，介紹其對於 CSS 模組分割的意義以及實際場景下增強型的 BEM 用法；然後介紹了 React 中 BEM 的實踐。接下來本文討論了 CSS Modules，如何配置與使用 CSS Modules，以及如何進行元件分層的解決方案。該結構背後的理念是通過以一種可伸縮的方式保持 CSS 架構建立更好的 ReactJS 專案，可以支援成千上萬的元件和開發人員協同工作；然而本文的真正關鍵點在於開啟你的思維，去適應新事物。更多 React 相關資料參考這裡。
Windows Edge 引入獨立渲染來保證順滑的 Web 體驗：獨立渲染能夠允許瀏覽器選擇性地將部分影象渲染的工作分配給其他的 CPU 執行緒處理，從而保證使用者介面執行緒只需要分配最短的時間片來進行渲染操作。本文即是 Windows Edge 團隊分享它們利用獨立渲染來提高 Edge 瀏覽器效能體驗的經驗分享，首先以圖片形象地比較了 EdgeHTML 15 與 EdgeHTML 16 在渲染流程上的異同，然後分析了圖片、SVG、Canvas 等介面元素在新的渲染機制下的表現。更多 Web 開發相關資料參考這裡。
構建混合渲染的 PWA：PWA Directory 最初是採用了純粹服務端渲染的 PWA 應用，它對於搜尋引擎地支援比較好。不過這種應用並無法很好地進行客戶端路由跳轉，反而會帶來一些額外的效能損耗；本文則依次介紹瞭如何使用 JavaScript 來託管路由跳轉、如何利用 Service Worker 來進行資料快取或者後臺操作等內容。更多 PWA 相關資料參考這裡。
構建基於 Web Speech API 與 Node.js 的簡單 AI 聊天機器人：語音控制正在變得越來越流行，越來越多的智慧手機使用者習慣使用 Siri 或者 Cortana 這樣的指南輔助工具來進行方便地命令操作。同時，Web 平臺也在變得不斷完善，我們也可以用 Web Speech API 來建立最小視覺化的互動友好的應用。本文首先介紹瞭如何在瀏覽器中使用 Web Speech API，然後介紹瞭如何使用 Socket.io 以及 WebSocket 來進行實時通訊與資料傳輸，最後介紹瞭如何在 Node.js 中整合來自 api.ai 的語音解析功能來將客戶端傳來的語音轉化為文字。更多 Node.js 相關資料參考這裡。

深度閱讀

深度思考，昇華開發智慧

FreeWheel 前後端分離改造實踐：在現代前端應用的工程實踐中，前後端分離的架構會為兩端帶來更多的靈活性，已成為主流趨勢。與之相對的，傳統的單體 Web 應用（Monolithic Web Application）則將前後端程式碼放在一起，雖然耦合性較強，但在產品研發的特定階段仍具有較強的優勢，早期的 ASP.NET、Java Spring MVC，以及 Ruby On Rails 都是單體應用的代表性框架。本文將以 FreeWheel 從單體應用改造為前後端分離的實踐為例，著重介紹其間前端所遇到的挑戰和解決方案。
原生 JavaScript 中的 MVC 設計模式：近些年各種前端框架爭妍鬥豔，百花齊放，每個前端框架都有其自身的設計理念與模式，並且使得開發者更多的關注於上層應用開發；本文則返璞歸真，討論瞭如何基於原生的 JavaScript 去實現 MVC 模式。本文首先介紹了 MVC 模式的概念，然後討論了展示一隻企鵝需要分成幾步：構建用於連線檢視與模型的 Controller、構建用於處理資料的 Model 以及構建用於將資料渲染到介面上的 View 層。更多 JavaScript 相關參考這裡。
構建 Web VR 虛擬購物體驗的實踐：本文是來自 Shopify 的工程師，分享的如何使用 WebVR 提供互動式虛擬購物體驗的實踐。本文首先分析了目前 VR 技術的發展現狀以及主流的 VR 裝置，然後介紹瞭如何將現有的產品轉化為 3D 形式，接下來分享了目前 WebVR 的開發體驗，以及對於 A-frame、Clara.io 以及 PlayCanvas 等常見的 VR 開發框架工具的技術選型考量。最後，本文還討論了 3D/AR/VR 等技術發展的未來；更多 WebVR 相關資料參考這裡。
為什麼我們選擇了 GraphQL：本文是來自 Universe 的工程師分享的其內部進行服務端應用程式開發的技術選型考量，主要是對於選擇 GraphQL 之後的實踐優劣分析。本文依次討論了對於強客戶端協議產生的問題與解決方案、如何進行領域層抽象、型別化的請求與響應介面、如何使用 Apollo Optics 進行請求劃分優化、如何合理地構建介面文件等內容；更多 GraphQL 相關資料參考這裡。
理解 V8 位元組碼：V8 是由 Google 開源的 JavaScript 引擎，目前在 Chrome、Node.js 等許多的應用程式中得到廣泛應用，本文著眼於介紹 V8 中使用的位元組碼格式。本文首先介紹了位元組碼的基本概念與 V8 的執行流程，然後介紹了典型的 V8 位元組碼的組成：LdaSmi、Star r0、LdaNamedProperty、Add r0 等常見的指令語句；更多 V8 相關資料參考這裡。

開源專案

樂於分享，共推前端發展

Spikenail：Spikenail 是面向 Node.js 的支援 GraphQL API 語法的框架，它允許開發者便捷地構建 GraphQL 介面；Spikenail 內建了對於 ES7 語法特性以及 GraphQL 的支援，允許通過實體類的方式快速描述巢狀關係、隔離域、自定義角色等訪問控制。
esprint：esprint 借鑑了 flow 的設計理念，允許以多執行緒方式執行 linting 引擎而提升 eslint 的效率。esprint 會啟動服務端程式來快取每個檔案的 lint 結果，使用 watcher 來監控檔案的變更情況，以保證只對發生變化的檔案進行檢測；更加詳細的介紹也可以參考這篇部落格。
Backpack：Backpack 是受到 create-react-app、Next.js、Nodemon 啟發的，面向 Node.js 專案的最小化構建工具。Backpack 允許我們建立零配置的 Node.js 專案，併為其新增檔案監控、熱載入、編譯以及打包等常見的功能；Backpack 還允許我們方便地新增自定義的 Babel 等配置。
Puppeteer：Puppeteer 是 Google Chrome 團隊開源的面向 Node.js 的，基於 DevTools 協議的遠端 Headless Chrome 控制庫，它可以生成網頁截圖、PDF、抓取單頁應用與網頁內容、進行自動化表單提交、介面測試與模擬鍵盤輸入等功能。

巔峰人生

要怎樣努力，才能修煉成一個架構師？：本文是七牛雲高階副總裁、首席架構師李道兵在大咖說的分享，講述了自身對於架構師養成之路與自我修養的認知。本文討論了未來的程式設計學習、自身從化學專業到軟體行業切換的感想、年輕程式設計師應該如何成長、如何在團隊中脫穎而出、如何做好架構等內容。

前端之巔

「前端之巔」是InfoQ旗下關注前端技術的垂直社群，加入前端之巔學習群請關注「前端之巔」公眾號後回覆“加群”。投稿請發郵件到editors@cn.infoq.com，註明“前端之巔投稿”；或者可以閱讀往期文章：