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