前端每週清單第 39 期: OpenAI 與 gRPC, Gitlab 的 Vue 年度總結，GraphQL 技術棧漫遊

前端每週清單專一前端領域內容，以對外文資料的蒐集爲主，幫助開發者瞭解一週前端熱點；分爲新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峯人生等欄目。歡迎關注【前端之巔】微信公衆號（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 播放器框架，支持 mp四、m3u八、flv 等多種格式，由奇舞團視頻雲前端組研發。它幫咱們解決大部分的兼容性問題，可以解決包括全屏、自動播放、內聯播放、直播解碼等常見視頻需求；經過組件化開發，能知足業務方快速迭代、灰度發佈等要求，讓開發者可以輕鬆快捷地完成視頻場景的開發。

• NBA Go: NBA Go 是面向 NBA 粉絲的命令行工具，可以在命令行中查看比賽安排、比賽結果、選手信息等內容，方便程序員們隨時掌握比賽信息。

巔峯人生

• 谷歌大腦負責人 Jeff Dean ：讓機器學會學習，專用硬件頗有前景: 提到谷歌大腦，必定要提到它背後的「大腦」 —— Jeff Dean ，他於 1999 年加入 Google ，帶領團隊完成了一系列使人矚目的工做，如支持谷歌運行的超大規模計算框架 MapReduce ，以及你正在使用的 TensorFlow 等等。做爲谷歌大腦的負責人，他仍在進行一系列開創性的研究工做。近日，Jeff Dean 接受了 Gigaom 的訪問，談及了這些工做和將來的主攻方向，也分享了他我的對於通用人工智能、機器學習以及人工智能應用的一些看法。

前端之巔

「前端之巔」是 InfoQ 旗下關注前端技術的垂直社羣，加入前端之巔學習羣請關注「前端之巔」公衆號後回覆「加羣」。投稿請發郵件到 editors@cn.infoq.com，註明「前端之巔投稿」。