作者：王下邀月熊 編輯：徐川

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

新聞熱點(diǎn)

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

• Webpack 4.0.0 發(fā)布: 本周 Webpack 4 正式發(fā)布，包含了大量的特性更新，以及極大的性能優(yōu)化（最高可達(dá) 98%）。Webpack 4 中移除了 CommonsChunkPlugin，替換以一系列默認(rèn)的配置以及簡(jiǎn)單的 optimize.splitChunks 接口。同時(shí) Webpack 4 為我們帶來(lái)了 mode 的配置項(xiàng)，允許開發(fā)者根據(jù)不同的需求選擇是面向開發(fā)環(huán)境優(yōu)化還是生產(chǎn)環(huán)境優(yōu)化，從而降低了初學(xué)者的門檻。更多變化說(shuō)明參考這里。

• Parcel v1.6.0 發(fā)布: 雖然距離 Parcel v1.5.0 發(fā)布僅僅過(guò)去了三周，Parcel v1.6.0 依然為我們帶來(lái)了超過(guò)十五個(gè)的新特性以及大量的修復(fù)提升。該版本中值得關(guān)注的特性包括：基于 Babel 的 ES6+ 零配置轉(zhuǎn)化，面向 React 以及 Preact 的自動(dòng) JSX 支持，Node 以及 Electron 目標(biāo)的支持，生產(chǎn)環(huán)境下包體分析，Node 6 以及 W3C WebManifest 的支持等。

• npm v5.7.0 發(fā)布: 該版本帶來(lái)了一系列令人激動(dòng)的特性與修復(fù)提升，本文即是對(duì)該版本的重點(diǎn)變化的詳細(xì)說(shuō)明。該版本引入了 package-lock.json 文件的自動(dòng)合并功能，開發(fā)者使用 npm install 的時(shí)候即可以自動(dòng)合并 package-lock.json 與 npm-shrinkwrap.json。同時(shí)該版本引入了新的 ci 命令，其僅會(huì)安裝 lock 文件中的依賴項(xiàng)，并且會(huì)在 package.json 與 lock 文件不一致的時(shí)候拋出錯(cuò)誤。該命令相較于 npm install 有 2 ~ 10 倍的性能速度提升，能夠大大優(yōu)化目前的 CI 持續(xù)集成流程。

開發(fā)教程

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

• 你需要知道的關(guān)于 CSS Variables 的一切: 大部分的編程語(yǔ)言都支持變量，或者類似的特性；盡管 CSS 長(zhǎng)久以來(lái)一直不支持自定義變量，隨著 Web 的快速發(fā)展我們也欣慰地看到它引入了自定義屬性，或所謂的變量的特性。本文即是對(duì)于 CSS Variables 的全面介紹，從 CSS Variables 的特性原理到它在實(shí)際應(yīng)用開發(fā)中的實(shí)踐；為了更好地進(jìn)行講解，作者還從零構(gòu)建了三個(gè)項(xiàng)目：使用 CSS Variables 創(chuàng)建多態(tài)組件，基于 CSS Variables 的主題特性，創(chuàng)建小的 CSS Variable Booth。更多相關(guān)資料參考現(xiàn)代 Web 開發(fā)基礎(chǔ)與工程實(shí)踐-基礎(chǔ)篇。

• 2018 JavaScript 測(cè)試概述: 該指南旨在介紹 2018 年中應(yīng)該掌握的與 JavaScript 測(cè)試相關(guān)的概念、名詞、工具與方法。本文集合了許多的優(yōu)秀文章中的理念，以及作者自身多年在構(gòu)建 Welldone 軟件解決方案過(guò)程中積攢的經(jīng)驗(yàn)。作者在多年的工作中曾經(jīng)面向不同的產(chǎn)品使用實(shí)踐了不同的測(cè)試解決方案的組合搭配，本文則是使用 Jest 進(jìn)行單元測(cè)試與集成測(cè)試，并且使用 TestCafe 進(jìn)行界面測(cè)試。更多相關(guān)資料參考 Awesome JavaScript Reference。

