前端每週清單第 51 期: React Context API 與模式變遷, Webpack 與 Web 優化, AI 界面生成

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

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

新聞熱點

國內國外，前端最新動態

• Chrome 即將標識全部的 HTTP 站點爲非安全: 近日，Google Chrome 宣佈，他們將會在 2018 年七月左右發佈的 Chrome 68 版本中，開始把全部的 HTTP 站點標識爲非安全；此舉也可能標誌着非 HTTPS 站點的終結。開發者可使用最新版本的 Lighthouse Node.js 命令行工具來檢測某個網站中是否存在了基於 HTTP 協議加載的資源，而且可以自動地判斷是否已經有了相對應的 HTTPS 版本。

• Rollup 開始支持代碼分割: 在近日發佈的 0.55 版本中，JavaScript 模塊打包工具 Rollup 終於引入了代碼分割，這個千呼萬喚始出來的特性。一直以來，Rollup 都是 React, Vue, D3, Moment, Three.js, Ember, Angular, Babylon, Jest, Bootstrap, Leaflet, Prettier 這樣的工具庫的首選，而該特性的加入也意味着其逐步成爲了應用打包工具的候選之一。

• Microsoft Edge 與 Windows 10 進一步擁抱 PWA: Edge 17 即將內置 Service Workers 與 Push Notifications，同時 Microsoft Store 將會把那些手動提交的 PWA 應用於原生應用同等對待。本文便是 Microsoft Edge 技術團隊對於 PWA 的介紹，對於它可以解決的問題的暢想以及將來如何在 Windows 10 中保證 PWA 的表現。

開發教程

步步爲營，掌握基礎技能

• React 16.3 新特性介紹: React 16.3-alpha 近日登錄 npmjs，而且可以引入到項目中，本文便是對於 16.3 版本中的新特性進行介紹。該版本引入了新的 Context API，容許開發者使用 React.createContext() 生成兩個關聯組件；重構了生命週期回調，廢除了 componentWillMount, componentWillUpdate, componentWillReceiveProps，引入了 getDerivedStateFromProps；提供了 StrictMode，以保證代碼符合最佳實踐；更新了 React Developer Tools 等。更多相關資料參考 React Reference。

• Service workers 介紹與使用: Service workers 能夠看作 Progressive Web Apps 的核心組成，提供了資源緩存與通知推送的功能，這也是 Web 應用與原生應用當前的區別之一。 本文會包含 Service Worker 的基本概念與使用，具體討論了後臺處理、離線支持、資源預抓取、網絡請求緩存、安裝與基礎使用等內容。更多相關資料參考 PWA Reference。

• React’s ⚛️ new Context API: 本文將會詳細介紹 React 16.3 版本中提供的新 Context API，它主要包含了三個部分：React.createContext 容許輸入初始值，而且返回包含 Provider 與 Consumer 的對象。Provider 組件被放置在組件樹中的較高層，容許傳入名爲 value 的屬性，而 Consumer 屬性則能夠放置在組件樹的任意位置，經過傳入渲染回調函數的方式來接收 value 參數。更多相關內容參閱 React 與前端工程化實踐系列。

工程實踐

立足實踐，提示實際水平

• GraphQL 應用中的五個常見問題與規避方案: 本文中，咱們將會討論如何儘量地發揮 GraphQL 的長處而繞過其中的坑。做者在本文中討論瞭如下內容：Schema duplication, Server/client data mismatch, Superfluous database calls, Poor performance and Boilerplate overdose 等。對於每一個問題，做者首先進行了描述，而後介紹了在 Vulcan 的開發過程當中是如何定位，而且解決的。更多相關內容參考 GraphQL Reference。

• Redux 模塊與代碼分割: Twitter Lite 一直在使用 Redux 做爲其狀態管理框架，而且在不斷地尋找合適的模塊與代碼風格方案。雖然 Redux 默認的接口風格並不是面向那種持續加載的情形，本文便是介紹了 Twitter Lite 如何經過合理的代碼風格來支持漸進式代碼加載，該模式已經在生產環境下經受了數年的檢驗。更多相關內容參考 Web 開發基礎與工程實踐系列。

• Addy Osmani: 使用 Webpack 進行 Web 性能優化: 現代 Web 應用經常會使用所謂的構建工具來建立部署到生產環境的包體，該包體每每是被優化的、壓縮的，儘量減小用戶的消耗。本文則是 Addy Osmani 編寫的，基於 Webpack 的 Web 性能優化教程，討論瞭如何利用代碼分割等特性來移除不用的代碼片，而且儘量壓縮包體，來保證最小的網絡消耗與處理時間。更多相關內容參考 Web 開發基礎與工程實踐/性能優化系列。

