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

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

前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開發(fā)教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單。

國內(nèi)國外，前端最新動態(tài)

Firefox 55 引入 WebVR 支持：近日發(fā)布的 Windows 平臺上的 Firefox 55 版本，成為首個支持新 WebVR 標(biāo)準(zhǔn)的桌面瀏覽器；Mozilla 希望能夠以此推動 WebVR 的進(jìn)一步發(fā)展。除此之外，F(xiàn)irefox 55 還支持包括 async generators 在內(nèi)的眾多 ES2017/2018 特性，并且進(jìn)一步提升了瀏覽器的性能表現(xiàn)以及安全保障；詳細(xì)的特性說明請查看原文。

Google 開源 JavaScript 機(jī)器學(xué)習(xí)庫 DeepLearn.js：作為 Google 開源的可實現(xiàn)硬件加速的機(jī)器學(xué)習(xí) JavaScript 庫，DeepLearn.js 提供高效的機(jī)器學(xué)習(xí)構(gòu)建模塊，使我們能夠在瀏覽器中訓(xùn)練神經(jīng)網(wǎng)絡(luò)或在推斷模式中運(yùn)行預(yù)訓(xùn)練模型。它提供構(gòu)建可微數(shù)據(jù)流圖的 API，以及一系列可直接使用的數(shù)學(xué)函數(shù)。

Next.js 3.0 發(fā)布：Next.js 是用于快速創(chuàng)建 React 應(yīng)用的零配置、單命令工具鏈，其內(nèi)建支持了服務(wù)端渲染、代碼分割等特性。在 3.0 版本中，Next.js 引入了靜態(tài)導(dǎo)出功能，可以將 Next.js 應(yīng)用導(dǎo)出為靜態(tài)界面；同時添加了動態(tài)導(dǎo)入的支持，允許動態(tài)導(dǎo)入外部依賴，動態(tài)導(dǎo)入 React 組件等操作。

Node.js 8.3.0 發(fā)布，引入 Ignition 與 TurboFan 執(zhí)行流：Ignition 與 TurboFan 是 V8 5.9 版本中提供的新的解釋器與編譯器，它們替換了自 2010 年以來的 Full-codegen 與 Crankshaft，可以閱讀這篇文章了解新的執(zhí)行流帶來的巨大性能優(yōu)化。新版本為 Node.js 帶來了極大的性能提升，除此之外新版本還修復(fù)了 8.x 系列中存在的部分錯誤，詳細(xì)的特性與更新列表可以查看原文。

Angular 5 與 Progressive Web Apps：即將于九月份發(fā)布的 Angular 5 版本將會是首個由 Google 驅(qū)動的 Progressive Web Apps 框架，Angular 5 中提供的特性包括：內(nèi)建的 Progressive Web Apps 支持、能夠移除冗余代碼、壓縮應(yīng)用體積的構(gòu)建優(yōu)化器、服務(wù)端渲染中集成 Material Design 組件等。本文還介紹了對于 Angular 6 的開發(fā)計劃的簡述以及依賴注入、HTML 模板引擎等一系列 Angular 優(yōu)勢的分析。

步步為營，掌握基礎(chǔ)技能

三周時間打造全棧 JavaScript Web 應(yīng)用：本文記錄了某個編程初學(xué)者如何用三周時間，循序漸進(jìn)地從零構(gòu)建出，基于 JavaScript 的全棧電子商務(wù)應(yīng)用。本文從最初的產(chǎn)品設(shè)計與原型圖構(gòu)建開始，然后介紹了如何選擇合適的數(shù)據(jù)結(jié)構(gòu)與數(shù)據(jù)庫。接下來介紹了如何創(chuàng)建 Github 倉庫并且使用敏捷開發(fā)流程，最后介紹了如何利用 Express 與 Firebase 搭建服務(wù)端、使用 React 以及 Victory.js 構(gòu)建前端應(yīng)用等內(nèi)容；更多 JavaScript 相關(guān)學(xué)習(xí)參考現(xiàn)代 JavaScript 開發(fā)：語法基礎(chǔ)與實踐技巧。

