前端每週清單第 54 期: SwiftNIO, 自定義 vue-router, Web 緩存與 GraphQL 必知必會

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

新聞熱點

國內國外，前端最新動態

• 蘋果開源了 Swift 版 Netty：SwiftNIO: 近日，蘋果開源了一款基於事件驅動的跨平臺網絡應用程序開發框架 SwfitNIO，它有點相似 Netty，但開發語言使用的是 Swift。蘋果稱 SwfitNIO 的目標是幫助開發者快速開發出高性能且易於維護的服務器端和客戶端應用協議。SwfitNIO 並不會提供相似 Web 框架那樣的解決方案，而是致力於爲上層框架提供底層的構建塊。在開發 Web 應用程序時，大部分開發者不會直接使用 SwfitNIO，他們會從 Swift 生態系統衆多的 Web 框架中選擇一個。不過，這些框架中的大部分都使用了 SwfitNIO。

• Chrome 65 新特性介紹: 本文是對即將發佈的 Chrome 65 版本的新特性進行介紹，主要包 含 CSS Paint API, Server Timing API 以及 CSS display: contents 屬性。其中 CSS Paint API 容許以 Canvas 那樣編程繪製的方式設置元素的 background-image 或者 border-image 屬性，Server Timing API 容許服務端在返回的響應頭中設置性能相關信息，以方便客戶端完整的性能度量。而 display: contents 屬性則可以忽略中間元素，適合於 Flexbox 等場景。

• Node v8.10.0 (LTS) & v9.8.0 (Current): 本週 Node.js v8.10.0 (LTS) 與 v9.8.0 發佈，繼續帶來了一系列的特性更新與優化，包括 V8, libuv, ICU 等方面。

開發教程

步步爲營，掌握基礎技能

• 2018 GraphQL 必知必會: 大部分開發者都瞭解如何構建 REST API，也感覺過它的紅與黑；本文則是對 API 領域的新星， GraphQL 進行介紹與討論。GraphQL 常常被稱做是面向前端的 API 技術方案，由於它容許前端開發者以更簡單靈活的方式進行數據請求。該特性也正是彌補了傳統 REST API 的一個不足：沒法爲不一樣的客戶端返回定製化數據；而 GraphQL 的另外一個優點在於，可以將本來須要向多接口發起的請求僅向單接口請求。更多相關資料參考 GraphQL Reference。

• 從零構建 Redux: 不少 Redux 的初學者可能會受困於繁多的 Redux 庫，不過 Redux 的核心思想倒是很是直觀與易於理解的。若是你首先理解了 Redux 的構建思想，再去將其應用在 React 等實際的界面開發場景中，或許更能洞若觀火，駕輕就熟。本教程便是在從零構建 Redux 核心庫的過程當中，按部就班地講解 Redux 的設計思想；更多相關內容參考 現代 Web 開發--架構優化篇。

• JavaScript 面試算法題之 Glob Matching: 數據結構與算法相關的問題，每每是面試重要的組成；從做者自身的經驗來看，也有愈來愈多的公司考慮讓開發者以 JavaScript 實現某些算法題目。本系列文章都是關注於如何使用 JavaScript 來實現常見的算法，本文則關注於字符串匹配中常見的 Glob Matching；更多相關內容參考數據結構與算法基礎。

工程實踐

立足實踐，提示實際水平

• React 開發中的項目組織與組件命名: 做爲界面庫，React 並未過多的介入到咱們前端項目的代碼組織與編排中。這個特性保證了 React 的獨立與靈活性，而且容許開發者可以根據自身項目的特性來個性化編排；不過這也會致使一些初學者無所適從。本文中，做者爲咱們展現了他的項目組織與命名偏好，這些方法並非從新造輪子，而是但願可以更好地組合它們。更多相關內容參考 React DevPractices Reference。

• 構建自定義的 Vue Router: vue-router 是 Vue.js 官方的路由框架，其也爲咱們提供了完整的將組件映射到不一樣瀏覽器路由的功能。不過，本文做者以爲在一些簡單的應用中咱們並不必定須要 vue-router 這樣功能完備的庫，而可能只須要些許特性；所以做者從零構建了應用於 Vue.js 的簡單自定義客戶端路由庫。本文首先介紹了客戶端路由的基本特性與要求，而後以 Pokemon 爲例，按部就班地介紹該庫的具體實現。更多相關內容參考 現代 Web 開發--Vue.js 篇。

• Web 緩存: 緩存可以幫助咱們優化應用的處理速度，譬如緩存前一次的抓取數據或者計算結果。本文便是對於緩存體系的完整介紹，從瀏覽器，到 Web 服務器，最後到磁盤與 CPU；本文以自底向上的順序介紹了不一樣層次緩存的特性與機制，着眼於數據的存儲點而非如何去緩存。更多相關內容參考服務端應用程序開發基礎。

