摘要：新聞熱點(diǎn)國(guó)內(nèi)國(guó)外，前端最新動(dòng)態(tài)蘋(píng)果開(kāi)源了版近日，蘋(píng)果開(kāi)源了一款基于事件驅(qū)動(dòng)的跨平臺(tái)網(wǎng)絡(luò)應(yīng)用程序開(kāi)發(fā)框架，它有點(diǎn)類(lèi)似，但開(kāi)發(fā)語(yǔ)言使用的是。蘋(píng)果稱(chēng)的目標(biāo)是幫助開(kāi)發(fā)者快速開(kāi)發(fā)出高性能且易于維護(hù)的服務(wù)器端和客戶端應(yīng)用協(xié)議。

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

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

蘋(píng)果開(kāi)源了 Swift 版 Netty：SwiftNIO: 近日，蘋(píng)果開(kāi)源了一款基于事件驅(qū)動(dòng)的跨平臺(tái)網(wǎng)絡(luò)應(yīng)用程序開(kāi)發(fā)框架 SwfitNIO，它有點(diǎn)類(lèi)似 Netty，但開(kāi)發(fā)語(yǔ)言使用的是 Swift。蘋(píng)果稱(chēng) SwfitNIO 的目標(biāo)是幫助開(kāi)發(fā)者快速開(kāi)發(fā)出高性能且易于維護(hù)的服務(wù)器端和客戶端應(yīng)用協(xié)議。SwfitNIO 并不會(huì)提供類(lèi)似 Web 框架那樣的解決方案，而是致力于為上層框架提供底層的構(gòu)建塊。在開(kāi)發(fā) Web 應(yīng)用程序時(shí)，大部分開(kāi)發(fā)者不會(huì)直接使用 SwfitNIO，他們會(huì)從 Swift 生態(tài)系統(tǒng)眾多的 Web 框架中選擇一個(gè)。不過(guò)，這些框架中的大部分都使用了 SwfitNIO。

Chrome 65 新特性介紹: 本文是對(duì)即將發(fā)布的 Chrome 65 版本的新特性進(jìn)行介紹，主要包 含 CSS Paint API, Server Timing API 以及 CSS display: contents 屬性。其中 CSS Paint API 允許以 Canvas 那樣編程繪制的方式設(shè)置元素的 background-image 或者 border-image 屬性，Server Timing API 允許服務(wù)端在返回的響應(yīng)頭中設(shè)置性能相關(guān)信息，以方便客戶端完整的性能度量。而 display: contents 屬性則能夠忽略中間元素，適合于 Flexbox 等場(chǎng)景。

Node v8.10.0 (LTS) & v9.8.0 (Current): 本周 Node.js v8.10.0 (LTS) 與 v9.8.0 發(fā)布，繼續(xù)帶來(lái)了一系列的特性更新與優(yōu)化，包括 V8, libuv, ICU 等方面。

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

2018 GraphQL 必知必會(huì): 大部分開(kāi)發(fā)者都了解如何構(gòu)建 REST API，也感受過(guò)它的紅與黑；本文則是對(duì) API 領(lǐng)域的新星， GraphQL 進(jìn)行介紹與討論。GraphQL 經(jīng)常被稱(chēng)作是面向前端的 API 技術(shù)方案，因?yàn)樗试S前端開(kāi)發(fā)者以更簡(jiǎn)單靈活的方式進(jìn)行數(shù)據(jù)請(qǐng)求。該特性也正是彌補(bǔ)了傳統(tǒng) REST API 的一個(gè)不足：無(wú)法為不同的客戶端返回定制化數(shù)據(jù)；而 GraphQL 的另一個(gè)優(yōu)勢(shì)在于，能夠?qū)⒃拘枰蚨嘟涌诎l(fā)起的請(qǐng)求僅向單接口請(qǐng)求。更多相關(guān)資料參考 GraphQL Reference。

從零構(gòu)建 Redux: 很多 Redux 的初學(xué)者可能會(huì)受困于繁多的 Redux 庫(kù)，不過(guò) Redux 的核心思想?yún)s是非常直觀與易于理解的。如果你首先理解了 Redux 的構(gòu)建思想，再去將其應(yīng)用在 React 等實(shí)際的界面開(kāi)發(fā)場(chǎng)景中，或許更能洞若觀火，得心應(yīng)手。本教程即是在從零構(gòu)建 Redux 核心庫(kù)的過(guò)程中，循序漸進(jìn)地講解 Redux 的設(shè)計(jì)思想；更多相關(guān)內(nèi)容參考 現(xiàn)代 Web 開(kāi)發(fā)--架構(gòu)優(yōu)化篇。

