摘要：前端每周清單第期與模式變遷與優(yōu)化界面生成作者王下邀月熊編輯徐川前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開發(fā)教程工程實(shí)踐深度閱讀開源項(xiàng)目巔峰人生等欄目。

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

前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開發(fā)教程、工程實(shí)踐、深度閱讀、開源項(xiàng)目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號(hào)（ID: frontshow），及時(shí)獲取前端每周清單。

國內(nèi)國外，前端最新動(dòng)態(tài)

Chrome 即將標(biāo)識(shí)所有的 HTTP 站點(diǎn)為非安全: 近日，Google Chrome 宣布，他們將會(huì)在 2018 年七月左右發(fā)布的 Chrome 68 版本中，開始把所有的 HTTP 站點(diǎn)標(biāo)識(shí)為非安全；此舉也可能標(biāo)志著非 HTTPS 站點(diǎn)的終結(jié)。開發(fā)者可以使用最新版本的 Lighthouse Node.js 命令行工具來檢測某個(gè)網(wǎng)站中是否存在了基于 HTTP 協(xié)議加載的資源，并且能夠自動(dòng)地判斷是否已經(jīng)有了相對(duì)應(yīng)的 HTTPS 版本。

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

Microsoft Edge 與 Windows 10 進(jìn)一步擁抱 PWA: Edge 17 即將內(nèi)置 Service Workers 與 Push Notifications，同時(shí) Microsoft Store 將會(huì)把那些手動(dòng)提交的 PWA 應(yīng)用于原生應(yīng)用同等對(duì)待。本文即是 Microsoft Edge 技術(shù)團(tuán)隊(duì)對(duì)于 PWA 的介紹，對(duì)于它能夠解決的問題的暢想以及未來如何在 Windows 10 中保證 PWA 的表現(xiàn)。

步步為營，掌握基礎(chǔ)技能

React 16.3 新特性介紹: React 16.3-alpha 近日登陸 npmjs，并且能夠引入到項(xiàng)目中，本文即是對(duì)于 16.3 版本中的新特性進(jìn)行介紹。該版本引入了新的 Context API，允許開發(fā)者使用 React.createContext() 生成兩個(gè)關(guān)聯(lián)組件；重構(gòu)了生命周期回調(diào)，廢除了 componentWillMount, componentWillUpdate, componentWillReceiveProps，引入了 getDerivedStateFromProps；提供了 StrictMode，以保證代碼符合最佳實(shí)踐；更新了 React Developer Tools 等。更多相關(guān)資料參考 React Reference。

Service workers 介紹與使用: Service workers 可以看做 Progressive Web Apps 的核心組成，提供了資源緩存與通知推送的功能，這也是 Web 應(yīng)用與原生應(yīng)用當(dāng)前的區(qū)別之一。 本文會(huì)包含 Service Worker 的基本概念與使用，具體討論了后臺(tái)處理、離線支持、資源預(yù)抓取、網(wǎng)絡(luò)請(qǐng)求緩存、安裝與基礎(chǔ)使用等內(nèi)容。更多相關(guān)資料參考 PWA Reference。

React’s ?? new Context API: 本文將會(huì)詳細(xì)介紹 React 16.3 版本中提供的新 Context API，它主要包含了三個(gè)部分：React.createContext 允許輸入初始值，并且返回包含 Provider 與 Consumer 的對(duì)象。Provider 組件被放置在組件樹中的較高層，允許傳入名為 value 的屬性，而 Consumer 屬性則可以放置在組件樹的任意位置，通過傳入渲染回調(diào)函數(shù)的方式來接收 value 參數(shù)。更多相關(guān)內(nèi)容參閱 React 與前端工程化實(shí)踐系列。

立足實(shí)踐，提示實(shí)際水平

GraphQL 應(yīng)用中的五個(gè)常見問題與規(guī)避方案: 本文中，我們將會(huì)討論如何盡可能地發(fā)揮 GraphQL 的長處而繞過其中的坑。作者在本文中討論了以下內(nèi)容：Schema duplication, Server/client data mismatch, Superfluous database calls, Poor performance and Boilerplate overdose 等。對(duì)于每個(gè)問題，作者首先進(jìn)行了描述，然后介紹了在 Vulcan 的開發(fā)過程中是如何定位，并且解決的。更多相關(guān)內(nèi)容參考 GraphQL Reference。

