前端每周清單第 22 期：ES8 正式發布、React 與 GraphQL 開發指南和性能優化，Vue.js 2.4.0 發布

01-24

新聞熱點

國內國外，前端最新動態

ECMAScript 2017（ES8）正式發布：ECMAScript 2017 或 ES8 於 2017 年六月底由 TC39 正式發布，可以在這裡瀏覽完整的版本；ES8 中代表性的特徵包括了 String padding、Object.values、Object.entries、Object.getOwnPropertyDescriptors、函數參數列表與調用中的尾部逗號、非同步函數、共享內存與原子操作等。
Vue.js 2.4.0 發布：Vue.js 2.4.0 版本提供了內置的服務端渲染與非同步組件支持，從而保證了在服務端渲染中也能使用非同步組件，而不再是局限於路由中使用。此外該版本還簡化了包裝組件的寫法、提供了 v-on 等一系列新的指令或者 API 特性，並且修復了老版本中存在的錯誤；更多詳細內容可參考原文，或者閱讀 Vue.js 2.4.0 中的 4 個重大變化一文。
npm 5.2.0 內置 npx 包執行器：近日發布的 npm 5.2.0 版本中內置了伴生命令：npx，類似於 npm 簡化了項目開發中的依賴安裝與管理，該工具致力於提升開發者使用包提供的命令行的體驗。npx 允許我們使用本地安裝的命令行工具而不需要再定義 npm run-script，並且允許我們僅執行一次腳本而不需要再將其實際安裝到本地；同時 npx 還允許我們以不同的 node 版本來運行指定命令、允許我們互動式地開發 node 命令行工具以及便捷地安裝來自於 gist 的腳本。
Babylon.js 3.0 發布：Babylon.js 是基於 HTML5 與 WebGL 的創建 3D 交互應用的開源框架，它提供了易用的 API 與開箱即用的性能優化。近日發布的 3.0 版本是 Babylon 重要的里程碑之一，該版本包含了大量的新特性與錯誤修復，支持 WebGL 2、WebVR 1.1、gITF 2.0、PBR 等多個特性。
Node.js 發布重大安全更新：近日 Node.js 發布重大安全更新，主要針對固定哈希表種子值（Constant HashTable Seeds）等多個 Bug。目前流行中幾個版本的 Node.js（8.x，7.x，V6 LTS，V4 LTS）中都使用了固定的哈希表種子值，這有可能會導致 Node.js 應用受到基於哈希洪水的 DoS 攻擊；暫時的修復方式是默認關閉 V8 的快照功能，導致依賴於 vm.runInNewContext的代碼會有所性能損耗，不過未來會選擇合適的方案重新實現該部分代碼。

開發教程

步步為營，掌握基礎技能

Progressive Web Apps 入門教程：或許你已經對 PWA 有所耳聞，或者已經真實使用過某個 PWA 應用；本文並不著眼於詳細介紹 PWA 的內部原理與工作機制，而是希望以簡明扼要的語義引導讀者構建 PWA 應用。本文依次介紹了如何測試自身應用的 PWA 評分、構建圖標與說明、添加 Service Worker、發布到 Github Pages 等；更多 PWA 相關資料參考 https://parg.co/bVh。
GraphQL 全棧教程：HowToGraphQL 是介紹 GraphQL 的全棧教程，由 Graphcool 以及很多其他優秀的貢獻者協作而成。該教程首先是對於 GraphQL 設計理念、基礎概念以及先進特性的介紹，然後介紹了在 React、Vue、Expo 等前端項目中如何使用 GraphQL，以及如何使用 Graphcool、JavaScript、Java 等語言快速搭建 GraphQL 服務端；更多 GraphQL 相關資料參考https://parg.co/b1e 。
Vue.js 項目中使用 TypeScript：Vue.js 是優秀的漸進式前端框架，而 TypeScript 則可以為項目添加靜態類型檢測的特性，本文即是介紹如何在 Vue.js 項目中使用 TypeScript。本文以 Vue.js 中的單文件組件為例，首先討論了 tsconfig.json 的基本配置以及如何引入 Webpack 並配置合適的 loader；然後介紹了 TypeScript 的基礎用法，更多 Vue.js 相關資料參考 https://parg.co/byL 。
NgRx 的設計模式與技巧分享：狀態管理一直是構建前端應用過程中的難點之一， Angular 也為我們提供了多種不同的設計模式來進行狀態管理；而本文即是介紹如何使用 NgRx 這個庫進行狀態管理。NgRx 是非常簡單易用，沒有太多限制條件的狀態管理庫；本文首先概述了 NgRx 的核心概念與設計原則，然後以實際的項目為例介紹了如何使用 NgRx 處理 Action 以及副作用。
從零到一學習如何用 Babylon.js 創建跨平台的 WebVR 體驗：WebVR 允許我們跨平台地在多設備上發布應用與內容，而本文即介紹如何利用 Babylon.js 創建跨平台地 WebVR 應用。本文首先介紹了可供開發者使用的 VR 設備與擴展，然後介紹如何搭建基礎的開發環境、如何開發 WebVR 的基本幀動畫、如何響應用戶交互並且添加第三方控制器等內容。

工程實踐

立足實踐，提示實際水平

