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

王下邀月熊發表於2018-02-26
前端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。

工程實踐

立足實踐，提示實際水平

  • 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，註明 “ 前端之巔投稿 ”。

前端之巔微信底圖－5.jpg

相關文章