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

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

前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點；分為新聞熱點、開發(fā)教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單。

國內(nèi)國外，前端最新動態(tài)

React 就開源許可證風波進行回復(fù)：數(shù)周前，Apache 基金會決定禁止旗下項目使用 React，因為其在標準的 BSD 許可證之外添加了專利聲明；此舉引發(fā)了社區(qū)的廣泛討論，希望 React 能夠更新其開源許可證。經(jīng)過數(shù)周的討論，近日 Facebook 正式做出了回復(fù)，不過令人遺憾的是最終還是拒絕更新許可證，以避免未來可能遇到的專利沖突；Facebook 在開源許可證中聲明，使用 React 進行開發(fā)的商業(yè)項目，不可以專利反訴 Facebook ，也可以查看此篇文章或者社區(qū)的討論了解更多信息。

Bootstrap 4 Beta 發(fā)布：經(jīng)過兩年的開發(fā)，Bootstrap 4 Beta 版本終于發(fā)布；該版本中值得注意的變化包括，從 Less 遷移到了 Sass、布局系統(tǒng)幾乎全部遷移到了 Flexbox、優(yōu)化了卡片的使用體驗、自定義了 Normalize.css、放棄了對于 IE8 與 IE9 的支持、復(fù)寫了幾乎所有的 JavaScript 插件、提升了 Tooltip 等使用體驗等。

Node.js 8.4.0 發(fā)布：本周 Node.js 8.4.0 版本發(fā)布，其重要的特性變化包括，引入內(nèi)建的 http2 實驗支持、允許在 inspector 控制臺中查看 require()、更新了 N-API、修復(fù)了 Stream 中存在的部分錯誤、util.format 提供了新的占位符等。

ESLint 4.5.0 發(fā)布：近日發(fā)布的 ESLint 4.5.0 版本是對于 ESLint 的小版本更新，引入了部分新的特征支持與錯誤修復(fù)。新版本完善了對于 indent 規(guī)則、new.target 表達式以及 NaN 的支持，并且修復(fù)了 junit 結(jié)果以及 verifyAndFix 參數(shù)的錯誤。

步步為營，掌握基礎(chǔ)技能

Preact：輕巧快速的 React 替代：Preact 是提供了兼容 React ES6 API 的輕量級前端庫，Preact 本身選擇了非常精巧的實現(xiàn)模式，避免了 React 中因為過度工程化帶來的部分缺陷。本文著眼于介紹 Preact 的基礎(chǔ)用法，從 Preact 與 React 以及常見的替代庫的對比、Preact 與 React 在使用上的區(qū)別、如何使用 preact-compat 來無縫替換 React 到使用 preact-cli 快速開發(fā)項目等相關(guān)知識；更多 React 相關(guān)資料參考這里。

React 基礎(chǔ)概念縱覽：本文并不會介紹 React 是什么或者為什么要學習 React，而是希望能夠在單篇文章內(nèi)，對實用的 React 相關(guān)概念進行介紹；讓那些對 DOM API 有所了解的開發(fā)者快速上手開發(fā) React。本文依次介紹了 React 組件化的設(shè)計理念、JSX 到底是啥以及在 JSX 中如何使用 JavaScript、如何利用 JavaScript 類來編寫 React 組件、如何處理用戶響應(yīng)事件、如何為組件編寫 Story、如何設(shè)置私有狀態(tài)等內(nèi)容；更多 React 相關(guān)資料參考這里。

Chrome DevTools 進階指南：Chrome DevTools 是非常強大的開發(fā)工具，而本文則是以數(shù)十張動圖的方式細致生動地介紹了如何使用 Chrome DevTools 進行常見的開發(fā)調(diào)試。本文涉及的內(nèi)容包括了如何進行 CSS 覆蓋率分析、如何進行 CPU 使用率分析、如何不使用擴展而進行瀏覽器截屏、如何進行 Profiling、如何進行時間軸回溯等內(nèi)容；更多 Web 調(diào)試相關(guān)資料參考這里

Flow 0.53.0 引入更完善的 React 支持：在早期的 Flow 版本中，其主要還是針對 React.createClass() 進行代碼檢測；在近日發(fā)布的 0.52.0 版本中，F(xiàn)low 引入了更加完善的 React 支持，其最大的區(qū)別在于 Flow 開始完全支持基于 React.Component 類繼承的組件定義方式。此外，本文還介紹了如何為 React Children、HoC 等實踐模式添加靜態(tài)類型檢測；更多 Flow 相關(guān)資料參考這里。

將現(xiàn)有的 Angular 應(yīng)用轉(zhuǎn)化為 PWA：本教程將會介紹如何將現(xiàn)有的 Angular 應(yīng)用逐步地轉(zhuǎn)化為 Progressive Web App，該教程適用于任何基于 @angular/cli 命令行工具創(chuàng)建的項目。本文首先介紹了 Service Worker 的作用、如何在項目中集成 Service Worker、如何創(chuàng)建自定義的 App Manifest；然后討論了如何管理離線特征，最后說明了如何利用 Google LightHouse 進行應(yīng)用的性能、可用性與最佳實踐的測試，以及如何提升應(yīng)用的性能。