深度閱讀

深度思考，昇華開發智慧

• React 16 之上：Time Slicing 與 Suspense API: 本文是對於近日公佈的 React 將來新特性， Time Slicing 以及 Suspense API 進行講解。Time-Slicing 容許運行在 React Fiber 之上的 React，將對子組件的更新計算切割爲不一樣的塊操做，而且在不一樣的幀中異步執行；而 Suspense API 則容許 ReactJS 將界面的更新推遲到數據抓取完畢，從而提升更好的用戶體驗與編程模型。更多相關內容參考 現代 Web 開發--React 篇。

• 利用 Web 打造超級計算機: 目前已經有了不少關於使用加密數字貨幣等基於區塊鏈的技術方案，來挖掘訪問網頁的客戶端的計算潛力，實現去中心化的計算。本文一樣嘗試去將無數的 Web 瀏覽器客戶端調和打造爲超級計算機，不過其未使用區塊鏈等技術，而是利用 WebSocket，從零構建完整的技術方案。本文依次討論瞭如何最大化利用節點的計算力，如何在多節點間分發任務而且獲取任務結果等內容；更多相關內容參考 DistributedSystem CheatSheet。

• React 中條件渲染的不一樣實現: JSX 是不錯的用來定義 UI 組件的 JavaScript 擴展，不過其目前並不直接支持循環或者條件表達式；本文便是用不一樣的方法去實現該需求，也是一篇不錯的對於 React 中設計模式的概覽。本文根據不一樣的使用場景，介紹了不一樣的條件渲染的辦法：If/Else, Prevent rendering with null, Element variables, Ternary operator, Short-circuit operator (&& ), Immediately-Invoked Function Expressions (IIFE), Subcomponents, High Order Components (HOCs)。更多相關內容參考 現代 Web 開發--React 篇。

開源項目

樂於分享，共推前端發展

• Propel: Propel 爲咱們提供了基於 GPU 的相似於 Numpy 這樣的科學計算框架。JavaScript 是相似於 Python 這樣的動態語言，咱們認爲其一樣可以爲科研向的開發者構建合適的工做流。Propel 可以運行在瀏覽器或者服務端的 Node.js 環境中，不一樣的環境中 Propel 皆可以使用 GPU 硬件來執行計算任務。瀏覽器環境下 Propel 利用了 Deeplearn.js 提供的 WebGL 接口，而在 Node.js 環境下則使用了 TensorFlow 的 C 接口。

• mpvue: mpvue 是一個使用 Vue.js 開發小程序的前端框架。框架基於 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其能夠運行在小程序環境中，從而爲小程序開發引入了整套 Vue.js 開發體驗。其主要特性包括：完全的組件化開發能力：提升代碼複用性, 完整的 Vue.js 開發體驗, 方便的 Vuex 數據管理方案：方便構建複雜應用, 快捷的 webpack 構建機制：自定義構建策略、開發階段 hotReload 等。

• Xray: Xray 是 Atom 團隊在四年多的經驗總結之上，構建的實驗性的基於 Electron 的文本編輯器。目前 Xray 正處於快速地迭代開發中，但願可以在將來提供高性能的、可協同編輯的、可擴展的，以及多端體驗一致的編輯器。

• scrcpy: 該應用提供了利用 USB 在電腦屏幕上展現與控制 Android 設備的功能，它並不須要任何的 Root 權限，而且可以做用於 GNU/Linux, Windows 以及 Mac OS 等多平臺。該工具須要先安裝 adb 命令，開發者能夠直接從 Android SDK Platform Tools 中獲取。

巔峯人生

• 程序媛小姐姐，瞭解一下？: 雖然說第一個程序員是女性，但如今，這行業早已被男性所「主宰」。Bloomberg（彭博）曾給男程序員創造了一個頗有男子氣概的詞語「 Brogrammer 」（「bro」意爲「兄弟」「男人」），一改程序員呆板的極客形象，將他們描述得又酷又時尚。但同時，這也凸顯了 IT 行業以男性爲主導的發展方式，女程序員們都被忽略了。1842 年，人稱「數字女王」的阿達 - 洛芙萊斯（Ada Lovelace）編寫了歷史上首款電腦程序。時間閃回到 170 多年後，電腦編程行業卻被男性一統天下。一方面，程序員們被外界貼上的各類負面標籤所困擾，另外一方面，女性程序員的稀缺又老是在程序員羣體裏被貼上另外一些不太友好的標籤。

前端之巔

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