JavaScript 面試算法題之 Glob Matching: 數(shù)據(jù)結(jié)構(gòu)與算法相關(guān)的問(wèn)題，往往是面試重要的組成；從作者自身的經(jīng)驗(yàn)來(lái)看，也有越來(lái)越多的公司考慮讓開(kāi)發(fā)者以 JavaScript 實(shí)現(xiàn)某些算法題目。本系列文章都是關(guān)注于如何使用 JavaScript 來(lái)實(shí)現(xiàn)常見(jiàn)的算法，本文則關(guān)注于字符串匹配中常見(jiàn)的 Glob Matching；更多相關(guān)內(nèi)容參考數(shù)據(jù)結(jié)構(gòu)與算法基礎(chǔ)。

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

React 開(kāi)發(fā)中的項(xiàng)目組織與組件命名: 作為界面庫(kù)，React 并未過(guò)多的介入到我們前端項(xiàng)目的代碼組織與編排中。這個(gè)特性保證了 React 的獨(dú)立與靈活性，并且允許開(kāi)發(fā)者能夠根據(jù)自身項(xiàng)目的特性來(lái)個(gè)性化編排；不過(guò)這也會(huì)導(dǎo)致一些初學(xué)者無(wú)所適從。本文中，作者為我們展示了他的項(xiàng)目組織與命名偏好，這些方法并不是重新造輪子，而是希望能夠更好地組合它們。更多相關(guān)內(nèi)容參考 React DevPractices Reference。

構(gòu)建自定義的 Vue Router: vue-router 是 Vue.js 官方的路由框架，其也為我們提供了完整的將組件映射到不同瀏覽器路由的功能。不過(guò)，本文作者覺(jué)得在一些簡(jiǎn)單的應(yīng)用中我們并不一定需要 vue-router 這樣功能完備的庫(kù)，而可能只需要些許特性；因此作者從零構(gòu)建了應(yīng)用于 Vue.js 的簡(jiǎn)單自定義客戶端路由庫(kù)。本文首先介紹了客戶端路由的基本特性與要求，然后以 Pokemon 為例，循序漸進(jìn)地介紹該庫(kù)的具體實(shí)現(xiàn)。更多相關(guān)內(nèi)容參考 現(xiàn)代 Web 開(kāi)發(fā)--Vue.js 篇。

Web 緩存: 緩存能夠幫助我們優(yōu)化應(yīng)用的處理速度，譬如緩存前一次的抓取數(shù)據(jù)或者計(jì)算結(jié)果。本文即是對(duì)于緩存體系的完整介紹，從瀏覽器，到 Web 服務(wù)器，最后到磁盤(pán)與 CPU；本文以自底向上的順序介紹了不同層次緩存的特性與機(jī)制，著眼于數(shù)據(jù)的存儲(chǔ)點(diǎn)而非如何去緩存。更多相關(guān)內(nèi)容參考服務(wù)端應(yīng)用程序開(kāi)發(fā)基礎(chǔ)。

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

React 16 之上：Time Slicing 與 Suspense API: 本文是對(duì)于近日公布的 React 未來(lái)新特性， Time Slicing 以及 Suspense API 進(jìn)行講解。Time-Slicing 允許運(yùn)行在 React Fiber 之上的 React，將對(duì)子組件的更新計(jì)算切割為不同的塊操作，并且在不同的幀中異步執(zhí)行；而 Suspense API 則允許 ReactJS 將界面的更新推遲到數(shù)據(jù)抓取完畢，從而提高更好的用戶體驗(yàn)與編程模型。更多相關(guān)內(nèi)容參考 現(xiàn)代 Web 開(kāi)發(fā)--React 篇。

利用 Web 打造超級(jí)計(jì)算機(jī): 目前已經(jīng)有了很多關(guān)于使用加密數(shù)字貨幣等基于區(qū)塊鏈的技術(shù)方案，來(lái)挖掘訪問(wèn)網(wǎng)頁(yè)的客戶端的計(jì)算潛力，實(shí)現(xiàn)去中心化的計(jì)算。本文同樣嘗試去將無(wú)數(shù)的 Web 瀏覽器客戶端調(diào)和打造為超級(jí)計(jì)算機(jī)，不過(guò)其未使用區(qū)塊鏈等技術(shù)，而是利用 WebSocket，從零構(gòu)建完整的技術(shù)方案。本文依次討論了如何最大化利用節(jié)點(diǎn)的計(jì)算力，如何在多節(jié)點(diǎn)間分發(fā)任務(wù)并且獲取任務(wù)結(jié)果等內(nèi)容；更多相關(guān)內(nèi)容參考 DistributedSystem CheatSheet。

