前端每週清單第 43 期：2017 JavaScript 回顧、Rust 與 WebAssembly 開發遊戲、Node.js 架構模式

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

新聞熱點

國內國外，前端最新動態

• Angular 5.1 發佈: 本文介紹了 Angular 5.1.0, Angular CLI 1.6 以及 Angular Material 的首個穩定版本的特性變化。Angular 5.1.0 中包含了多個小的特性變化與錯誤修復，這次系列更新主要包括了 Angular Material & CDK 穩定版發佈、CLI 工具支持 Service Worker、對於 Universal 以及 AppShell 支持的提高、裝飾器錯誤信息優化、支持 TypeScript 2.5 等等。

• Ant Design 3.0 發佈: Ant Design 是面向企業級桌面應用的設計方案與實現，在 2.0 版本發佈的 14 個月以後，3.0 版本正式發佈，包含了來自 200 多位貢獻者的超過 4000 次提交。Ant Design 3.0 版本中引入了新的色彩系統，其受到天空的啓發，包含了薄暮、日出、拂曉藍等一系列優美的色彩搭配；該版本還引入了新的組件設計，包括了對於大量組件的複寫，徹底支持 React 16 與 ES Module，而且優化了對於 TypeScript 的支持。

• Font Awesome 5 發佈: 本週，Font Awesome 5.0.0 正式發佈，爲咱們帶來了全新的主頁，包含了九百多個免費圖標與一千多的商業圖標。5.0 中提供了多種整合方式，最爲推薦的是利用 JavaScript 與 SVG 圖標協同使用，以替代原有的字體圖標，從而提高性能與易用性。

• TensorFlow Lite 支持 Core ML: TensorFlow Lite 是面向移動設備與嵌入式設備的輕量級 TensorFlow 版本，近日其宣佈開始支持 Core ML，經過工具可以將 TensorFlow 模型轉化爲 .mlmode 這樣的 Core ML 模型格式。Core ML 是 iOS 內置的機器學習框架，這意味着 iOS 開發者可以在 Core ML 上部署 TensorFlow 模塊，也是 TensorFlow Lite 在跨平臺支持上的重要一步；另外一方面，Apple 也開源了自定義機器學習模型框架 Turi Create，來幫助開發者快速開發機器學習模塊而且集成到 iOS 應用中。

開發教程

步步爲營，掌握基礎技能

• 使用 Rust 開發基於 WebAssembly 的遊戲: 數週前，Alex Crichton 的 PR 使得 Rust 可以直接被編譯爲 WebAssembly 格式，本文做者也嘗試將基於 Rust 與 Piston 編寫的桌面遊戲 Rocket， 轉化爲可以在瀏覽器中運行的 WebAssembly 格式的應用。做者使用 JavaScript 來處理用戶的輸入輸出，而且進行界面渲染，使用 Rust 來處理遊戲邏輯；做者依次介紹了本身在遷移過程當中碰到的多個 Link 錯誤以及處理方案，而後討論了 Rust 與 JavaScript 如何相互調用，以進行畫面渲染與接收用戶輸入輸出等內容。更多 WebAssembly 相關資料參考這裏。

• 的變遷：非 GIF 的動圖實現: 圖片是現代網頁應用中不可或缺的部分，GIFs 是動圖實現的選擇之一，但其質量與性能一直差強人意；若是直接使用 video 標籤，又是沒法發揮 preloaded 的做用，還必須分段請求。在 Safari Technology Preview 中，容許開發者使用 <img src="https://user-gold-cdn.xitu.io/2017/12/11/16044d045762c64d"> 的形式來實現簡單的動圖需求，相較於本來的 GIF 的解決方案能帶來將近二十倍的性能提高，而且支持 CSS 方式背景播放，其體積也有大幅度的下降。更多的圖片處理與性能優化資料參考這裏。

• 使用 Electron 與 React 建立 Markdown 應用: 本文按部就班地介紹瞭如何使用 Electron 與 React 構建簡單的 MarkDown 應用，做者將其命名爲 Mook。本文依次介紹了技術棧的選擇與考量，開發環境、構建流程與模板應用搭建，主功能開發等內容；更多 Electron 學習資料參考這裏。

工程實踐

立足實踐，提示實際水平

• Airbnb 列表頁的 React 性能問題淺析: Airbnb 已經使用 React Router 與 Hypernova 將核心訂購流程轉化爲了服務端渲染的單頁應用，本文則是介紹其如何將列表詳情頁進行單頁應用話改造，而且綜合提升其性能。本文首先討論瞭如何進行性能評測，這篇文章也介紹瞭如何使用 Chrome DevTools 來調試 React 的性能問題；而後介紹了其在初始化渲染、滾動優化、點擊反饋、輸入輸出方面的優化技巧。更多 React 相關教程參閱 React 與前端工程化實踐。

• Node.js 的可擴展應用模式：CQRS, ES, Onion: 本文介紹如何使用 CQRS 與 Event Sourcing 模式來開發 Node.js 應用，使用 Onion 架構來組織這些模式，而且使用 TypeScript 來進行靜態類型校驗。本文首先討論了何謂靈活架構：業務邏輯與實現分離、獨立於數據庫，框架，服務等等；而後介紹了 Event Sourcing 與 CQRS 的含義，以及它們是如何組織在洋蔥圈模型中的，最後以典型的認證邏輯爲例討論瞭如何實現 CQRS 模式。更多 Node.js 的知識能夠閱讀深刻淺出 Node.js 全棧架構。

