前端每週清單第 56 期: D3 5.0，深入 React 事件系統，SketchCode 介面生成

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

前端每週清單專注大前端領域內容，以對外文資料的蒐集為主，幫助開發者瞭解一週前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源專案、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID: frontshow），及時獲取前端每週清單。

新聞熱點

國內國外，前端最新動態

D3 5.0: D3 5.0 作為大版本更新，引入了部分不向後相容的特性更新。該版本開始使用 Promise 來替代傳統的非同步回撥以進行資料載入，Promise 能夠大大簡化非同步程式碼的結構，特別是那些支援 await 與 async 的瀏覽器。此外，該版本還使用了 Fetch API 替代傳統的 XMLHttpRequest 物件，即使用 d3-fetch 替代 d3-request。更多更新特性介紹請檢視原文。
Java 10 正式釋出，帶來了這些新特性: 北京時間 3 月 21 日，Oracle 官方宣佈 Java 10 正式釋出。這是 Java 大版本週期變化後的第一個正式釋出版本。需要注意的是 Java 9 和 Java 10 都不是 LTS 版本。和過去的 Java 大版本升級不同，這兩個只有半年左右的開發和維護期。而未來的 Java 11，也就是 18.9 LTS，才是 Java 8 之後第一個 LTS 版本。Java 10 提供了愈百項新特性，譬如 var 區域性變數型別推斷、統一的垃圾回收介面等。

步步為營，掌握基礎技能

使用 Flutter SDK 開發簡單的加密貨幣資訊應用: Flutter 是 Google 最新開源的用於開發 Android 與 iOS 跨平臺應用的開源工具集；其使用 Dart 程式語言，並且能夠直接編譯為原生程式碼，因此其能夠在程式碼複用性與效能之間達成平衡。本教程中，作者循序漸進地介紹如何使用 Flutter 來構建展示當前不同加密貨幣價格的應用，並且針對初學者介紹了 Flutter 架構與 Dart 語法基礎。

2018 React.js 全面指南: 本文最早寫於 2015 年，此篇則是基於最新的 React 16.3 版本進行的更新，包含了最新版本中的各個特性。作者希望在本文中談及 React 的大部分核心方面，包括了：JSX, Virtual DOM, React.Component, state, Component LifeCycle, Events 等。更多相關內容參考現代 Web 開發--React 篇。

React Apollo 2.1 介紹: 近日，React Apollo 釋出了 2.1 版本，大幅提升了使用 GraphQL 開發 React 應用的體驗。該版本提供了新的 Render Prop API 以及更強力的 TypeScript 支援，並且優化了說明文件。本文中，我們將會對如下新特性進行介紹：基於 Query 的資料抓取，使用 Mutation 更新資料，利用 ApolloConsumer 簡化本地狀態等。更多相關內容參考現代 Web 開發--React 篇。

立足實踐，提示實際水平

Typescript 2.8 React 元件開發模式: TypeScript 是非常優秀的 JavaScript 靜態型別擴充套件，本文則在常見的 React 開發模式的基礎上，使用 TypeScript 2.8 實現了常見的模式：Stateful, Stateless, Default Props, Render Callbacks, Component Injection, Generic Components, High Order Components, Controlled Components。更多相關內容參考 React DevPractices Links。
React 應用中使用的不同動畫庫比較: 優雅的動畫是 Web 站點體驗性的重要保障，現在已經有了很多介紹使用方式、使用案例、適用場景的文章。本文則是對於常見的動畫庫進行了橫向對比，從而幫助開發者更好地針對自身的需求選擇不同的動畫庫，包括了以下維度的考量：專案的維護情況如何，入手的難易程度如何，語法如何，效能如何等等。更多相關內容參考 Awesome Links。
CSS Grid 漸進式實踐: 上個月我們重新設計了 Thomasnet.com，並且使用 CSS Grid 作為主要的佈局方式。本文即是 CSS Grid 漸進式實踐的分享： CSS Grid 語法速覽以及技巧分享，CSS Grid 與 Flexbox 對比，CSS Grid 基礎以及瀏覽器的相容性保障。更多相關內容參考現代 Web 開發--基礎篇。

深度思考，昇華開發智慧

React 與 React Native 事件系統詳解: 現在已經有了很多介紹 React 事件系統的文章，不過鮮有介紹它們內部工作原理的。本文作者一直從事著 React Native 開發，並在本文中分享了其閱讀相關原始碼後整理得到的理解。本文依次介紹了 React 事件系統概覽、事件接收與管理機制、EventPluginHub 等內容；更多相關內容參考現代 Web 開發--React 篇。
關於圖片壓縮的考量: 在之前的討論中，我們關注過如何使用 Compressive Images 來壓縮圖片尺寸：即在降低圖片清晰度的同時，將其設計稿的尺寸增大，這樣經過瀏覽器自動壓縮之後，其視覺效果相差無二。這種方式在測試用例中能夠帶來 50% 的體積減少，不過這種方式也會帶來更大的記憶體消耗。更多相關內容參考現代 Web 開發--基礎篇。
SketchCode: 使用深度學習自動化前端開發: 本文作者構建了某個深度學習模型，能夠從使用者手繪的設計草稿中，生成可用的 HTML 網站；作者希望能夠嘗試利用這種方式來簡化現在的設計流程。本文依次介紹了 SketchCode 的創意來源與設計理念，如果獲取到有效的資料集，如何將圖片處理為手繪模式，如何設計神經網路架構以及如何進行模型訓練等內容。更多相關內容參考人工智慧與深度學習實戰。

樂於分享，共推前端發展

Driver.js: Driver.js 是強大的，輕量級，使用原生 JavaScript 引擎開發的頁面使用者關注點。Driver.js 並不僅僅是另一個指南性質的庫，其的使用者場景還是非常廣泛的，能夠用於任何需要為頁面構建浮層的情況，譬如當使用者需要與某些元素互動而隱藏其他元素的場景。
brain.js: brain.js 是基於 JavaScript 實現的輕量級神經網路（Neural Networks）庫，其提供了非常簡明易用的介面，並且支援非同步訓練。目前官方提供了識別顏色常量、簡單字母識別、利用 RNN 編寫簡單的句子等示範，可以自己嘗試一下。
dejavu: dejavu 是新的 ElasticSearch Web 管理介面，不同於 Kibana 這樣服務端渲染並且響應較差的庫；dejavu 取樣了完全的客戶端渲染方式，這也賦予了其便捷部署的能力，從 Github Pages，Chrome 外掛到 Docker 映象。dejavu 並且提供了 JSON 與 CSV 檔案的匯入匯出功能，並能夠自定義表格頭，以增強其靈活性。

雅虎研究院——如何從輝煌到失敗？: 雅虎是最早成功的網際網路公司之一，也是最早意識到需要把基礎研究，特別是機器學習以及人工智慧研究，應用到實際產品中的公司。雅虎從很早就開始招聘和培養研究型人才，雅虎研究院就是在這個過程中應運而生的。今天我就來說一說雅虎研究院的歷史，以及過去十多年間取得的成就，聊一聊如何通過引進高階人才，迅速構建起一支世界級的研發團隊。當然，也會聊一聊研究院的衰落。高階研發機構對於企業而言往往是錦上添花的事情，在整個公司產品和視野都欠缺的情況下，也往往避免不了最後衰敗的結局。

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