深度閱讀

深度思考，昇華開發智慧

• React 模式演化: 本文將會深度探討 React 生態圈中流行的架構模式，這些架構模式可以提高代碼的可讀性，清晰性，而且保障代碼的可組合性與可重用性。本文將會依次介紹 Conditional Render, Passing Down Props, Destructuring Props, Provider Pattern, High Order Components, Render Props, 等等模式。更多相關內容參閱 React 與前端工程化實踐系列。

• 前端面試手冊: 不一樣於傳統的軟件工程師的技術面試，前端工程師的面試可能較少地關注算法，更多地矚目於交互相關以及 HTML，CSS，JavaScript 這些領域相關的知識。本文做者在遍尋了現存的面試手冊以後，未發現有徹底滿意的，前端相關的面試手冊；所以編寫了此文，以共享本身在前端工做中的知識積澱，本文也能夠看作對於著名的 Front-end Job Interview Questions 的回答。更多相關內容參考 Awesome Web Reference。

• 如何訓練可以將設計稿轉化爲 HTML 與 CSS 的 AI 程序: 隨着人工智能與深度學習技術的發展，咱們也能夠預見它們將逐步地改變前端開發中的一些領域。AI 可以幫助咱們提高原型構建的速度，下降軟件構建的門檻。這兩年來，隨着 Tony Beltramelli 的 pix2code paper 以及 Airbnb 開源 sketch2code，咱們能夠逐步地使用 AI 來幫助咱們構建簡單的頁面。不過，目前前端開發自動化方面最大的瓶頸可能就是計算能力，可是這並不妨礙咱們來學習瞭解相關的深度學習基礎算法，以及如何訓練數據，如何使用模型來進行界面轉換。本文中，做者會按部就班地帶領讀者來構建基礎的，可以將某個設計稿轉化爲 HTML 與 CSS 代碼的神經網絡。更多相關內容參閱 Awesome Web Reference。

• 2018-有貨移動 Web 端性能優化探索實踐: 在移動互聯網的時代裏，對於一個 Web 站點來講，移動端的用戶體驗尤其重要。現代 web 站點的設計和開發都是以移動優先做爲第一原則，咱們也專門爲了移動端的 Web 站點作了相應的優化和提高。這個過程當中任何一個環節的延遲都會形成性能瓶頸，下降用戶繼續訪問的可能性，因此咱們在服務器端，瀏覽器端，網絡加載，多個方面作了一系列的優化工做。

開源項目

樂於分享，共推前端發展

• Automerge: Automerge 是相似於 JSON 的，可以用於構建協同 JavaScript 應用的數據結構。其核心特性在於容許多個用戶併發修改，而且會進行自動地合併；目前，不少的 JavaScript 應用會將狀態保存在 JSON 文檔這樣的模型中，Automerge 便可以保證這種使用的一致性，還可以提供原子化同步與合併等擴展功能。

• winamp2-js: winamp2-js 是利用 HTML5 與 JavaScript 對於 Winamp 2.9 的覆寫，包含了以下特性：支持動態換膚，支持經過拖拽的方式加載本地皮膚文件或者資源文件，支持自定義操做按鈕等。

• Rekit: Rekit 是完整的，開發基於 React，Redux，與 React Router 應用的工具集與解決方案。Rekit 首先提供了包容萬象的編輯器，幫開發者自動進行了項目構建與文件佈局，從而使得開發者可以更加專一於業務邏輯，而不是無止境的庫、模式、配置文件等等。Rekit 提供了 opinionated 的架構模式，經過面向特性的分割方式，來保證應用的可擴展性、可測試性與可維護性。

• WebAssembly Studio: WebAssembly Studio 是在線學習、實踐、運行 WebAssembly 的工做臺，它提供了基於 Web 的 IDE，支持用戶將 C++ 或者 Rust 編譯爲 WebAssembly。同時，用戶也能夠本地運行該 Studio，只須要安裝 Node.js 與 Webpack 而後運行便可。

巔峯人生

• N26 是如何利用 JavaScript 構建面向銀行業的微服務系統: N26 是來自德國的銀行業初創項目，其 CTO Patrick Kua 在 ThoughtWorks 工做了十三年，積累了豐富的軟件相關經驗，併成功地帶領技術團隊爲數十萬用戶提供優質的銀行業服務。本文以對話的方式，注重於討論 Patrick 的團隊時如何選擇語言與框架，若是處理測試、DevOps 以及持續集成等操做，若是部署微服務並提供高可用的服務。

前端之巔

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