Redux 模塊與代碼分割: Twitter Lite 一直在使用 Redux 作為其狀態(tài)管理框架，并且在不斷地尋找合適的模塊與代碼風(fēng)格方案。雖然 Redux 默認(rèn)的接口風(fēng)格并非面向那種持續(xù)加載的情形，本文即是介紹了 Twitter Lite 如何通過合理的代碼風(fēng)格來支持漸進(jìn)式代碼加載，該模式已經(jīng)在生產(chǎn)環(huán)境下經(jīng)受了數(shù)年的檢驗(yàn)。更多相關(guān)內(nèi)容參考 Web 開發(fā)基礎(chǔ)與工程實(shí)踐系列。

Addy Osmani: 使用 Webpack 進(jìn)行 Web 性能優(yōu)化: 現(xiàn)代 Web 應(yīng)用常常會(huì)使用所謂的構(gòu)建工具來創(chuàng)建部署到生產(chǎn)環(huán)境的包體，該包體往往是被優(yōu)化的、壓縮的，盡可能減少用戶的消耗。本文則是 Addy Osmani 編寫的，基于 Webpack 的 Web 性能優(yōu)化教程，討論了如何利用代碼分割等特性來移除不用的代碼片，并且盡可能壓縮包體，來保證最小的網(wǎng)絡(luò)消耗與處理時(shí)間。更多相關(guān)內(nèi)容參考 Web 開發(fā)基礎(chǔ)與工程實(shí)踐/性能優(yōu)化系列。

深度思考，升華開發(fā)智慧

React 模式演化: 本文將會(huì)深度探討 React 生態(tài)圈中流行的架構(gòu)模式，這些架構(gòu)模式能夠提升代碼的可讀性，清晰性，并且保障代碼的可組合性與可重用性。本文將會(huì)依次介紹 Conditional Render, Passing Down Props, Destructuring Props, Provider Pattern, High Order Components, Render Props, 等等模式。更多相關(guān)內(nèi)容參閱 React 與前端工程化實(shí)踐系列。

前端面試手冊(cè): 不同于傳統(tǒng)的軟件工程師的技術(shù)面試，前端工程師的面試可能較少地關(guān)注算法，更多地矚目于交互相關(guān)以及 HTML，CSS，JavaScript 這些領(lǐng)域相關(guān)的知識(shí)。本文作者在遍尋了現(xiàn)存的面試手冊(cè)之后，未發(fā)現(xiàn)有完全滿意的，前端相關(guān)的面試手冊(cè)；因此編寫了此文，以共享自己在前端工作中的知識(shí)積淀，本文也可以看做對(duì)于著名的 Front-end Job Interview Questions 的回答。更多相關(guān)內(nèi)容參考 Awesome Web Reference。

如何訓(xùn)練能夠?qū)⒃O(shè)計(jì)稿轉(zhuǎn)化為 HTML 與 CSS 的 AI 程序: 隨著人工智能與深度學(xué)習(xí)技術(shù)的發(fā)展，我們也可以預(yù)見它們將逐步地改變前端開發(fā)中的一些領(lǐng)域。AI 能夠幫助我們提升原型構(gòu)建的速度，降低軟件構(gòu)建的門檻。這兩年來，隨著 Tony Beltramelli 的 pix2code paper 以及 Airbnb 開源 sketch2code，我們可以逐步地使用 AI 來幫助我們構(gòu)建簡單的頁面。不過，目前前端開發(fā)自動(dòng)化方面最大的瓶頸可能就是計(jì)算能力，但是這并不妨礙我們來學(xué)習(xí)了解相關(guān)的深度學(xué)習(xí)基礎(chǔ)算法，以及如何訓(xùn)練數(shù)據(jù)，如何使用模型來進(jìn)行界面轉(zhuǎn)換。本文中，作者會(huì)循序漸進(jìn)地帶領(lǐng)讀者來構(gòu)建基礎(chǔ)的，能夠?qū)⒛硞€(gè)設(shè)計(jì)稿轉(zhuǎn)化為 HTML 與 CSS 代碼的神經(jīng)網(wǎng)絡(luò)。更多相關(guān)內(nèi)容參閱 Awesome Web Reference。