• 人臉識(shí)別：使用 React-Redux 以及 Kairos 來(lái)識(shí)別你自己: 我們正處在人工智能與機(jī)器學(xué)習(xí)技術(shù)迅猛發(fā)展的年代，Face ID 與人臉識(shí)別也不再遙不可及，而成為了生活中不可缺少的一部分。付諸實(shí)踐總好過(guò)高談闊論，本文作者即介紹如何使用 React-Redux 以及 Kairos 來(lái)創(chuàng)建人臉識(shí)別的應(yīng)用，并且用它做一些有趣的事情。更多相關(guān)資料參考 DataScienceAI MindMap。

工程實(shí)踐

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

• Spectrum 的 Streaming Server-Side Rendering 以及分布式緩存的實(shí)踐: React 16 為我們帶來(lái)了 Streaming ServerSide Rendering，允許并發(fā)地進(jìn)行 HTML 傳輸與界面渲染。該特性優(yōu)化了首字節(jié)傳輸與首屏渲染的時(shí)間，使得用戶能更快地見(jiàn)到有意義的界面。本文則是 Spectrum CTO 分享的，他們是如何使用流式響應(yīng)以及分布式緩存來(lái)保證高性能的 React 應(yīng)用服務(wù)端渲染實(shí)踐；更多相關(guān)資料參考現(xiàn)代 Web 開發(fā)基礎(chǔ)與工程實(shí)踐--React 篇。

• GraphQL API 的安全加固: GraphQL 讓前端能夠便捷，乃至隨心所欲地進(jìn)行數(shù)據(jù)查詢，這樣保證了 API 的靈活性，但也帶來(lái)了一定的安全隱患。除去合法的，有效的查詢，惡意的攻擊者可能會(huì)提交很多耗時(shí)的、嵌套多層的查詢，從而耗光你的服務(wù)器、數(shù)據(jù)庫(kù)、網(wǎng)絡(luò)以及其他的計(jì)算與存儲(chǔ)資源。本文中，Spectrum CTO 為我們分享了他們?cè)谏a(chǎn)環(huán)境下是如何對(duì) GraphQL API 進(jìn)行安全加固的；更多相關(guān)資料參考 GraphQL Reference。

• Event sourcing vs CRUD: 很多情況下，事件驅(qū)動(dòng)(Event Sourcing)往往與領(lǐng)域驅(qū)動(dòng)開發(fā)(DDD)以及 CQRS 這種設(shè)計(jì)模式緊密連接在一起，不過(guò) Event Sourcing 并不僅僅是他們的部分，本文即是對(duì) Event Sourcing 與 CRUD 進(jìn)行的詳細(xì)對(duì)比介紹。Event Sourcing 也可以看做特殊的數(shù)據(jù)存儲(chǔ)方式，不同于傳統(tǒng)的以關(guān)系型數(shù)據(jù)庫(kù)為核心的存儲(chǔ)方式，Event Sourcing 并不會(huì)將記錄持久化，而是將變化存放為時(shí)序序列或者其他類型，從而方便消費(fèi)者進(jìn)行處理。更多相關(guān)資料參考 MicroService MindMap。

深度閱讀

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

• Promises 并不中立: Promises 方便了我們?cè)?JavaScript 中進(jìn)行異步操作，但是本文作者認(rèn)為 Promise 的中立性不足，以至于對(duì)整個(gè)生態(tài)系統(tǒng)造成了傷害。Promise 最簡(jiǎn)單的目標(biāo)，就是包含了某個(gè)未來(lái)可知的值，可能在下一次的 Event Loop，或者幾分鐘之后才能得到該值。作者認(rèn)為 Promise 不夠中立的原因包括：非延時(shí)執(zhí)行；不可取消；無(wú)法通過(guò)；then() 混淆了 map() 與 flatMap()。更多相關(guān)資料參考 現(xiàn)代 JavaScript 開發(fā)基礎(chǔ)。

