前端每週清單第 26 期：Node.js 微服務實踐，Vue.js 與 GraphQL，Angular 元件技巧，HeadlessChrome 攻防

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

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

新聞熱點

國內國外，前端最新動態

Firefox 55 引入 WebVR 支援：近日釋出的 Windows 平臺上的 Firefox 55 版本，成為首個支援新 WebVR 標準的桌面瀏覽器；Mozilla 希望能夠以此推動 WebVR 的進一步發展。除此之外，Firefox 55 還支援包括 async generators 在內的眾多 ES2017/2018 特性，並且進一步提升了瀏覽器的效能表現以及安全保障；詳細的特性說明請檢視原文。
Google 開源 JavaScript 機器學習庫 DeepLearn.js：作為 Google 開源的可實現硬體加速的機器學習 JavaScript 庫，DeepLearn.js 提供高效的機器學習構建模組，使我們能夠在瀏覽器中訓練神經網路或在推斷模式中執行預訓練模型。它提供構建可微資料流圖的 API，以及一系列可直接使用的數學函式。
Next.js 3.0 釋出：Next.js 是用於快速建立 React 應用的零配置、單命令工具鏈，其內建支援了服務端渲染、程式碼分割等特性。在 3.0 版本中，Next.js 引入了靜態匯出功能，可以將 Next.js 應用匯出為靜態介面；同時新增了動態匯入的支援，允許動態匯入外部依賴，動態匯入 React 元件等操作。
Node.js 8.3.0 釋出，引入 Ignition 與 TurboFan 執行流：Ignition 與 TurboFan 是 V8 5.9 版本中提供的新的直譯器與編譯器，它們替換了自 2010 年以來的 Full-codegen 與 Crankshaft，可以閱讀這篇文章瞭解新的執行流帶來的巨大效能優化。新版本為 Node.js 帶來了極大的效能提升，除此之外新版本還修復了 8.x 系列中存在的部分錯誤，詳細的特性與更新列表可以檢視原文。
Angular 5 與 Progressive Web Apps：即將於九月份釋出的 Angular 5 版本將會是首個由 Google 驅動的 Progressive Web Apps 框架，Angular 5 中提供的特性包括：內建的 Progressive Web Apps 支援、能夠移除冗餘程式碼、壓縮應用體積的構建優化器、服務端渲染中整合 Material Design 元件等。本文還介紹了對於 Angular 6 的開發計劃的簡述以及依賴注入、HTML 模板引擎等一系列 Angular 優勢的分析。

開發教程

步步為營，掌握基礎技能

三週時間打造全棧 JavaScript Web 應用：本文記錄了某個程式設計初學者如何用三週時間，循序漸進地從零構建出，基於 JavaScript 的全棧電子商務應用。本文從最初的產品設計與原型圖構建開始，然後介紹瞭如何選擇合適的資料結構與資料庫。接下來介紹瞭如何建立 Github 倉庫並且使用敏捷開發流程，最後介紹瞭如何利用 Express 與 Firebase 搭建服務端、使用 React 以及 Victory.js 構建前端應用等內容；更多 JavaScript 相關學習參考現代 JavaScript 開發：語法基礎與實踐技巧。
利用 GraphQL 建立同構 Vue.js 應用：GraphQL 是由 Facebook 開源的面向介面的查詢語言，能夠彌補 REST API 中的不足；本文即介紹如何協同使用 Vue.js 與 GraphQL 來開發同構應用。本文首先介紹瞭如何搭建基本的 GraphQL 伺服器，然後討論瞭如何在 Vue.js 專案中引入 vue-apollo、ApolloClient 等依賴項並且建立簡單的 GraphQL 客戶端例項，最後介紹了在 Vue.js 元件中使用 graphql-tag 提供的便捷指令來快速實現前後臺的資料查詢；更多 GraphQL 相關資料參考這裡。
利用 Node.js 構建 API Gateway：隨著現代業務複雜度的增加，微服務的理念正在得到更多的落地實踐；作為微服務架構的重要組成部分，API Gateway 能夠為所有的後端服務提供統一的許可權校驗與客戶端協議相容的抽象層。本文首先介紹了微服務的基礎架構與 API Gateway 的概念，然後介紹了面向前端團隊的 Node.js API Gateway 組成；接下來詳細的分析了 API Gateway 的基礎功能需求：路由與版本、迭代式設計、許可權校驗、資料聚合、資料序列化與反序列化、限流與快取等等，最後討論了基於 Express 的 API Gateway 的實現。更多 Node.js 相關資料參考這裡。
利用 VasSonic 構建高效能 H5 首屏渲染：VasSonic 是由騰訊 VAS 團隊開發的輕量級高效能混合框架，它能夠有效地提升 Android 與 iOS 平臺上網站的首屏載入速度；VasSonic 不僅能夠優化服務端渲染地靜態或者動態網站，還能夠對於 Web 快取資源進行有效優化。VasSonic 使用了自定義的 URL 連線來替代原本的網路連線來請求 index 介面，因此它能夠提前或者併發地請求資源，從而避免了使用者額外的等待時間；更多使用資訊與特性請參考原本。