立足實踐，提示實際水平

React Native 中可共享的元素變換：本文著眼于討論如何構(gòu)建能夠同時運行在 Android 與 iOS 應(yīng)用中的 React Naive 動畫；以常見的列表詳情頁動畫切換為例，首先介紹了動畫過程中幀的設(shè)計，然后介紹了 Animated 庫及基礎(chǔ)的語法，并且討論了潛在的性能瓶頸以及如何使用 useNativeDriver；最后介紹了如何在變換過程中隱藏源與目標圖像，以及如何實現(xiàn)返回按鈕的功能。更多 React Native 相關(guān)資料參考 這里。

探索 ReactJS 中的 CSS 架構(gòu)：本文著眼于討論 React 開發(fā)中常用的 CSS 架構(gòu)，從 BEM 命名開始談起，介紹其對于 CSS 模塊分割的意義以及實際場景下增強型的 BEM 用法；然后介紹了 React 中 BEM 的實踐。接下來本文討論了 CSS Modules，如何配置與使用 CSS Modules，以及如何進行組件分層的解決方案。該結(jié)構(gòu)背后的理念是通過以一種可伸縮的方式保持 CSS 架構(gòu)創(chuàng)建更好的 ReactJS 項目，可以支持成千上萬的組件和開發(fā)人員協(xié)同工作；然而本文的真正關(guān)鍵點在于打開你的思維，去適應(yīng)新事物。更多 React 相關(guān)資料參考這里。

Windows Edge 引入獨立渲染來保證順滑的 Web 體驗：獨立渲染能夠允許瀏覽器選擇性地將部分圖像渲染的工作分配給其他的 CPU 線程處理，從而保證用戶界面線程只需要分配最短的時間片來進行渲染操作。本文即是 Windows Edge 團隊分享它們利用獨立渲染來提高 Edge 瀏覽器性能體驗的經(jīng)驗分享，首先以圖片形象地比較了 EdgeHTML 15 與 EdgeHTML 16 在渲染流程上的異同，然后分析了圖片、SVG、Canvas 等界面元素在新的渲染機制下的表現(xiàn)。更多 Web 開發(fā)相關(guān)資料參考這里。

構(gòu)建混合渲染的 PWA：PWA Directory 最初是采用了純粹服務(wù)端渲染的 PWA 應(yīng)用，它對于搜索引擎地支持比較好。不過這種應(yīng)用并無法很好地進行客戶端路由跳轉(zhuǎn)，反而會帶來一些額外的性能損耗；本文則依次介紹了如何使用 JavaScript 來托管路由跳轉(zhuǎn)、如何利用 Service Worker 來進行數(shù)據(jù)緩存或者后臺操作等內(nèi)容。更多 PWA 相關(guān)資料參考這里。

構(gòu)建基于 Web Speech API 與 Node.js 的簡單 AI 聊天機器人：語音控制正在變得越來越流行，越來越多的智能手機使用者習慣使用 Siri 或者 Cortana 這樣的指南輔助工具來進行方便地命令操作。同時，Web 平臺也在變得不斷完善，我們也可以用 Web Speech API 來創(chuàng)建最小可視化的交互友好的應(yīng)用。本文首先介紹了如何在瀏覽器中使用 Web Speech API，然后介紹了如何使用 Socket.io 以及 WebSocket 來進行實時通信與數(shù)據(jù)傳輸，最后介紹了如何在 Node.js 中集成來自 api.ai 的語音解析功能來將客戶端傳來的語音轉(zhuǎn)化為文本。更多 Node.js 相關(guān)資料參考這里。

深度思考，升華開發(fā)智慧

FreeWheel 前后端分離改造實踐：在現(xiàn)代前端應(yīng)用的工程實踐中，前后端分離的架構(gòu)會為兩端帶來更多的靈活性，已成為主流趨勢。與之相對的，傳統(tǒng)的單體 Web 應(yīng)用（Monolithic Web Application）則將前后端代碼放在一起，雖然耦合性較強，但在產(chǎn)品研發(fā)的特定階段仍具有較強的優(yōu)勢，早期的 ASP.NET、Java Spring MVC，以及 Ruby On Rails 都是單體應(yīng)用的代表性框架。 本文將以 FreeWheel 從單體應(yīng)用改造為前后端分離的實踐為例，著重介紹其間前端所遇到的挑戰(zhàn)和解決方案。

