前端每週清單專注前端領域內容，以對外文資料的蒐集為主，幫助開發者瞭解一週前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源專案、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每週清單。
新聞熱點
國內國外，前端最新動態
React 16.1.0 釋出: 本週 React 16.1.0 版本釋出，自該版本開始 React 不再發布到 Bower，而是採用 unpkg 來映象存放 UMD 構建版本；那些依賴於 Bower 進行依賴管理的開發者只能選擇使用老的版本。此外該版本中還修復了 UMD 構建中，異常全域性變數的錯誤；並且為實驗性的 React Call Return 模組新增了父子通訊的介面。
Node.js 9.1.0 釋出: 本週 Node.js 9.1.0 版本釋出，整合了一系列的提交；值得注意的變化包括 NODE_OPTIONS 環境變數開始支援 --stack-trace-limit 選項，OpenSSL 更新到了 1.0.2m，對於 http 模組開始支援 103 Early Hints 狀態碼，並且修復了 connect 事件處理器溢位的漏洞。
開發教程
步步為營，掌握基礎技能
OpenAPI 與 gRPC 橫向比較: OpenAPI（原 Swagger） 是構建網路 API 的兩種不同方式，不過如果你瞭解過這兩種技術方案，你會發現二者也有很多的共通之處，本文即是對 OpenAPI 與 gRPC 進行了詳細的闡述與對比。OpenAPI 是用於描述 REST API 的語言，其提供了規範的 API 描述格式，預設基於 HTTP 進行資料互動並且使用 JSON 格式來表示資料；這種規範性也就使得基於 Schema 的程式碼生成更容易實現。而 gRPC 則源自 Google，同樣提供了介面描述格式，其預設使用 HTTP/2 進行資料互動，並且使用 Protocol Buffer 作為資料格式，其相較於 OpenAPI 會更為嚴格。更多 API 相關資料參考這裡。
HTML 實戰系列教程: 本系列作者曾寫過多篇 HTML 教程，為了更好地幫助初學者掌握 HTML 相關知識，作者在將之前的知識總結為了本系列中的數篇文章。本系列教程包含了 HTML 的基礎語法、HTML 文件結構、HTML 標籤基礎型別、連結，圖片與文件路徑、HTML 元素的封裝、HTML 中的列表與導航等內容，如果希望有更深入的瞭解還可以檢視文件中推薦閱讀的內容；更多 Web 基礎教程檢視這裡。
Angular 5 特性概述: Angular 5（代號為 Pentagonal-Donut） 近日正式釋出，其不僅帶來了新的功能特性，還包含了很多致力於提升 Angular 應用體積與執行效能的內部改變；本文即是對其特性進行詳細介紹。效能方面的提升包括了 Angular CLI v1.5 中預設啟用優化器、Angular 編譯器優化、不再需要 intl 與 Reflect Polyfill 等，功能特性方面的提升包括了 updateOn 表單域、Router Events、Service Worker 等；更多 Angular 相關資料參考這裡。
滲透測試之子域名列舉詳解: 掌握常見的網路安全與滲透測試相關知識，也是前端開發者的進階要求之一；本文即是介紹滲透測試中的子域名列舉的實戰技巧。所謂的子域名列舉，顧名思義，即是在給定某個域名的情況下獲取到其所有的關聯子域名，從而為下一步的滲透測試提供資訊支撐；本文主要介紹了通過 Google 等搜尋引擎、通過第三方 DNS 資料庫、通過證照伺服器、通過字典爆破、通過排列置換等等方式來列舉子域名。更多滲透測試相關資料參考這裡。
工程實踐
立足實踐，提示實際水平
基於 Realm 的 Electron 高效能跨程式資料互動: Realm 在 iOS、Android、React Native 等原生應用或者混合應用開發中提供了，便捷強大的資料儲存解決方案，而現在 Realm 也針對 Electron 中的跨程式（主程式與渲染程式）資料互動給出了自己的方案。與 Slack 選擇的 electron-redux 這種 Redux 模式的跨程式資料互動不同的是，Realm 使用了 Multi-Version Concurrency Control 架構，來保證多執行緒的併發控制。這種架構相較於 electron-redux 能夠帶來接近原生的效能表現，此外 Realm 還提供了響應式的能力，允許開發者監聽某個物件並且在物件發生變化時進行響應式操作；更多 Electron 相關資料參考這裡。
Gitlab 使用 Vue.js 的年度總結: 時光易逝，歲月如梭，不覺之間 Gitlab 已經使用了一年多的 Vue.js，其對於 Vue.js 應用開發也有了更深刻的認識，本文即是 Gitlab 對於這一年的使用感悟的分享。就像 Scala，Vue.js 並非一錘子買賣，當我們正確使用它時，它能夠給予優秀地體驗反饋；這一年來 Gitlab 也遇到了，並且嘗試去解決了很多的問題。作者在接下來的章節中討論了使用 VueX 進行狀態管理、編寫高質量的程式碼、如何提升應用效能等內容；更多 Vue.js 相關資料參考這裡。
BBC 是如何進行網頁釋出的: 本文是 BBC 線上技術委員會的首席架構師 Neil Craig 分享的，BBC 是如何將它們大部分的網頁釋出到因特網上。BBC 服務於全世界超過 230 個國家和地區，為了保證全世界使用者的使用體驗，BBC 在其釋出流程上採用了一系列的優化策略。其對於資源的請求總量與併發請求數進行了分析，並且將下屬的欄目劃分到了不同的目錄下以進行不同的峰值應對；對於不同國家和地區的使用者，負載均衡會將其轉發到不同的 CDN 或者應用伺服器中，並且對於不同型別的資源也進行了區分對待。更多 Web 工程實踐相關資料參考這裡。
阿里雲 11·11：DataV的資料視覺化之道: 從 2012 年起，阿里每年的雙 11 大促都會推出一個大屏，以多種生動的展示方式實時地顯示交易情況。實時資料大屏，它的特點是各種大：螢幕大、資料量大、展示資訊量大，可以說是資料視覺化的聖盃。作為雙 11 資料大屏的幕後功臣，DataV 在經歷數個大型專案後幾乎試遍技術沉澱的所有路徑：開原始碼、產品化、打包解決方案、平臺化……應用場景也從雙 11 電商作戰，擴充套件到智慧城市、智慧交通等諸多領域。他們一路走來的歷程和思索，值得後來者借鑑參考。更多資料視覺化資料參考這裡。
深度閱讀
深度思考，昇華開發智慧
React Native 與原生應用的量化比較: 現在，從事移動應用開發的程式設計師可能都會聽過 React Native，這個由 Facebook 開源的優秀的跨平臺開發解決方案；不過很多公司在進行技術選型時可能還較難在 Swift 原生開發與 React Native 做恰當的抉擇。本文即是從理論到實踐，多方位、立體地、量化地對 React Native 與 Swift 原生應用進行比較。作者分別使用 Swift 與 React Native 實現了一個簡單的應用，包含了常見的登入、列表、地圖等功能，而後又分別針對各個頁面，從 CPU、GPU、記憶體使用等多個角度進行了量化比較。最後作者又從各方面比較了 React Native 的優勢與不足；更多 React Native 相關資料參考這裡。
GraphQL 技術棧漫遊: GraphQL 開源已兩年有餘，其相關的生態圈也呈現指數級的增長，成百上千的公司在生產環境中使用了 GraphQL；本文即是對於 GraphQL Summit 2017 中的演講的總結。本文首先概述了 GraphQL 的特別之處，然後分析了 GraphQL 開發中快取、追蹤、模式拼接等方面地實踐技巧與相關開源專案；更多 GraphQL 相關資料參考這裡。
揭祕 V8 Web 工具效能評測: JavaScript 的效能表現，一直是 V8 團隊關注的核心問題之一；本文中 V8 團隊討論了它們工作中用於定位與修復效能瓶頸的， JavaScript Web 工具效能評測方法。所謂的 Web 工具效能評測套裝，源自對於日常開發中常用的基於 Node.js 的工具使用場景的歸納，其著重關注 JavaScript 核心效能，忽略 Node.js 相關的 IO 或者其他額外的互動。其典型的測試用例包括了使用 es2015 的 Babel 轉化器效能、對於 Lodash 等常見輸入源的 Babylon 的效能、Webpack 使用的 acorn 直譯器效能、基於 TypeScript-Angular 專案的 TypeScript 編輯器效能等。更多 V8 相關資料參考這裡。
為什麼我還在使用 jQuery: 現代 Web 開發中，jQuery 一直是傳統開發的代名詞，開發者喜歡談論 TypeScript、ECMAScript 2015+、React、Vue.js 等等時髦的名詞；作者則是在本文中討論了為何他現在還是會繼續使用著 jQuery。很多對於 jQuery 的詬病在於其增加了網站的體積，不過目前 jQuery 僅有 27KB，並且在通過 CDN 方式分發並不會增加站點壓力；而 jQuery 的輔助方法還是能夠幫我們提升程式碼的編寫效率與效能。接下來作者還討論瞭如何避免錯誤的程式碼、編寫可擴充套件的 jQuery 程式碼、如何將 jQuery 整合到其他框架、在什麼情況下要避免使用 jQuery 等內容。
開源專案
樂於分享，共推前端發展
cube-ui: cube-ui 是由滴滴開源的，基於 Vue.js 實現的精緻移動端元件庫，由滴滴內部元件庫精簡提煉而來，歷經考驗，並且每個元件都有充分單元測試，為後續整合提供保障。它以迅速響應、動畫流暢、接近原生為目標，在互動體驗方面追求極致；遵循統一的設計互動標準，高度還原設計效果；介面標準化，統一規範使用方式，開發更加簡單高效，並且支援按需引入和後編譯，輕量靈活；擴充套件性強，可以方便地基於現有元件實現二次開發。
js2flowchart: js2flowchart 能夠將 JavaScript 程式碼表示為 SVG 格式的流程圖，能夠同時在瀏覽器於 Node.js 環境中執行；js2flowchart 允許我們隨時根據程式碼的變化生成關聯的邏輯流程圖，從而方便展現與陳述程式碼邏輯。
Chimee: Chimee 是元件化的 H5 播放器框架，支援 mp4、m3u8、flv 等多種格式，由奇舞團視訊雲前端組研發。它幫我們解決大部分的相容性問題，能夠解決包括全屏、自動播放、內聯播放、直播解碼等常見視訊需求；通過元件化開發，能滿足業務方快速迭代、灰度釋出等要求，讓開發者能夠輕鬆快捷地完成視訊場景的開發。
NBA Go: NBA Go 是面向 NBA 粉絲的命令列工具，能夠在命令列中檢視比賽安排、比賽結果、選手資訊等內容，方便程式設計師們隨時掌握比賽資訊。
巔峰人生
- 谷歌大腦負責人 Jeff Dean ：讓機器學會學習，專用硬體很有前景: 提到谷歌大腦，一定要提到它背後的“大腦” —— Jeff Dean ，他於 1999 年加入 Google ，帶領團隊完成了一系列令人矚目的工作，如支援谷歌執行的超大規模計算框架 MapReduce ，以及你正在使用的 TensorFlow 等等。作為谷歌大腦的負責人，他仍在進行一系列開創性的研究工作。近日，Jeff Dean 接受了 Gigaom 的訪問，談及了這些工作和未來的主攻方向，也分享了他個人對於通用人工智慧、機器學習以及人工智慧應用的一些見解。
前端之巔
「前端之巔」是 InfoQ 旗下關注前端技術的垂直社群，加入前端之巔學習群請關注「前端之巔」公眾號後回覆“加群”。投稿請發郵件到 editors@cn.infoq.com，註明“前端之巔投稿”。