• CSS 鍵盤記錄: 本項(xiàng)目，CSS Keylogging 包含了一個(gè) Chrome 插件，以及一個(gè) Express 服務(wù)器來(lái)演示如何利用 CSS 實(shí)現(xiàn)鍵盤記錄攻擊。該攻擊方式的原理很簡(jiǎn)單，就是利用 CSS 屬性選擇器來(lái)匹配字符，以及 background-image 屬性來(lái)將判斷的字符傳到服務(wù)器中；該項(xiàng)目還包含了簡(jiǎn)單的腳本來(lái)為每個(gè) ASCII 字符生成獨(dú)特的請(qǐng)求格式。更多相關(guān)資料參考 WebSecurity MindMap。

• 去中心化的意義: 在互聯(lián)網(wǎng)發(fā)展的第一波浪潮，大概是 1980s ~ 2000s 年間，互聯(lián)網(wǎng)服務(wù)都是基于開源的協(xié)議構(gòu)建，并且由社區(qū)維護(hù)控制。而在第二個(gè)年代，大概從 2000 年到現(xiàn)在，Google，Apple，Facebook 以及 Amazon 這樣的巨頭掌控著互聯(lián)網(wǎng)。隨著以區(qū)塊鏈為代表的加密網(wǎng)絡(luò)的興起，或許在未來(lái)我們可能會(huì)進(jìn)入去中心化的年代。本文即是從宏觀的歷史發(fā)展的角度，討論了去中心化的意義，以及其與中心化應(yīng)用相比的不足或優(yōu)勢(shì)；加密網(wǎng)絡(luò)允許我們構(gòu)建社區(qū)主導(dǎo)的網(wǎng)絡(luò)，并且方便第三方的開發(fā)者、創(chuàng)新者以及商業(yè)人才加入。更多相關(guān)資料參考 Web Series。

開源項(xiàng)目

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

• GhostText: GhostText 為我們提供了豐富的編輯器插件，從而允許我們能夠直接在編輯器中向?yàn)g覽器的輸入框中寫入內(nèi)容；換言之，所有在編輯器中輸入的內(nèi)容都會(huì)實(shí)時(shí)同步到瀏覽器中。

• Proton Native: 移動(dòng)端開發(fā)中，React Native 為我們帶來(lái)了跨平臺(tái)的界面構(gòu)建與狀態(tài)管理支持，從而能夠更方便地構(gòu)建跨平臺(tái)應(yīng)用。Proton Native 則是類似于 React Native 的，依托于 React 生態(tài)系統(tǒng)的，開發(fā)桌面擴(kuò)平臺(tái)應(yīng)用的框架；它同樣允許開發(fā)者使用 Redux 這樣的流行的庫(kù)。

• vue-ethereum-ipfs: vue-ethereum-ipfs 是基于 Vue，Ethereum 以及 IPFS 的分布式應(yīng)用服務(wù)器。Ethereum 可以看做分布式虛擬機(jī)，IPFS 則是分布式內(nèi)容分發(fā)網(wǎng)絡(luò)的一種，Vue 是用于構(gòu)建 Web 應(yīng)用的 JavaScript 框架。vue-ethereum-ipfs 通過(guò)將狀態(tài)存放于 Ethereum，并且使用 IPFS 來(lái)分發(fā) HTML，從而使得 Web 應(yīng)用更高效地運(yùn)行。

• basicScroll: basicScroll 為我們提供了面向移動(dòng)端與桌面的，基于 CSS Variables 控制的獨(dú)立并發(fā)滾動(dòng)效果。basicScroll 允許我們根據(jù)滾動(dòng)位置來(lái)改變 CSS Variables，并且可以使用 CSS Variables 來(lái)自定義動(dòng)畫。

巔峰人生

• Hinton：人類就是機(jī)器，絕妙的機(jī)器: 本文是對(duì)于深度學(xué)習(xí)之父，Geoffrey Hinton 人生與職業(yè)經(jīng)歷的簡(jiǎn)要介紹。三十多年來(lái)，Geoffrey Hinton 一直徘徊在人工智能研究的邊緣地帶。他像局外人一樣堅(jiān)守著一個(gè)簡(jiǎn)單的觀點(diǎn)：計(jì)算機(jī)可以像人類一樣思考，依靠直覺(jué)而不是規(guī)則。

前端之巔

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

總結(jié)

以上是生活随笔為你收集整理的前端每周清单第 52 期: Webpack 4.0，GraphQL 安全加固，去中心化的 Web的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。