工程實踐

立足實踐，提示實際水平

利用 std/esm 在 Node.js 開發中使用 ES Modules：隨著主流瀏覽器逐步開始支援 ES Modules 標準，越來越多的目光投注於 Node.js 對於 ESM 的支援實現上；Node.js 擬計劃在 2020 年釋出的 9.x 版本中引入內建的 ESM 支援。而近日正式釋出的 @std/esm 為我們提供了高效能的 Node.js 中 CommonJS 與 ES Modules 模組間呼叫，其能夠作用於 Node.js 4.x 以上版本；它能夠順滑地整合到現有的 Webpack、Babel 環境中，並且支援不同模組使用不同的依賴版本。不同於目前的解決方案需要是釋出編譯之後的 CommonJS 格式的檔案，@std/esm 能夠以最小的代價的、按需轉化的、動態快取的方式來進行原始碼轉化。更多 Node.js 相關資料參考這裡。
使用 Angular 元件的四個技巧：從.5 版本的 AngularJS 開始，元件就成為 Angular 的一部分，它為程式碼的組織和回收提供了一種便捷的方式。Angular（Angular2 的簡稱）與其說是 Angular 1.x 的升級，不如說是“續集”，它在移動支援和其他功能的基礎上進行了完全地重寫。這裡，1.x 中使用的控制器完全被元件取代。無論是否曾經使用或想繼續堅持 1.x，無論是從零學起還是在跨越階段，為了確保程式碼儘可能地優雅且不會過時，你都需要開始使用元件。無論屬於以上哪一類，都可以在這裡找到很多幫助簡化流程的方法。
基於 Shadow DOM 的樣式封裝：Shadow DOM 是 Web Components 標準的重要組成部分，它能夠將 DOM 樹進行隔離封裝，而本文則是介紹如何利用 Shadow DOM 實現對於樣式類的隔離封裝。由於 CSS 並沒有提供內建的模組化或者作用域機制，而在大型專案中不同元件間的樣式又極易引發衝突，因此我們需要選擇合適的 CSS 樣式隔離方案。目前常用的隔離方案有 BEM 命名策略、IFrame、CSS Modules、CSS-in-JS 等，本文首先盤點了這些方案的優勢與不足；然後介紹了 Shadow DOM 的基本原理以及如何應用到樣式封裝上。更多 CSS/SCSS 相關資料參考這裡。
Headless Chrome 爬蟲攻防：Headless Chrome 為我們提供了便捷的自動化瀏覽器操作方式，也方便我們構建面向動態網頁的爬蟲；前幾日在 Hacker News 上的一篇如何檢測 Headless Chrome 的文章，詳細列舉了可用的辨別是否為 Headless Chrome 的方法，而本文即是討論瞭如何反制這些檢測方案。方案包括對於 User Agent 檢測可以在啟動時自定義 User Agent、對於語言與外掛的檢測可以插入指令碼動態修改 language 與 plugins 屬性、對於 WebGL Vendor 與 Renderer 可以 Hook 引數呼叫、對於 Broken Image 可以修改檔案描述符等。
WebAssembly 在 PSPDFKIT 的實踐：隨著今年三月份 WebAssembly Community Group 就標準達成一致，越來越多的主流瀏覽器開始支援 WebAssembly，本文即是 PDF 工具開發者 PSPDFKIT 介紹它們利用 WebAssembly 開發瀏覽器端渲染的 PDS 預覽工具的實踐經驗。本文首先介紹了 asm.js 的工作原理與編譯機制，然後闡述了 WebAssembly 的概念與組成，最後介紹了 WebAssembly 在 PSPDFKit 的實踐經驗以及他們在將原本大型 C++ 程式碼庫轉化為 WebAssembly 格式時的體驗；更多 WebAssembly 相關資料參考這裡。

深度閱讀

深度思考，昇華開發智慧

