摘要：新聞熱點(diǎn)國內(nèi)國外，前端最新動(dòng)態(tài)就開源許可證風(fēng)波進(jìn)行回復(fù)數(shù)周前，基金會(huì)決定禁止旗下項(xiàng)目使用，因?yàn)槠湓跇?biāo)準(zhǔn)的許可證之外添加了專利聲明此舉引發(fā)了社區(qū)的廣泛討論，希望能夠更新其開源許可證。

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

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

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

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

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

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

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

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

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

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

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

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

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

立足實(shí)踐，提示實(shí)際水平

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

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

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

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

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

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

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

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

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

為什么我們選擇了 GraphQL：本文是來自 Universe 的工程師分享的其內(nèi)部進(jìn)行服務(wù)端應(yīng)用程序開發(fā)的技術(shù)選型考量，主要是對(duì)于選擇 GraphQL 之后的實(shí)踐優(yōu)劣分析。本文依次討論了對(duì)于強(qiáng)客戶端協(xié)議產(chǎn)生的問題與解決方案、如何進(jìn)行領(lǐng)域?qū)映橄蟆㈩愋突恼?qǐng)求與響應(yīng)接口、如何使用 Apollo Optics 進(jìn)行請(qǐng)求劃分優(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)置了對(duì)于 ES7 語法特性以及 GraphQL 的支持，允許通過實(shí)體類的方式快速描述嵌套關(guān)系、隔離域、自定義角色等訪問控制。

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

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

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

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

「前端之巔」是InfoQ旗下關(guān)注前端技術(shù)的垂直社群，加入前端之巔學(xué)習(xí)群請(qǐng)關(guān)注「前端之巔」公眾號(hào)后回復(fù)“加群”。投稿請(qǐng)發(fā)郵件到[email protected]，注明“前端之巔投稿”；或者可以閱讀往期文章：

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

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

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