前端每週清單專注前端領域內容，以對外文資料的蒐集為主，幫助開發者瞭解一週前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源專案、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（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，註明“前端之巔投稿”。
