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

王下邀月熊發表於2018-02-12
前端ReactContextAPI模式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，註明 “ 前端之巔投稿 ”。

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

相關文章