前端每週清單第 36 期：深刻 Vue 2.5 類型加強、Puppeteer 端到端測試、PayPal 跨域套裝

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

新聞熱點

國內國外，前端最新動態

• MSDN 將 7700 餘份文檔重定向到 MDN: 爲了更好地協同維護 Web 開發相關的文檔，微軟決定將 MSDN 上 7700 餘份 Web 開發相關的文檔重定向到 MDN；MDN 是 Mozilla 開源共享的核心部分，來保證 Internet 資源的開放性與可用性，從而幫助開發者更快地學習與成長；微軟也長期致力於維護 MDN 上相關地開發文檔，包括整個 Microsoft Edge 的 Web API 接口也是徹底構建在 MDN 上。
• Expo SDK v22.0.0 發佈：Expo SDK v22.0.0 基於近日發佈的 React Native 0.49 版本，進行了一系列的功能特性提高與優化。如今，Snacks 能夠支持多文件與多資源拖動上傳，而且可以將自定義的 Snacks 持久化保存到我的文檔中；該版本還優化了 Android 中使用的 JavaScriptCore 以及 ARKit，同時加強了 Splash Screen API, WebBrowser.openAuthSessionAsync 等接口。
• Chrome 62 發佈：本週發佈的 Chrome 62 版本針對調試工具中的 Network Information API 進行了重大升級，其提供了更多的性能評測信息，而再也不僅僅是統計結果；除此以外，該版本還開始支持 OpenType Variable Fonts 以及 DOM 元素中進行 Media 捕獲。另外一個有趣的地方在於 Chrome 62 的 iOS 版本提供了 Payment Request API，儘管 iOS Webkit 自己都沒有提供這個功能；這也爲自定義瀏覽器中但願添加 Payment Request API 的支持提供了思路。

開發教程

步步爲營，掌握基礎技能

• 基於 Puppeteer 的端到端測試：Chrome 在 59 版本時推出了 Headless Chrome（無界面 Chrome），可用於自動化測試和不須要可視化用戶界面的服務器；Puppeteer 就是 Chrome 團隊推出的基於 Headless Chrome 開發的自動化工具，它能夠用來作 UI 自動化測試。本文便是對如何利用 Jest 與 Puppeteer 進行界面的端到端測試進行介紹，本文首先討論了何爲端到端測試及其在項目開發流程中的意義、如何使用 Puppeteer 編寫測試用例、如何在 Jest 中運行這些用例，文末還給出了數個編寫端到端測試用例的建議。若是有對於 Puppeteer 還不瞭解的同窗也能夠閱讀前端之巔專欄本週推薦文章：使用 Puppeteer 玩轉 Headless Chrome；更多 Puppeteer 相關資料參考這裏。
• Angular JWT 權限驗證完整指南: 本文按部就班地介紹如何設計與實現 Angular 應用中基於 JWT 的權限驗證部分；本文不只僅聚焦於如何寫代碼，而是但願可以帶領讀者一塊兒來考慮如何設計基於 JWT 的權限驗證，咱們應該關心哪些設計要點而且如何將它們應用到具體的開發實踐中。本文首先討論了登陸頁的設計、JWT 機制原理，而後利用 node-jsonwebtoken 來建立基於 JWT 的用戶 Session，接下來討論瞭如何將 JWT 返回給客戶端而且選擇合適的存放位置，最後分析瞭如何在客戶端中將 JWT 返回給服務端而且驗證用戶是否合規。更多 Angular 相關資料參考這裏。
• Vue.js 中高級概念介紹: Vue.js 毫無疑問是簡單易上手的框架，本文則長篇大論地對 Vue.js 中一些高級概念的理解與使用進行深刻介紹，包括 Mixins、Custom Directives、Filters、Transitions、狀態管理、服務端渲染等。本文依次介紹瞭如何使用 Mixins 實現代碼複用、如何建立自定義的指令、如何使用 Filters 來對展現信息進行過濾、如何使用 Transitions 建立動畫、如何使用 Vuex 進行狀態管理等內容。更多 Vue.js 相關資料參考這裏。
• Flexbox 與 CSS Grid 系列教程: 本系列文章是對於 CSS 佈局中經常使用的 Flexbox 與 CSS Grid 進行深度介紹，首篇文章是對於 Flexbox 與 CSS Grid 的概念進行詳細介紹與對比；Flexbox 是面向一維佈局設計，適合於單純的行佈局或者列布局；而 CSS Grid 則面向二維佈局設計，可以同時在行或列上進行元素排布。更多 CSS 佈局相關資料參考這裏。

工程實踐

立足實踐，提示實際水平

• 來自 PayPal 的開源跨域 JavaScript 套裝: PayPal 的工程師們編寫了不少運行於不一樣網頁、不一樣域名下的 JavaScript 代碼，而且還爲不少的第三方網站提供了便捷的代碼嵌入方式，不過這樣也就致使了 PayPal 面臨着極爲複雜的跨域問題：既須要提供跨瀏覽器的兼容方案，也不能強制性的讓全部的後端接口容許 CORS 跨域請求等，本文便是 PayPal 對其平常業務中使用的跨域相關工具進行深度介紹，譬若有基於 Listener/Client 模式的客戶端跨域通訊工具、跨域 React 組件、跨域的安全 WeakMap、基於 iFrame 的 fetch 請求代理等等；更多跨域相關討論參考這裏。
• 訪談：Bustle的 GraphQL 實踐：Facebook 將 GraphQL 定義成「一門 API 查詢語言以及一個支持查詢現有數據的運行時」。REST 經過向 REST 端點發送請求獲取數據，而 GraphQL 容許客戶端指定它們想要的數據。
  當 Facebook 公司內部開始大規模使用 GraphQL 時，社區纔剛剛開始使用 GraphQL。InfoQ 採訪了來自 Bustle 的工程總監 Steve Faulkner，談論了 GraphQL 的相關問題以及 Bustle 如何使用 GraphQL，併爲想要採用 GraphQL 的團隊提供了一些建議。更多 GraphQL 相關資料參考這裏。
