摘要：新聞熱點國內國外，前端最新動態蘋果開源了版近日，蘋果開源了一款基于事件驅動的跨平臺網絡應用程序開發框架，它有點類似，但開發語言使用的是。蘋果稱的目標是幫助開發者快速開發出高性能且易于維護的服務器端和客戶端應用協議。

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