React 全家桶：石墨文件大前端技術選型分享：技術選型是個很大的話題。對於創業公司而言，為了適應業務節奏，「靈活」與「高開發效率」是技術選型最看重的兩點。而這兩點也是這些年前端技術井噴時期新出現的技術最注重解決的兩個問題。然而石墨文件作為一款擁有眾多企業使用者的富前端應用，複雜的表格、文件以及離線同步邏輯使得我們對於前端技術棧的工程化和穩定性有很高的要求，考慮到過於新的技術往往生態尚不完善以及相關的「最佳實踐」缺乏驗證，我們對於這些技術的選擇相對謹慎。石墨文件前端團隊的所有技術選型也都是圍繞如上兩點考慮的；更多 React 相關資料參考這裡。
基於 Vue.js 的原生應用開發：Weex 與 NativeScript 對比：Vue.js 相較於 React 與 Angular 有著更為平滑的學習曲線，不過目前 Vue.js 還沒有內建的類似於 React Native 這樣的原生應用開發方案。但是 Weex 與 NativeScript 都能夠彌補 Vue.js 的這個暫時性不足，每週清單在前幾期中也推薦過 NativeScript 與 Vue.js 協同開發的相關文章，本文即是對比 Weex 與 NativeScript 應用在原生開發中的各自優勢與不足；更多 Vue.js 相關資料參考這裡。
你看到的 Node.js 許可權校驗指南可能都存在著錯誤：許可權校驗幾乎是每個服務端應用程式的標配，本文作者在搜尋學習 Node.js / Express.js 相關的許可權校驗教程時發現大部分都或多或少地存在著問題，因此編撰了這篇文章以提醒其他開發者。常見的誤區可能包括憑證的儲存方式、密碼的重置策略、API Tokens 的生成與校驗、限流等多個方面；更多 Node.js 相關資料參考這裡。
高效能 Web 動畫與互動：到達 60 PFS：為使用者提供順滑的互動與動畫體驗是大部分 Web 應用的挑戰之一，很多開發者著眼於減少首屏載入時間，卻忘了去優化接下來的使用者互動。本文是來自 Algolia 的工程師介紹他們在構建高效能 Web 動畫與互動時的經驗技巧，本文首先介紹了常用的效能評測標準以及瀏覽器的渲染流程，佈局、繪製、組合等等。接下來本文介紹瞭如何充分利用 opacity 與 transform 屬性來減少動畫消耗、如何強制提升、如何優化動畫相關的程式碼等內容；

開源專案

樂於分享，共推前端發展

Nano ID: Nano ID 是輕量級的、支援 URL 的 JavaScript 唯一 ID 生成器，它使用了強力密碼加密的隨機 API，能夠保證生成符號分佈的平均性。
Resonance：Resonance 是資料驅動的高效能 React 動畫庫，它使用了 d3-timer 來管理成百上千地狀態變化；Resonance 允許開發者以簡單而親切地語法實現高效能的狀態更新動畫。
react-beautiful-dnd：react-beautiful-dnd 是 Atlassian 出品的漂亮易用的 React 列表拖拽功能增強庫。目前最流行的 React 拖拽庫 react-dnd 提供了相對底層的拖拽 API 支援，而 react-beautiful-dnd 則提供了面向垂直列表的高階封裝；react-beautiful-dnd 仍然處於不斷地迭代開發中，很期待它未來提供更多的優秀特性。
notifme-sdk：notifme-sdk 是用於簡化通知傳送流程的 Node.js 庫，它允許我們靈活地整合郵件、簡訊、推送、WebPush 等不同的渠道來傳送通知；notifme-sdk 還允許我們自由註冊服務提供商，內建的 Fallback 與輪詢機制也能進行簡單的容錯，同時 notifme-sdk 還提供了簡單的 UI 控制檯以方便我們僅介面化監控。

巔峰人生

如何成為一個合格的技術 Leader？：在即將到來的 10 月份上海 QCon 大會上，百度外賣研發中心總監張燦將帶來演講《向前一步——年輕技術管理者的涅槃重生》，InfoQ 在此之前，對張燦老師進行了一次獨家專訪，讓張燦老師聊聊作為女性技術人的成長感悟與對技術人轉向管理者的思考。本文即由採訪內容整理而成。

前端之巔

「前端之巔」是InfoQ旗下關注前端技術的垂直社群，加入前端之巔學習群請關注「前端之巔」公眾號後回覆“加群”。投稿請發郵件到editors@cn.infoq.com，註明“前端之巔投稿”；或者可以閱讀往期文章：