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

前端每週清單第 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，註明「前端之巔投稿」；或者能夠閱讀往期文章：

• Web 前端入門與工程實踐的前端每週清單列表。
• 前端每週清單第 24 期：React 16 中異常處理與 Fiber 實戰、Vue 圖表與 jQuery 插件、V8 Turbofan 性能優化
• 前端每週清單第 26 期：Node.js 微服務實踐，Vue.js 與 GraphQL，Angular 組件技巧，HeadlessChrome 攻防