原生 JavaScript 中的 MVC 設(shè)計模式：近些年各種前端框架爭妍斗艷，百花齊放，每個前端框架都有其自身的設(shè)計理念與模式，并且使得開發(fā)者更多的關(guān)注于上層應(yīng)用開發(fā)；本文則返璞歸真，討論了如何基于原生的 JavaScript 去實現(xiàn) MVC 模式。本文首先介紹了 MVC 模式的概念，然后討論了展示一只企鵝需要分成幾步：構(gòu)建用于連接視圖與模型的 Controller、構(gòu)建用于處理數(shù)據(jù)的 Model 以及構(gòu)建用于將數(shù)據(jù)渲染到界面上的 View 層。更多 JavaScript 相關(guān)參考這里。

構(gòu)建 Web VR 虛擬購物體驗的實踐：本文是來自 Shopify 的工程師，分享的如何使用 WebVR 提供交互式虛擬購物體驗的實踐。本文首先分析了目前 VR 技術(shù)的發(fā)展現(xiàn)狀以及主流的 VR 設(shè)備，然后介紹了如何將現(xiàn)有的產(chǎn)品轉(zhuǎn)化為 3D 形式，接下來分享了目前 WebVR 的開發(fā)體驗，以及對于 A-frame、Clara.io 以及 PlayCanvas 等常見的 VR 開發(fā)框架工具的技術(shù)選型考量。最后，本文還討論了 3D/AR/VR 等技術(shù)發(fā)展的未來；更多 WebVR 相關(guān)資料參考這里。

為什么我們選擇了 GraphQL：本文是來自 Universe 的工程師分享的其內(nèi)部進行服務(wù)端應(yīng)用程序開發(fā)的技術(shù)選型考量，主要是對于選擇 GraphQL 之后的實踐優(yōu)劣分析。本文依次討論了對于強客戶端協(xié)議產(chǎn)生的問題與解決方案、如何進行領(lǐng)域?qū)映橄?、類型化的請求與響應(yīng)接口、如何使用 Apollo Optics 進行請求劃分優(yōu)化、如何合理地構(gòu)建接口文檔等內(nèi)容；更多 GraphQL 相關(guān)資料參考這里。

理解 V8 字節(jié)碼：V8 是由 Google 開源的 JavaScript 引擎，目前在 Chrome、Node.js 等許多的應(yīng)用程序中得到廣泛應(yīng)用，本文著眼于介紹 V8 中使用的字節(jié)碼格式。本文首先介紹了字節(jié)碼的基本概念與 V8 的執(zhí)行流程，然后介紹了典型的 V8 字節(jié)碼的組成：LdaSmi、Star r0、LdaNamedProperty、Add r0 等常見的指令語句；更多 V8 相關(guān)資料參考這里。

樂于分享，共推前端發(fā)展

Spikenail：Spikenail 是面向 Node.js 的支持 GraphQL API 語法的框架，它允許開發(fā)者便捷地構(gòu)建 GraphQL 接口；Spikenail 內(nèi)置了對于 ES7 語法特性以及 GraphQL 的支持，允許通過實體類的方式快速描述嵌套關(guān)系、隔離域、自定義角色等訪問控制。

esprint：esprint 借鑒了 flow 的設(shè)計理念，允許以多線程方式運行 linting 引擎而提升 eslint 的效率。esprint 會啟動服務(wù)端進程來緩存每個文件的 lint 結(jié)果，使用 watcher 來監(jiān)控文件的變更情況，以保證只對發(fā)生變化的文件進行檢測；更加詳細的介紹也可以參考這篇博客。

Backpack：Backpack 是受到 create-react-app、Next.js、Nodemon 啟發(fā)的，面向 Node.js 項目的最小化構(gòu)建工具。Backpack 允許我們創(chuàng)建零配置的 Node.js 項目，并為其添加文件監(jiān)控、熱加載、編譯以及打包等常見的功能；Backpack 還允許我們方便地添加自定義的 Babel 等配置。

Puppeteer：Puppeteer 是 Google Chrome 團隊開源的面向 Node.js 的，基于 DevTools 協(xié)議的遠程 Headless Chrome 控制庫，它可以生成網(wǎng)頁截圖、PDF、抓取單頁應(yīng)用與網(wǎng)頁內(nèi)容、進行自動化表單提交、界面測試與模擬鍵盤輸入等功能。

要怎樣努力，才能修煉成一個架構(gòu)師？：本文是七牛云高級副總裁、首席架構(gòu)師李道兵在大咖說的分享，講述了自身對于架構(gòu)師養(yǎng)成之路與自我修養(yǎng)的認知。本文討論了未來的編程學習、自身從化學專業(yè)到軟件行業(yè)切換的感想、年輕程序員應(yīng)該如何成長、如何在團隊中脫穎而出、如何做好架構(gòu)等內(nèi)容。

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

Web 前端入門與工程實踐的前端每周清單列表。

前端每周清單第 24 期：React 16 中異常處理與 Fiber 實戰(zhàn)、Vue 圖表與 jQuery 插件、V8 Turbofan 性能優(yōu)化

前端每周清單第 26 期：Node.js 微服務(wù)實踐，Vue.js 與 GraphQL，Angular 組件技巧，HeadlessChrome 攻防