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

時間 2019-11-16

標籤前端每週清單 node.js node 微服實踐 vue.js vue graphql angular 組件技巧 headlesschrome 攻防欄目 Node.js 简体版

原文原文鏈接

做者：王下邀月熊 編輯：徐川html

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

新聞熱點

國內國外，前端最新動態vue

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

開發教程

步步爲營，掌握基礎技能數據庫

三週時間打造全棧 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 在此以前，對張燦老師進行了一次獨家專訪，讓張燦老師聊聊做爲女性技術人的成長感悟與對技術人轉向管理者的思考。本文即由採訪內容整理而成。