用強類型語言 GraphQL 增強 React：GraphQL、React 這兩項技術都來自 Facebook，它們共同成長。在本文中，Shane Stillwell 展示了 GraphQL 作為一種強類型的基於 JavaScript 的語言，如何幫助開發者與他們的數據建立聯繫並改善跨服務邊界的封送處理。GraphQL 是可擴展的，並可與 REST 共存，可以在任意後端軟體中實現；更多 GraphQL 相關資料參考https://parg.co/b1e 。
高性能 React 開發：3 個常用的輔助工具：我們可以使用 React 開發高性能的應用，不過有時候一些小的錯誤卻會導致嚴重的性能錯誤。緩慢的組件掛載、過深的組件樹以及不必要的渲染都有可能會削弱應用用戶體驗。幸而現在有很多優秀的工具能夠幫助我們應對這些性能問題，而作者在本文中即是詳細地介紹了三個輔助工具及相關技術以提升應用性能；更多 React 相關資料參考 https://parg.co/bM1 。
你可能並不知道的 16 個 SCSS 特性點擊預覽：作者自 2009 年以來一直使用 SCSS/SASS 來進行大部分的樣式工作，而本文即是對於某些有用但是並不一定為人所知的 SCSS 特性進行介紹。本文介紹的特性包括了父選擇器的靈活用法、控制流指令、默認函數參數、擴展操作符等等；更多 CSS/SCSS 相關資料參考 https://parg.co/baH 。
大幅度減少 CSS 包體大小：本文作者介紹了自己在構建某個在線售票的網站過程中，如何利用樣式類名分割與作用域隔離來大幅度減少 CSS 打包文件體積的實踐技巧。作者主要使用 CSS Modules，然後自定義了其樣式類名生成規則來保證生成較短的樣式類名並且使用作用域隔離來保證樣式隔離。
擴展 Node.js 應用：Node.js 設計的初衷之一即是保證其可擴展性，本文則詳細介紹了開發者應該了解的可用於擴展 Node.js 應用的內建工具。本文首先介紹了複製、分解、分割等常用的設計思想，然後討論了如何利用 Node.js 內置的 Cluster 模塊來保證應用的可擴展性與如何提供零停機重啟的特性。

深度閱讀

深度思考，升華開發智慧

常見 Web 框架的內部技術縱覽：該系列文章從用戶界面開發、用戶體驗設計以及內部技術縱覽等多個角度討論了現代 Web 框架的設計理念與思路；而本文著重於討論不同的 Web 框架，對於某些共通的基本需求的不同實現方式，包括了它們支持的運行環境、如何與現有的規範保持一致、如何提供函數式支持、如何保證前向兼容性、如何進行國際化等多個方面。
Node.js 實戰第二版：該倉庫是 Azat Mardan 的著作 Practical Node.js 第二版參考的開源發布地址，包含了十二個章節與相關的示範代碼，非常值得一讀。該書依次介紹了 Node.js 環境搭建與 Express.js 初探、基於 Mocha 的單元測試、模板引擎、數據持久化與性能優化、項目調試、部署與發布等章節；更多 Node.js 相關資料參考 https://parg.co/be0 。
解構 React Fiber，了解其工作流程：調和演算法是 React 的核心機制之一，而在即將發布的 16.0.0 版本中 React 會引入 Fiber 替代現有的 Stack Reconciler。本文則是深入淺出地介紹 Fiber 工作流程與代碼邏輯，首先從客戶端渲染的入口函數 render 開始，然後介紹在狀態變化之後一系列地響應步驟；更多相關資料參考 https://parg.co/bM1 。
代碼風格約定與標準：本倉庫提供了一系列的各個語言的常用代碼風格約定與標準，與 JavaScript 相關的包含了來自 Google、Airbnb 等多個公司或者社區的樣式規範，還有包括 HTML、CSS、SCSS 等一系列 Web 相關的規範。
ES2015 中集合迭代器的優化：ECMAScript 2015 中引入了 Map 與 Set 等常用的集合；這些集合同樣實現了迭代器的特性，因此也就允許我們使用 for-of 或者擴展操作符來迭代操作這些集合。不過在很多的評測中這些新引入的集合的迭代遍歷性能並不是很好，本文則詳細介紹了引擎中導致 Set 等集合迭代性能較差的原因，並且給出了解決方案與未來的實現規劃。

開源項目

樂於分享，共推前端發展

Pell：Pell 是僅有 1KB 的所謂所見即所得的富文本編輯器，其不需要依賴於 jQuery、BootStrap 等第三方庫。Pell 主要以 ES6 語法開發，並且支持自定義的 SCSS 文件或者複寫 CSS 樣式來自定義風格，也是非常不錯的值得借鑒的編輯器開發示例。
doppio: doppio 是基於 TypeScript 0.5.0 版本編寫的 Java 虛擬機（JVM），其支持 Node.js 6.0 以上版本，並且內置了 Java 8 JDK 環境；doppio 是個有趣的嘗試打破瀏覽器語言柵欄的嘗試，瀏覽其源代碼也可以學習如何編寫 Java 虛擬機。
Bundle Buddy：Bundle Buddy 能夠通過分析編譯生成的 SourceMap 來尋找 JavaScript 代碼塊之間的源代碼冗餘情況。該工具能夠幫助開發者尋找合適的代碼分割點以降低最終發布應用的不穩定性，同時還能提升頁面載入性能。
gpu.js：在上周的前端每周清單中我們介紹過 GPGPU（General Purpose Computing on GPUs）的概念與基於 WebGL 的實現方式，而 gpu.js 就是提供了瀏覽器中快速實現 GPGPU 的單文件 JavaScript 庫。gpu.js 能夠自動地將某些特定的 JavaScript 函數編譯為中間語言，然後利用 WebGLS API 使其運行在 GPU 中；而在某些無法使用 GPU 的環境下，仍然會將這些函數以正常的 JavaScript 執行流運行。
TagUI: TagUI 是通用的 Web 自動化交互，提供了開箱即用的聲明式流程配置使用特性，支持 Chrome、Firefox、PhantomJS、Headless Chrome 等多個運行環境；同時 TagUI 還提供了 Chrome 插件以記錄具體步驟以及對象存儲和靈活的資料庫存儲支持。

前端之巔

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