利用 GraphQL 創(chuàng)建同構(gòu) Vue.js 應(yīng)用：GraphQL 是由 Facebook 開源的面向接口的查詢語言，能夠彌補(bǔ) REST API 中的不足；本文即介紹如何協(xié)同使用 Vue.js 與 GraphQL 來開發(fā)同構(gòu)應(yīng)用。本文首先介紹了如何搭建基本的 GraphQL 服務(wù)器，然后討論了如何在 Vue.js 項目中引入 vue-apollo、ApolloClient 等依賴項并且創(chuàng)建簡單的 GraphQL 客戶端實例，最后介紹了在 Vue.js 組件中使用 graphql-tag 提供的便捷指令來快速實現(xiàn)前后臺的數(shù)據(jù)查詢；更多 GraphQL 相關(guān)資料參考這里。

利用 Node.js 構(gòu)建 API Gateway：隨著現(xiàn)代業(yè)務(wù)復(fù)雜度的增加，微服務(wù)的理念正在得到更多的落地實踐；作為微服務(wù)架構(gòu)的重要組成部分，API Gateway 能夠為所有的后端服務(wù)提供統(tǒng)一的權(quán)限校驗與客戶端協(xié)議兼容的抽象層。本文首先介紹了微服務(wù)的基礎(chǔ)架構(gòu)與 API Gateway 的概念，然后介紹了面向前端團(tuán)隊的 Node.js API Gateway 組成；接下來詳細(xì)的分析了 API Gateway 的基礎(chǔ)功能需求：路由與版本、迭代式設(shè)計、權(quán)限校驗、數(shù)據(jù)聚合、數(shù)據(jù)序列化與反序列化、限流與緩存等等，最后討論了基于 Express 的 API Gateway 的實現(xiàn)。更多 Node.js 相關(guān)資料參考這里。

利用 VasSonic 構(gòu)建高性能 H5 首屏渲染：VasSonic 是由騰訊 VAS 團(tuán)隊開發(fā)的輕量級高性能混合框架，它能夠有效地提升 Android 與 iOS 平臺上網(wǎng)站的首屏加載速度；VasSonic 不僅能夠優(yōu)化服務(wù)端渲染地靜態(tài)或者動態(tài)網(wǎng)站，還能夠?qū)τ?Web 緩存資源進(jìn)行有效優(yōu)化。VasSonic 使用了自定義的 URL 連接來替代原本的網(wǎng)絡(luò)連接來請求 index 界面，因此它能夠提前或者并發(fā)地請求資源，從而避免了用戶額外的等待時間；更多使用信息與特性請參考原本。

立足實踐，提示實際水平

利用 std/esm 在 Node.js 開發(fā)中使用 ES Modules：隨著主流瀏覽器逐步開始支持 ES Modules 標(biāo)準(zhǔn)，越來越多的目光投注于 Node.js 對于 ESM 的支持實現(xiàn)上；Node.js 擬計劃在 2020 年發(fā)布的 9.x 版本中引入內(nèi)置的 ESM 支持。而近日正式發(fā)布的 @std/esm 為我們提供了高性能的 Node.js 中 CommonJS 與 ES Modules 模塊間調(diào)用，其能夠作用于 Node.js 4.x 以上版本；它能夠順滑地集成到現(xiàn)有的 Webpack、Babel 環(huán)境中，并且支持不同模塊使用不同的依賴版本。不同于目前的解決方案需要是發(fā)布編譯之后的 CommonJS 格式的文件，@std/esm 能夠以最小的代價的、按需轉(zhuǎn)化的、動態(tài)緩存的方式來進(jìn)行源代碼轉(zhuǎn)化。更多 Node.js 相關(guān)資料參考這里。

使用 Angular 組件的四個技巧：從.5 版本的 AngularJS 開始，組件就成為 Angular 的一部分，它為代碼的組織和回收提供了一種便捷的方式。Angular（Angular2 的簡稱）與其說是 Angular 1.x 的升級，不如說是“續(xù)集”，它在移動支持和其他功能的基礎(chǔ)上進(jìn)行了完全地重寫。這里，1.x 中使用的控制器完全被組件取代。無論是否曾經(jīng)使用或想繼續(xù)堅持 1.x，無論是從零學(xué)起還是在跨越階段，為了確保代碼盡可能地優(yōu)雅且不會過時，你都需要開始使用組件。無論屬于以上哪一類，都可以在這里找到很多幫助簡化流程的方法。

