前端每週清單第 33 期：React 16 發佈與特性介紹，Expo AR 教程，ExtJS 從崛起到沉寂

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

新聞熱點

國內國外，前端最新動態

• React 16 正式發佈：本週，期待已久的 React 16 正式發佈，帶來了一系列新特性與性能提高的同時，也正式將開源協議修改成了 MIT。React 16 中最大變更在於核心調和算法的徹底重寫，引入了所謂的 Fiber 算法。除此以外，React 16.0 中還容許 render 函數直接返回數組與字符串、提供了全新的異常處理機制、引入了 Portal 從而容許組件以優雅的方式將子元素渲染到組件外 DOM 結點中、優化了服務端渲染的性能表現、支持自定義的 DOM 屬性，而整個 React 包的體積也有了必定幅度的降低。

• GraphQL 相關開源協議更新：隨着 React 16.0 的正式發佈，GraphQL 標準也宣佈將開源協議修正爲 Open Web Foundation Agreement（OWFa）v1.0 ，從而確保來自其餘公司的開發者更好地協做完善協議。 同時 GraphQL.js 與 Relay 也更新爲了 MIT 開源協議，本週還發布了 Relay 1.4.1 版本。

• Enzyme 3.0 發佈，支持 React 16：Enzyme 是由 Airbnb 開源的 React 組件測試庫，隨着 React 16.0 版本正式發佈，Enzyme 也發佈了其 3.0 版本。在 3.x 版本中，Enzyme 一樣完全重寫了內部實現，從而解決其自發布以來存在的久爲詬病的一些問題，移除了對於 React 內部庫的依賴，使得 Enzyme 更加的靈活可用。

• GraphQL Playground 發佈：GraphQL 正在逐步改變 API 的設計與實現方法， 而爲了更好地調試與開發 GraphQL，GraphCool 開源了 GraphQL Playground。GraphQL Playground 基於 GraphiQL 構建，其在保留 GraphIQL 的文檔易讀性的同時，提供了更加順滑的文檔閱讀體驗；除此以外，爲了更好地適應團隊開發，GraphQL Playground 還引入了原子化 Schema 重載與基於 GraphQL Bin 的共享功能。

開發教程

步步爲營，掌握基礎技能

• Expo AR 簡明教程：新版本的 Expo 添加了 iOS 平臺上的 Augmented Reality API 支持，從而使得開發者可以利用熟悉的 Three.js 這樣的庫來開發 AR 場景應用，同時還能利用 Expo 提供的地理位置信息等原生接口來獲取信息。本文按部就班地介紹瞭如何利用 Expo 與 Three.js 開發簡單的 AR 應用，首先介紹了 WebGLRender 的用法與調試，而後討論瞭如何添加基礎的 AR 場景，最後還給出了完整應用的示例代碼。更多 React Native 相關資料參考這裏。

• React 16 中服務端渲染的新特性介紹：本文是對於近日發佈的 React 16 版本中提供的新服務端渲染 SSR 的特性進行了闡述，包括了數組、性能、流等內容。本文首先介紹了 React 15.x 以及以前版本中的服務端渲染寫法，而後介紹了 React 16 中引入的新 API 以及後向的兼容性，接下來討論了 React 16 服務端渲染策略的變化、可以生成更爲簡潔的 HTML、對於流傳遞的支持等待；更多 React 相關教程參考這裏。

• 在 NPM 上發佈自定義的 Vue.js 組件：當咱們利用 Vue.js 編寫了不錯的組件的時候，會但願將它分享給其餘開發者共同使用， 本文便是介紹如何將 Vue.js 組件打包而且發佈到 NPM 中。本文主要涉及如下內容：如何在打包中避免引入其餘依賴、如何使用 Webpack 構建針對瀏覽器與 Node 各自獨立的包、如何建立瀏覽器插件、package.json 中的重要配置、如何發佈到 NPM 等；更多 Vue.js 相關教程參考這裏。

