摘要：新聞熱點國內國外，前端最新動態就開源許可證風波進行回復數周前，基金會決定禁止旗下項目使用，因為其在標準的許可證之外添加了專利聲明此舉引發了社區的廣泛討論，希望能夠更新其開源許可證。

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

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