基于 Shadow DOM 的樣式封裝：Shadow DOM 是 Web Components 標(biāo)準(zhǔn)的重要組成部分，它能夠?qū)?DOM 樹進(jìn)行隔離封裝，而本文則是介紹如何利用 Shadow DOM 實現(xiàn)對于樣式類的隔離封裝。由于 CSS 并沒有提供內(nèi)置的模塊化或者作用域機(jī)制，而在大型項目中不同組件間的樣式又極易引發(fā)沖突，因此我們需要選擇合適的 CSS 樣式隔離方案。目前常用的隔離方案有 BEM 命名策略、IFrame、CSS Modules、CSS-in-JS 等，本文首先盤點(diǎn)了這些方案的優(yōu)勢與不足；然后介紹了 Shadow DOM 的基本原理以及如何應(yīng)用到樣式封裝上。更多 CSS/SCSS 相關(guān)資料參考這里。

Headless Chrome 爬蟲攻防：Headless Chrome 為我們提供了便捷的自動化瀏覽器操作方式，也方便我們構(gòu)建面向動態(tài)網(wǎng)頁的爬蟲；前幾日在 Hacker News 上的一篇如何檢測 Headless Chrome 的文章，詳細(xì)列舉了可用的辨別是否為 Headless Chrome 的方法，而本文即是討論了如何反制這些檢測方案。方案包括對于 User Agent 檢測可以在啟動時自定義 User Agent、對于語言與插件的檢測可以插入腳本動態(tài)修改 language 與 plugins 屬性、對于 WebGL Vendor 與 Renderer 可以 Hook 參數(shù)調(diào)用、對于 Broken Image 可以修改文件描述符等。

WebAssembly 在 PSPDFKIT 的實踐：隨著今年三月份 WebAssembly Community Group 就標(biāo)準(zhǔn)達(dá)成一致，越來越多的主流瀏覽器開始支持 WebAssembly，本文即是 PDF 工具開發(fā)者 PSPDFKIT 介紹它們利用 WebAssembly 開發(fā)瀏覽器端渲染的 PDS 預(yù)覽工具的實踐經(jīng)驗。本文首先介紹了 asm.js 的工作原理與編譯機(jī)制，然后闡述了 WebAssembly 的概念與組成，最后介紹了 WebAssembly 在 PSPDFKit 的實踐經(jīng)驗以及他們在將原本大型 C++ 代碼庫轉(zhuǎn)化為 WebAssembly 格式時的體驗；更多 WebAssembly 相關(guān)資料參考這里。

深度思考，升華開發(fā)智慧

React 全家桶：石墨文檔大前端技術(shù)選型分享：技術(shù)選型是個很大的話題。對于創(chuàng)業(yè)公司而言，為了適應(yīng)業(yè)務(wù)節(jié)奏，「靈活」與「高開發(fā)效率」是技術(shù)選型最看重的兩點(diǎn)。而這兩點(diǎn)也是這些年前端技術(shù)井噴時期新出現(xiàn)的技術(shù)最注重解決的兩個問題。然而石墨文檔作為一款擁有眾多企業(yè)用戶的富前端應(yīng)用，復(fù)雜的表格、文檔以及離線同步邏輯使得我們對于前端技術(shù)棧的工程化和穩(wěn)定性有很高的要求，考慮到過于新的技術(shù)往往生態(tài)尚不完善以及相關(guān)的「最佳實踐」缺乏驗證，我們對于這些技術(shù)的選擇相對謹(jǐn)慎。石墨文檔前端團(tuán)隊的所有技術(shù)選型也都是圍繞如上兩點(diǎn)考慮的；更多 React 相關(guān)資料參考這里。