• Mozilla CSS Grid 教程：本系列是由 Mozilla 出品的通俗易懂的 CSS Grid 教程，還介紹瞭如何使用 Firefox 最新版本的調試工具來便捷調試基於 CSS Grid 的佈局。 本文首先分享了 CSS Grid 的基礎術語概念，而後介紹了簡單的 Grid 的構建與 Firefox DevTools 的使用，接下來詳細介紹了 fr 尺寸、混合尺寸等不一樣的尺寸設置，最後還給出了標準的網頁佈局的例子。更多 CSS 相關教程參考這裏。

工程實踐

立足實踐，提示實際水平

• 編寫可讀的 Selenium 與 Node.js 自動化測試用例：如今不少的介紹如何利用 Node.js 與 Selenium 進行自動化測試的文章都專一於如何搭建測試環境與編寫基礎的測試用例， 而本文則專一於分享優雅的代碼片與一些最佳實踐的技巧，從而提高總體測試用例的可讀性與可維護性。本文主要討論了粗暴的使用 sleep 函數的不足，而且給出了利用 Promise 以等待元素出現、等待元素可見、等待元素可交互等實踐技巧；更多 Web 自動化測試相關教程參考這裏。

• Quri 的 GraphQL 實踐：GraphQL 秉持着 Schema First 的理念，本文則是 Quri 兩年以來 GraphQL 實踐的分享以及對於這個原則的理解與執行。 本文主要討論了利用 graphql-faker 來根據 Schema 構建測試數據、如何在平常的業務開發中貫徹 Schema First 的理念等內容；更多 GraphQL 相關教程參考這裏。

• 奇妙的 Mobx State Tree：本文是 MobX 的做者 Michel Weststrate 對於 Mobx State Tree 的介紹；如今已經有不少文章在討論 MobX 與 Redux 各自的優劣以及使用場景，本文也是從對比 Redux 與 MobX 入手，首先介紹了 MobX 的不足。MobX 只是中立、抽象的函數響應式數據流工具，並不是完整的應用狀態管理工具；而 MST 則在保留了響應式對象的易操做性的同時，將全局狀態存放在不可變的、結構化的、共享的狀態樹中。開發者可使用傳統的面向對象的方式，直接修改某個實例的屬性，MST 會自動地在後臺建立狀態快照與不可變的狀態樹；標準的 MST 模型由 model、views、actions 等幾個部分，同時支持自定義中間件。更多 MobX 相關教程參考這裏。

• TypeScript 在 Lyft 的應用實踐：可能不少人在初次接觸類型系統的時候，都會疑問於爲何須要引入額外的類型；可是相信不過多久，他們已經沒法離開類型系統了，本文則是 Lyft 使用 TypeScript 進行靜態類型檢測的實踐。本文依次討論了沒有靜態類型系統時常見的錯誤與引入類型系統以後帶來的生產力的提高，而後本文認真討論了 TypeScript 與 FlowType 各自的優劣，最後介紹了 TypeScript 的學習路徑與 Lyft 基於 TypeScript 開源的一些項目； 更多 TypeScript 相關教程參考這裏。

深度閱讀

深度思考，昇華開發智慧

• ExtJS：從崛起到沉寂：對於許多的開發者而言，ExtJS 還是很是好的開發企業級應用的平臺；而本文做者從 2006 年起到 2015 年一直活躍在 Sencha 社區中，爲社區的發展貢獻着本身的力量。而隨着 Sencha 被 IDERA 收購，做者有感而發編寫此文以盤點下 ExtJS 走過的風雨十年。本文從 2005 年開始談起，彼時 SPA 的潮流逐漸興起，Yahoo 發佈的 YUI 框架也成爲了一時之選；最初的時候 ExtJS 仍是 YUI-ext，算是對於 YUI 的實驗性擴充，後來隨着組件庫複雜度的增長，也正式獨立成爲了 ExtJS（Extensible JavaScript）。2010 年左右，Sencha 正式成立，吸納了 jQTouch、Raphel JS 以及許多的開源技術，造成了 Sencha Touch 等更加完善的社區；此時 ExtJS 4.0 也帶來了極大的革新，不過其性能問題也令社區出現了分化。最後的 ExtJS 6.0 則將 ExtJS 與 Sencha Touch 中優秀的部分整合起來，可是隨着 React.js 的蓬勃發展，ExtJS 的社區活躍度也在不斷降低，其將來也是猶未可知。