2018-有貨移動(dòng) Web 端性能優(yōu)化探索實(shí)踐: 在移動(dòng)互聯(lián)網(wǎng)的時(shí)代里，對(duì)于一個(gè) Web 站點(diǎn)來說，移動(dòng)端的用戶體驗(yàn)尤為重要?，F(xiàn)代 web 站點(diǎn)的設(shè)計(jì)和開發(fā)都是以移動(dòng)優(yōu)先作為第一原則，我們也專門為了移動(dòng)端的 Web 站點(diǎn)做了相應(yīng)的優(yōu)化和提升。這個(gè)過程中任何一個(gè)環(huán)節(jié)的延遲都會(huì)造成性能瓶頸，降低用戶繼續(xù)訪問的可能性，所以我們?cè)诜?wù)器端，瀏覽器端，網(wǎng)絡(luò)加載，多個(gè)方面做了一系列的優(yōu)化工作。

樂于分享，共推前端發(fā)展

Automerge: Automerge 是類似于 JSON 的，能夠用于構(gòu)建協(xié)同 JavaScript 應(yīng)用的數(shù)據(jù)結(jié)構(gòu)。其核心特性在于允許多個(gè)用戶并發(fā)修改，并且會(huì)進(jìn)行自動(dòng)地合并；目前，很多的 JavaScript 應(yīng)用會(huì)將狀態(tài)保存在 JSON 文檔這樣的模型中，Automerge 即可以保證這種使用的一致性，還能夠提供原子化同步與合并等擴(kuò)展功能。

winamp2-js: winamp2-js 是利用 HTML5 與 JavaScript 對(duì)于 Winamp 2.9 的覆寫，包含了如下特性：支持動(dòng)態(tài)換膚，支持通過拖拽的方式加載本地皮膚文件或者資源文件，支持自定義操作按鈕等。

Rekit: Rekit 是完整的，開發(fā)基于 React，Redux，與 React Router 應(yīng)用的工具集與解決方案。Rekit 首先提供了包容萬象的編輯器，幫開發(fā)者自動(dòng)進(jìn)行了項(xiàng)目構(gòu)建與文件布局，從而使得開發(fā)者能夠更加專注于業(yè)務(wù)邏輯，而不是無止境的庫、模式、配置文件等等。Rekit 提供了 opinionated 的架構(gòu)模式，通過面向特性的分割方式，來保證應(yīng)用的可擴(kuò)展性、可測試性與可維護(hù)性。

WebAssembly Studio: WebAssembly Studio 是在線學(xué)習(xí)、實(shí)踐、運(yùn)行 WebAssembly 的工作臺(tái)，它提供了基于 Web 的 IDE，支持用戶將 C++ 或者 Rust 編譯為 WebAssembly。同時(shí)，用戶也可以本地運(yùn)行該 Studio，只需要安裝 Node.js 與 Webpack 然后運(yùn)行即可。

N26 是如何利用 JavaScript 構(gòu)建面向銀行業(yè)的微服務(wù)系統(tǒng): N26 是來自德國的銀行業(yè)初創(chuàng)項(xiàng)目，其 CTO Patrick Kua 在 ThoughtWorks 工作了十三年，積累了豐富的軟件相關(guān)經(jīng)驗(yàn)，并成功地帶領(lǐng)技術(shù)團(tuán)隊(duì)為數(shù)十萬用戶提供優(yōu)質(zhì)的銀行業(yè)服務(wù)。本文以對(duì)話的方式，注重于討論 Patrick 的團(tuán)隊(duì)時(shí)如何選擇語言與框架，如果處理測試、DevOps 以及持續(xù)集成等操作，如果部署微服務(wù)并提供高可用的服務(wù)。

「前端之巔」是 InfoQ 旗下關(guān)注前端技術(shù)的垂直社群，加入前端之巔學(xué)習(xí)群請(qǐng)關(guān)注「前端之巔」公眾號(hào)后回復(fù) “ 加群 ”。投稿請(qǐng)發(fā)郵件到 [email protected]，注明 “ 前端之巔投稿 ”。