摘要：前端每周清單第期與模式變遷與優化界面生成作者王下邀月熊編輯徐川前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。

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

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