摘要：前端每周清單第期微服務實踐，與，組件技巧，攻防作者王下邀月熊編輯徐川前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。

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

前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（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，注明“前端之巔投稿”；或者可以閱讀往期文章：

Web 前端入門與工程實踐的前端每周清單列表；

前端每周清單第 25 期：Vue2 響應式原理，RN 運行內置 Node，JS 巧用 Proxy 反混淆，GraphQL 優劣思辨，深入 React 動畫；

前端每周清單第 24 期：React 16 中異常處理與 Fiber 實戰、Vue 圖表與 jQuery 插件、V8 Turbofan 性能優化。