• 基於 Intersection Observer 與 SQIP 的漸進式圖片加載: 當咱們瀏覽 Facebook、Pinterest 、 Medium 等內容類網站時，會發現圖片是漸進式加載，即首先出現低質量的、模糊的圖片，而後再出現真正的圖片，本文便是介紹如何使用 Intersection Observer 與 SQIP 實現漸進式加載。以前的清單中咱們有介紹過 SQIP 這種圖片替代（Image PlaceHolder ）的生成方式，其可以生成不足 1KB 的 SVG 格式的低質量圖片；而 Intersection Observer 則可以判斷某個圖片元素是否在視口內，從而實現按需加載。更多的圖片處理與性能優化資料參考這裏。

深度閱讀

深度思考，昇華開發智慧

• Orinoco: V8 中的年輕代垃圾回收: V8 引擎中的 JavaScript 對象被分配在了堆上，而且由 V8 的垃圾回收器進行生命週期的管理；本文便是介紹 Parallel Scavenger，Orinoco 的最新特性之一，是如何針對年輕代進行垃圾回收的。本文首先介紹了分代垃圾回收模型，而後討論了單線程的 Cheney’s Semispace Copy 算法，最後討論了 Parallel Mark-Evacuate 以及 Parallel Scavenge 回收器的設計；更多 V8 相關資料索引參考這裏。

• 2017 JavaScript 發展回顧: 在 2017 年 JS 狀態調查結果出爐以前，Sacha Greif 先和幾位專家聊了聊他們對於 2017 年 JavaScript 發展的見解與回顧，並整理成了這篇文章。本文從測試工具、構建工具、狀態管理、全棧架構等幾個不一樣的方面進行了討論，對 2017 年中使人印象深入的技術進行了分享；除此以外，A recap of front-end development in 2017 也是一篇不錯的總結，更多 JavaScript 相關資料參考這裏。

• Web 內容可用性提高指南: World Wide Web Consortium (W3C) 發佈的 Web Content Accessibility Guidelines 2.0 是網頁內容可用性的絕佳指南，可以幫助設計者與開發者來提高網頁的總體可用性；本文則是對這份指南的簡要總結，以幫助那些沒有時間閱讀原指南的開發者快速瞭解網頁可用性方面的知識。本文依次討論瞭如何判斷用戶可否有效地接受網頁內信息、如何判斷用戶可否有效地使用網頁中的控制按鈕與跳轉連接、用戶是否可以理解網頁內容、是否針對複雜的用戶環境進行了適配等內容；更多 Web 開發相關內容閱讀現代 Web 開發工程化實踐。

• 卡通圖解 JavaScript 引擎: 本系列文章着眼於從運行機制的角度來介紹 JavaScript，首篇文章介紹了 Callback Queue、Event Loop 等異步執行相關的概念，本文則是從引擎的角度，以漫畫的方式來介紹 JavaScript 的編譯、解析與執行的過程。上週的清單中咱們推薦了 V8 引擎的推測優化，本文則是提綱挈領地介紹 JIT 編譯器的原理，給讀者一個宏觀的概念展現；更多 JavaScript 引擎相關資料參考這裏。

開源項目

樂於分享，共推前端發展

• Parcel: Parcel 是高速、零配置的 Web 應用打包工具；其面向現代操做系統設計，可以進行多核併發編譯，而且提供了文件系統的緩存以優化重構建或者增量構建的性能。Parcel 還提供了開箱即用的 JS, CSS, HTML, 資源文件等支持，可以自動地使用 Babel, PostCSS,PostHTML 來進行代碼轉換，同時內建支持 import() 動態導入與熱替換。

• electron-toolkit: electron-toolkit 是輕量級的、強大的 Electron 應用的啓動輔助工具，它可以以 NPM 腳本的方式啓動，爲開發者提供一系列開發過程當中須要的輔助工具。這些工具包括了圖標生成、截圖工具、安裝器、二進制文件生成、網站生成、實時更新等等。

• Muuri: Muuri 是強大的 JavaScript 佈局引擎，吸納了來自 Packery, Masonry, Isotope, 以及 Sortable 的優秀特性，輔助開發者快速構建響應式、可排序、可過濾、可拖拽、可動畫控制的可擴展表格系統。

• Vuetron: Vuetron 是基於 Electron 開發的，幫助 Vue.js 項目測試以及錯誤檢測的工具，同時支持 Vuex 以及 Vue-Router。相似於 Developer Tools，Vuetron 可以查看事件、應用狀態以及進行時間回溯的調試；同時還可以實現監聽指定狀態變量的變化，查看 API 請求與響應，可視化查看組件結構樹等等功能。

巔峯人生

• 從黑客到創業，他說技術創業該這麼作！: 本文是知道創宇 CTO & COO 楊冀龍在極客 Live 中分享的創業感悟和踩過的那些坑。楊冀龍是安全焦點民間白帽黑客組織核心成員，被《浪潮之巔》評爲中國新一代黑客領軍人物之一；他在本文中依次分享了對於黑客的定義、如何從黑客成爲一名安全創業者、技術創業踩過的坑、給技術創業者建議等內容。

前端之巔

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