前端每週清單第 52 期: Webpack 4.0，GraphQL 安全加固，去中心化的 Web

前端每週清單第 52 期: Webpack 4.0，GraphQL 安全加固，去中心化的 Web

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

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

新聞熱點

國內國外，前端最新動態

• Webpack 4.0.0 發佈: 本週 Webpack 4 正式發佈，包含了大量的特性更新，以及極大的性能優化（最高可達 98%）。Webpack 4 中移除了 CommonsChunkPlugin，替換以一系列默認的配置以及簡單的 optimize.splitChunks 接口。同時 Webpack 4 爲咱們帶來了 mode 的配置項，容許開發者根據不一樣的需求選擇是面向開發環境優化仍是生產環境優化，從而下降了初學者的門檻。更多變化說明參考這裏。
• Parcel v1.6.0 發佈: 雖然距離 Parcel v1.5.0 發佈僅僅過去了三週，Parcel v1.6.0 依然爲咱們帶來了超過十五個的新特性以及大量的修復提高。該版本中值得關注的特性包括：基於 Babel 的 ES6+ 零配置轉化，面向 React 以及 Preact 的自動 JSX 支持，Node 以及 Electron 目標的支持，生產環境下包體分析，Node 6 以及 W3C WebManifest 的支持等。
• npm v5.7.0 發佈: 該版本帶來了一系列使人激動的特性與修復提高，本文便是對該版本的重點變化的詳細說明。該版本引入了 package-lock.json 文件的自動合併功能，開發者使用 npm install 的時候便可以自動合併 package-lock.json 與 npm-shrinkwrap.json。同時該版本引入了新的 ci 命令，其僅會安裝 lock 文件中的依賴項，而且會在 package.json 與 lock 文件不一致的時候拋出錯誤。該命令相較於 npm install 有 2 ~ 10 倍的性能速度提高，可以大大優化目前的 CI 持續集成流程。

開發教程

步步爲營，掌握基礎技能

• 你須要知道的關於 CSS Variables 的一切: 大部分的編程語言都支持變量，或者相似的特性；儘管 CSS 長久以來一直不支持自定義變量，隨着 Web 的快速發展咱們也欣慰地看到它引入了自定義屬性，或所謂的變量的特性。本文便是對於 CSS Variables 的全面介紹，從 CSS Variables 的特性原理到它在實際應用開發中的實踐；爲了更好地進行講解，做者還從零構建了三個項目：使用 CSS Variables 建立多態組件，基於 CSS Variables 的主題特性，建立小的 CSS Variable Booth。更多相關資料參考現代 Web 開發基礎與工程實踐-基礎篇。
• 2018 JavaScript 測試概述: 該指南旨在介紹 2018 年中應該掌握的與 JavaScript 測試相關的概念、名詞、工具與方法。本文集合了許多的優秀文章中的理念，以及做者自身多年在構建 Welldone 軟件解決方案過程當中積攢的經驗。做者在多年的工做中曾經面向不一樣的產品使用實踐了不一樣的測試解決方案的組合搭配，本文則是使用 Jest 進行單元測試與集成測試，而且使用 TestCafe 進行界面測試。更多相關資料參考 Awesome JavaScript Reference。
• 人臉識別：使用 React-Redux 以及 Kairos 來識別你本身: 咱們正處在人工智能與機器學習技術迅猛發展的年代，Face ID 與人臉識別也再也不高不可攀，而成爲了生活中不可缺乏的一部分。付諸實踐總好太高談闊論，本文做者即介紹如何使用 React-Redux 以及 Kairos 來建立人臉識別的應用，而且用它作一些有趣的事情。更多相關資料參考 DataScienceAI MindMap。

工程實踐

立足實踐，提示實際水平