• 現代 JavaScript 技術棧: 本文是對於現代 JavaScript 技術棧的高屋建瓴的盤點，但願可以爲那些還停留在舊時代的開發者提供完整的 2017 年 JavaScript 技術概念。本文首先闡述了所謂傳統開發方式的面貌，而後依次介紹了包管理器 npm、JavaScript 模塊打包工具 Webpack、代碼語法轉換工具 Babel、任務運行工具 Npm Scripts 等；更多 JavaScript 相關資料參考這裏。

深度閱讀

深度思考，昇華開發智慧

• 深刻 Vue.js 2.5 類型支持: Vue.js 2.5 着重提高了 TypeScript 的類型支持，使得開發者不只僅能經過類組件接口來得到正確的類型定義，還能直接從內置的接口中獲取類型，本文則是對於 Vue.js 2.5 中的類型支持進行詳細闡述，展現了 TypeScript 中強大的類型系統是如何被用於流行的框架。本文依次討論了 this 對象、Mapping Computed、Prop Types 以及兼容性等內容；更多 Vue.js 相關資料參考這裏。
• Napa.js: Napa.js 是 Microsoft 開源的基於 V8 的多線程 JavaScript 運行時，其最初被用於解決 Bing 中高 CPU 佔用的服務。隨着該項目的不斷髮展，開發團隊發現其一樣可以被用於解決 Node.js 中 CPU 密集型的任務，即將 JavaScript 代碼運行在多個隔離的 V8 運行時中，而且爲不一樣運行時之間提供數據通訊服務。Napa.js 可以像普通的 Node.js Module 同樣被引入到項目中，同時也能不依賴於 Node.js 而被嵌入到某個宿主進程中。更多 JavaScript 相關資料參考這裏。
• Key Reinstallation Attacks: 本週，所謂的 KRACK 攻擊佔據了新聞頭條，其可以突破大部分 WiFi 硬件設備上使用的 WPA2 加密體系，竊聽用戶機密；雖然不少的設備商已經更新了他們的系統或者提供了軟件更新，這起事件也爲咱們敲響了警鐘。在本次事件中使用 HSTS 預加載的網頁並無受到影響，也提醒了咱們應該考慮是否將該頭部聲明添加到網站中。

開源項目

樂於分享，共推前端發展

• accessibilityjs: accessibilityjs 是由 GitHub 開源的界面可訪問性錯誤掃描工具，其被用於了開發與生產環境下頁面中不可訪問的元素髮現。accessibilityjs 會將那些不可訪問的元素添加錯誤標識，包括了 ImageWithoutAltAttributeError, ElementWithoutLabelError,LinkWithoutLabelOrRoleError, LabelMissingControlError, InputMissingLabelError, ButtonWithoutLabelError, ARIAAttributeMissingError。
• design-blocks: 基於 Bootstrap 構建的超過 170 個設計塊，可以幫助設計師快速設計現代網站；design-blocks 主要包括了響應、通信錄、內容、特性、頁腳、表單、頁頭、價格、團隊、證實書等等組件。
• Electron Webpack Dashboard：Electron Webpack Dashboard 對於 Webpack Dashboard 的擴展，爲了方便各個平臺的用戶都能穩定、便捷地使用美觀的 Webpack 控制檯。Electron Webpack Dashboard 1.0 版本可以穩定支持 Webpack 2 與 Webpack 3，同時修復了早前版本存在的一些問題；而下一步 Electron Webpack Dashboard 將會專一於提供單機多實例併發的功能，同時針對 macOS 提供多 Tab 頁，針對 Linux 與 Windows 提供多窗口的支持。
• Smooth Scrollbar: Smooth Scrollbar 容許咱們自定義跨瀏覽器的高性能滾動條，它使用 CSS3 的 translate3d 屬性來實現慣性滾動。Smooth Scrollbar 還提供了豐富的插件系統與易用的插件接口，方便開發者根據自身地業務須要靈活定製。

巔峯人生

• 程序員是手藝人，如何讓本身的技能變現？: 本文摘自陳皓（左耳朵耗子）在極客時間 App 開設的付費專欄「左耳聽風」，是他對自身技術成長道路的分享。本文聚焦於如何讓本身的技能變現，從千里之行基於跬步、關注有價值的東西、找到能體現價值的地方、動手能力很重要、關注技術付費點、提高本身的能力和經歷、找到有價值的信息源等幾個方面進行考慮。

前端之巔

「前端之巔」是 InfoQ 旗下關注前端技術的垂直社羣，加入前端之巔學習羣請關注「前端之巔」公衆號後回覆「加羣」。投稿請發郵件到 editors@cn.infoq.com，註明「前端之巔投稿」。