• Web 應用的重用策略：隨着產品線的擴充與產品複雜度的增長，咱們不可避免地須要在應用中集成來自其餘團隊或者開發組的模塊，乃至於完整的應用；本文則是介紹了三種不一樣的重用集成策略：利用 iframe 直接引入界面、重用整個 APP 組件、重用 UI 組件。 iframe 方式最爲簡單直接，可以較好地進行應用隔離，在整個技術棧不一樣、不須要重複認證、沒有數據交互的狀況下是不錯的選擇。而 APP 組件方式則在技術棧融合、動態尺寸、少許交互的狀況下使用；最後的 UI 組件方式則是最爲優雅的方式，可是也須要團隊統一的技術棧與編程規範。更多 Web 應用架構相關內容參考這裏

• 面試中所須要的技術與非技術指南：本文是對於程序員面試中常見的算法與前端領域的知識進行盤點，但願能幫助程序員更好地進行面試。本文依次討論瞭如何準備技術面試、按照主題分類的算法技巧與最佳實踐的問題、常見的前端面試問題與答案、頂級技術公司常見的面試形式、不一樣公司的行爲性問題、面試結束時候你能夠反問的優秀的問題。

• CSS font-display: Web 中字體渲染的將來：字體是 Web 開發中不可分割的重要部分，當某個 Web Font 不存在於用戶設備時，瀏覽器 須要開始下載對應的字體包；而在下載結束以前，瀏覽器須要決定如何處理相關文本的顯示方式，咱們即須要選擇合適的方式以儘量少地影響用戶閱讀體驗而且提升性能。本文則是詳細介紹了 font-display 屬性的使用方法，其在瀏覽器中處理的時間線劃分以及不一樣設置與不一樣加載結果下瀏覽器的處理策略。更多 CSS 相關教程參考這裏。

開源項目

樂於分享，共推前端發展

• billboard.js: billboard.js 是基於 D3.js V4 版本的輕量級、可複用的數據可視化組件庫；billboard.js 提供了常見的線型圖、餅圖、點圖等等圖表類型。

• Dexie.js：Dexie.js 是對於瀏覽器中標準數據庫 IndexedDB 的封裝，其提供了相似於服務端數據庫風格的接口；同時進行了健壯的異常處理，保證了可擴展性與可用性，提供了變化追蹤與區間查詢等功能，從而簡化了關鍵字搜索、邏輯運算等操做。

• Cherow：Cherow 是基於標準 ECMAScript 語法編寫的快速 ECMAScript 語法解析器；它遵守了標準的 ECMAScript 2018 語言規範，可以安全地用於生產環節中。Cherow 支持 Stage 3 提案，支持 JSX，默認跳過工做註釋結點而且可以可選地追蹤語法結點位置。

• wretch: wretch 是對於 fetch 的輕量級封裝，提供了直觀透明的語法。wretch 主要是爲了彌補 fetch 底層接口使用繁複的不足，提供了 notFound、unauthorized、error、catch 這些經常使用的返回值響應函數的封裝。

巔峯人生

• 那個瘋狂歲月裏，蘋果公司的工程師文化：一款劃時代產品的誕生須要經歷多少磨難與煎熬，須要多少人在背後默默地付出？這中間發生的一切都是最終用戶不可思議的。《硅谷革命》的做者 Andy Hertzfeld 將開發初代 Mac 的故事搬到了 folklore.org 網站上，後又將它們集結成書出版，但願發生在 80 年代早期的這場影響深遠的技術革命可以成爲曠世傳奇。做者在序言裏寫道：「我認爲咱們當年的理想並未徹底實現，要實現 Macintosh 的夢想仍然有待努力，或許真正的傳奇還沒有降臨」。

前端之巔

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

前端之巔微信底圖－5.jpg