React 中條件渲染的不同實(shí)現(xiàn): JSX 是不錯(cuò)的用來(lái)定義 UI 組件的 JavaScript 擴(kuò)展，不過(guò)其目前并不直接支持循環(huán)或者條件表達(dá)式；本文即是用不同的方法去實(shí)現(xiàn)該需求，也是一篇不錯(cuò)的對(duì)于 React 中設(shè)計(jì)模式的概覽。本文根據(jù)不同的使用場(chǎng)景，介紹了不同的條件渲染的辦法：If/Else, Prevent rendering with null, Element variables, Ternary operator, Short-circuit operator (&& ), Immediately-Invoked Function Expressions (IIFE), Subcomponents, High Order Components (HOCs)。更多相關(guān)內(nèi)容參考 現(xiàn)代 Web 開(kāi)發(fā)--React 篇。

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

Propel: Propel 為我們提供了基于 GPU 的類(lèi)似于 Numpy 這樣的科學(xué)計(jì)算框架。JavaScript 是類(lèi)似于 Python 這樣的動(dòng)態(tài)語(yǔ)言，我們認(rèn)為其同樣能夠?yàn)榭蒲邢虻拈_(kāi)發(fā)者構(gòu)建合適的工作流。Propel 能夠運(yùn)行在瀏覽器或者服務(wù)端的 Node.js 環(huán)境中，不同的環(huán)境中 Propel 皆能夠使用 GPU 硬件來(lái)執(zhí)行計(jì)算任務(wù)。瀏覽器環(huán)境下 Propel 利用了 Deeplearn.js 提供的 WebGL 接口，而在 Node.js 環(huán)境下則使用了 TensorFlow 的 C 接口。

mpvue: mpvue 是一個(gè)使用 Vue.js 開(kāi)發(fā)小程序的前端框架?？蚣芑?Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實(shí)現(xiàn)，使其可以運(yùn)行在小程序環(huán)境中，從而為小程序開(kāi)發(fā)引入了整套 Vue.js 開(kāi)發(fā)體驗(yàn)。其主要特性包括：徹底的組件化開(kāi)發(fā)能力：提高代碼復(fù)用性, 完整的 Vue.js 開(kāi)發(fā)體驗(yàn), 方便的 Vuex 數(shù)據(jù)管理方案：方便構(gòu)建復(fù)雜應(yīng)用, 快捷的 webpack 構(gòu)建機(jī)制：自定義構(gòu)建策略、開(kāi)發(fā)階段 hotReload 等。

Xray: Xray 是 Atom 團(tuán)隊(duì)在四年多的經(jīng)驗(yàn)總結(jié)之上，構(gòu)建的實(shí)驗(yàn)性的基于 Electron 的文本編輯器。目前 Xray 正處于快速地迭代開(kāi)發(fā)中，希望能夠在未來(lái)提供高性能的、可協(xié)同編輯的、可擴(kuò)展的，以及多端體驗(yàn)一致的編輯器。

scrcpy: 該應(yīng)用提供了利用 USB 在電腦屏幕上展示與控制 Android 設(shè)備的功能，它并不需要任何的 Root 權(quán)限，并且能夠作用于 GNU/Linux, Windows 以及 Mac OS 等多平臺(tái)。該工具需要先安裝 adb 命令，開(kāi)發(fā)者可以直接從 Android SDK Platform Tools 中獲取。

程序媛小姐姐，了解一下？: 雖說(shuō)第一個(gè)程序員是女性，但現(xiàn)在，這行業(yè)早已被男性所“主宰”。Bloomberg（彭博）曾給男程序員創(chuàng)造了一個(gè)很有男子氣概的詞語(yǔ)“ Brogrammer ”（“bro”意為“兄弟”“男人”），一改程序員呆板的極客形象，將他們描述得又酷又時(shí)尚。但同時(shí)，這也凸顯了 IT 行業(yè)以男性為主導(dǎo)的發(fā)展方式，女程序員們都被忽略了。1842 年，人稱(chēng)“數(shù)字女王”的阿達(dá) - 洛芙萊斯（Ada Lovelace）編寫(xiě)了歷史上首款電腦程序。時(shí)間閃回到 170 多年后，電腦編程行業(yè)卻被男性一統(tǒng)天下。一方面，程序員們被外界貼上的各種負(fù)面標(biāo)簽所困擾，另一方面，女性程序員的稀缺又總是在程序員群體里被貼上另一些不太友好的標(biāo)簽。

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