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

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

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

國(guó)內(nèi)國(guó)外，前端最新動(dòng)態(tài)

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

Google 開(kāi)源 JavaScript 機(jī)器學(xué)習(xí)庫(kù) DeepLearn.js：作為 Google 開(kāi)源的可實(shí)現(xiàn)硬件加速的機(jī)器學(xué)習(xí) JavaScript 庫(kù)，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)界面；同時(shí)添加了動(dòng)態(tài)導(dǎo)入的支持，允許動(dòng)態(tài)導(dǎo)入外部依賴(lài)，動(dòng)態(tài)導(dǎo)入 React 組件等操作。

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

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

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

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

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

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

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

立足實(shí)踐，提示實(shí)際水平

利用 std/esm 在 Node.js 開(kāi)發(fā)中使用 ES Modules：隨著主流瀏覽器逐步開(kāi)始支持 ES Modules 標(biāo)準(zhǔn)，越來(lái)越多的目光投注于 Node.js 對(duì)于 ESM 的支持實(shí)現(xiàn)上；Node.js 擬計(jì)劃在 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)境中，并且支持不同模塊使用不同的依賴(lài)版本。不同于目前的解決方案需要是發(fā)布編譯之后的 CommonJS 格式的文件，@std/esm 能夠以最小的代價(jià)的、按需轉(zhuǎn)化的、動(dòng)態(tài)緩存的方式來(lái)進(jìn)行源代碼轉(zhuǎn)化。更多 Node.js 相關(guān)資料參考這里。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Web 前端入門(mén)與工程實(shí)踐的前端每周清單列表；

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

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