• Spectrum 的 Streaming Server-Side Rendering 以及分佈式緩存的實踐: React 16 爲咱們帶來了 Streaming ServerSide Rendering，容許併發地進行 HTML 傳輸與界面渲染。該特性優化了首字節傳輸與首屏渲染的時間，使得用戶能更快地見到有意義的界面。本文則是 Spectrum CTO 分享的，他們是如何使用流式響應以及分佈式緩存來保證高性能的 React 應用服務端渲染實踐；更多相關資料參考現代 Web 開發基礎與工程實踐--React 篇。
• GraphQL API 的安全加固: GraphQL 讓前端可以便捷，乃至爲所欲爲地進行數據查詢，這樣保證了 API 的靈活性，但也帶來了必定的安全隱患。除去合法的，有效的查詢，惡意的攻擊者可能會提交不少耗時的、嵌套多層的查詢，從而耗光你的服務器、數據庫、網絡以及其餘的計算與存儲資源。本文中，Spectrum CTO 爲咱們分享了他們在生產環境下是如何對 GraphQL API 進行安全加固的；更多相關資料參考 GraphQL Reference。
• Event sourcing vs CRUD: 不少狀況下，事件驅動(Event Sourcing)每每與領域驅動開發(DDD)以及 CQRS 這種設計模式緊密鏈接在一塊兒，不過 Event Sourcing 並不只僅是他們的部分，本文便是對 Event Sourcing 與 CRUD 進行的詳細對比介紹。Event Sourcing 也能夠看作特殊的數據存儲方式，不一樣於傳統的以關係型數據庫爲核心的存儲方式，Event Sourcing 並不會將記錄持久化，而是將變化存放爲時序序列或者其餘類型，從而方便消費者進行處理。更多相關資料參考 MicroService MindMap。

深度閱讀

深度思考，昇華開發智慧

• Promises 並不中立: Promises 方便了咱們在 JavaScript 中進行異步操做，可是本文做者認爲 Promise 的中立性不足，以致於對整個生態系統形成了傷害。Promise 最簡單的目標，就是包含了某個將來可知的值，可能在下一次的 Event Loop，或者幾分鐘以後才能獲得該值。做者認爲 Promise 不夠中立的緣由包括：非延時執行；不可取消；沒法經過；then() 混淆了 map() 與 flatMap()。更多相關資料參考 現代 JavaScript 開發基礎。
• CSS 鍵盤記錄: 本項目，CSS Keylogging 包含了一個 Chrome 插件，以及一個 Express 服務器來演示如何利用 CSS 實現鍵盤記錄攻擊。該攻擊方式的原理很簡單，就是利用 CSS 屬性選擇器來匹配字符，以及 background-image 屬性來將判斷的字符傳到服務器中；該項目還包含了簡單的腳原本爲每一個 ASCII 字符生成獨特的請求格式。更多相關資料參考 WebSecurity MindMap。
• 去中心化的意義: 在互聯網發展的第一波浪潮，大概是 1980s ~ 2000s 年間，互聯網服務都是基於開源的協議構建，而且由社區維護控制。而在第二個年代，大概從 2000 年到如今，Google，Apple，Facebook 以及 Amazon 這樣的巨頭掌控着互聯網。隨着以區塊鏈爲表明的加密網絡的興起，或許在將來咱們可能會進入去中心化的年代。本文便是從宏觀的歷史發展的角度，討論了去中心化的意義，以及其與中心化應用相比的不足或優點；加密網絡容許咱們構建社區主導的網絡，而且方便第三方的開發者、創新者以及商業人才加入。更多相關資料參考 Web Series。

開源項目

樂於分享，共推前端發展

• GhostText: GhostText 爲咱們提供了豐富的編輯器插件，從而容許咱們可以直接在編輯器中向瀏覽器的輸入框中寫入內容；換言之，全部在編輯器中輸入的內容都會實時同步到瀏覽器中。
• Proton Native: 移動端開發中，React Native 爲咱們帶來了跨平臺的界面構建與狀態管理支持，從而可以更方便地構建跨平臺應用。Proton Native 則是相似於 React Native 的，依託於 React 生態系統的，開發桌面擴平臺應用的框架；它一樣容許開發者使用 Redux 這樣的流行的庫。
• vue-ethereum-ipfs: vue-ethereum-ipfs 是基於 Vue，Ethereum 以及 IPFS 的分佈式應用服務器。Ethereum 能夠看作分佈式虛擬機，IPFS 則是分佈式內容分發網絡的一種，Vue 是用於構建 Web 應用的 JavaScript 框架。vue-ethereum-ipfs 經過將狀態存放於 Ethereum，而且使用 IPFS 來分發 HTML，從而使得 Web 應用更高效地運行。
• basicScroll: basicScroll 爲咱們提供了面向移動端與桌面的，基於 CSS Variables 控制的獨立併發滾動效果。basicScroll 容許咱們根據滾動位置來改變 CSS Variables，而且可使用 CSS Variables 來自定義動畫。

巔峯人生

• Hinton：人類就是機器，絕妙的機器: 本文是對於深度學習之父，Geoffrey Hinton 人生與職業經歷的簡要介紹。三十多年來，Geoffrey Hinton 一直徘徊在人工智能研究的邊緣地帶。他像局外人同樣堅守着一個簡單的觀點：計算機能夠像人類同樣思考，依靠直覺而不是規則。

前端之巔

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