基于 Vue.js 的原生應(yīng)用開發(fā)：Weex 與 NativeScript 對比：Vue.js 相較于 React 與 Angular 有著更為平滑的學(xué)習(xí)曲線，不過目前 Vue.js 還沒有內(nèi)建的類似于 React Native 這樣的原生應(yīng)用開發(fā)方案。但是 Weex 與 NativeScript 都能夠彌補(bǔ) Vue.js 的這個暫時性不足，每周清單在前幾期中也推薦過 NativeScript 與 Vue.js 協(xié)同開發(fā)的相關(guān)文章，本文即是對比 Weex 與 NativeScript 應(yīng)用在原生開發(fā)中的各自優(yōu)勢與不足；更多 Vue.js 相關(guān)資料參考這里。

你看到的 Node.js 權(quán)限校驗指南可能都存在著錯誤：權(quán)限校驗幾乎是每個服務(wù)端應(yīng)用程序的標(biāo)配，本文作者在搜索學(xué)習(xí) Node.js / Express.js 相關(guān)的權(quán)限校驗教程時發(fā)現(xiàn)大部分都或多或少地存在著問題，因此編撰了這篇文章以提醒其他開發(fā)者。常見的誤區(qū)可能包括憑證的存儲方式、密碼的重置策略、API Tokens 的生成與校驗、限流等多個方面；更多 Node.js 相關(guān)資料參考這里。

高性能 Web 動畫與交互：到達(dá) 60 PFS：為用戶提供順滑的交互與動畫體驗是大部分 Web 應(yīng)用的挑戰(zhàn)之一，很多開發(fā)者著眼于減少首屏加載時間，卻忘了去優(yōu)化接下來的用戶交互。本文是來自 Algolia 的工程師介紹他們在構(gòu)建高性能 Web 動畫與交互時的經(jīng)驗技巧，本文首先介紹了常用的性能評測標(biāo)準(zhǔn)以及瀏覽器的渲染流程，布局、繪制、組合等等。接下來本文介紹了如何充分利用 opacity 與 transform 屬性來減少動畫消耗、如何強(qiáng)制提升、如何優(yōu)化動畫相關(guān)的代碼等內(nèi)容；

樂于分享，共推前端發(fā)展

Nano ID: Nano ID 是輕量級的、支持 URL 的 JavaScript 唯一 ID 生成器，它使用了強(qiáng)力密碼加密的隨機(jī) API，能夠保證生成符號分布的平均性。

Resonance：Resonance 是數(shù)據(jù)驅(qū)動的高性能 React 動畫庫，它使用了 d3-timer 來管理成百上千地狀態(tài)變化；Resonance 允許開發(fā)者以簡單而親切地語法實現(xiàn)高性能的狀態(tài)更新動畫。

react-beautiful-dnd：react-beautiful-dnd 是 Atlassian 出品的漂亮易用的 React 列表拖拽功能增強(qiáng)庫。目前最流行的 React 拖拽庫 react-dnd 提供了相對底層的拖拽 API 支持，而 react-beautiful-dnd 則提供了面向垂直列表的高階封裝；react-beautiful-dnd 仍然處于不斷地迭代開發(fā)中，很期待它未來提供更多的優(yōu)秀特性。

notifme-sdk：notifme-sdk 是用于簡化通知發(fā)送流程的 Node.js 庫，它允許我們靈活地集成郵件、短信、推送、WebPush 等不同的渠道來發(fā)送通知；notifme-sdk 還允許我們自由注冊服務(wù)提供商，內(nèi)建的 Fallback 與輪詢機(jī)制也能進(jìn)行簡單的容錯，同時 notifme-sdk 還提供了簡單的 UI 控制臺以方便我們僅界面化監(jiān)控。

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

「前端之巔」是InfoQ旗下關(guān)注前端技術(shù)的垂直社群，加入前端之巔學(xué)習(xí)群請關(guān)注「前端之巔」公眾號后回復(fù)“加群”。投稿請發(fā)郵件到editors@cn.infoq.com，注明“前端之巔投稿”；或者可以閱讀往期文章：

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

前端每周清單第 25 期：Vue2 響應(yīng)式原理，RN 運(yùn)行內(nèi)置 Node，JS 巧用 Proxy 反混淆，GraphQL 優(yōu)劣思辨，深入 React 動畫；

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