前端清單：Vue2 響應式原理，RN 運行內置 Node，JS 巧用 Proxy 反混淆，GraphQL 優劣思辨

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

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

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

新聞熱點

國內國外，前端最新動態

• Storybook 3.2 發佈：Storybook 容許咱們在現代組件化開發中快速地瀏覽獨立組件；在近日發佈的 Storybook 3.2 版本中，添加了對於 Vue.js 的支持。除此以外，本版本還引入了層次化的 Story 佈局，容許開發者更加靈活地定義組件的展示層次；同時還容許在移動設備中直接瀏覽 React Native 組件，還修復了以前的部分錯誤。
• Webpack 着手爲 WebAssembly 添加頭等支持：目前 Webpack 中僅將 JavaScript 做爲頭等公民看待，其餘的資源（HTML、CSS 等）都須要轉化爲 JavaScript 表達式進行處理；而近日 Webpack 渲染與 Mozilla 基金會達成合做，得到了來自 MOSS 項目的 $125,000 資金支持。Webpack 着手爲 WebAssembly 添加頭等支持，咱們也能夠在 Issue Tracker 中瞭解最新的進展。
• Webkit 着手開發 PWA 特性支持：Progressive Web Applications（PWAs）經過建立 Service Worker 來使 Web 用戶能享受到推送、離線支持等原生應用的特性，是現代 Web 開發中重要的組成。不過使人遺憾的是 Safari 一直未表態支持 PWAs 相關特性，這一點讓不少開發者也頗爲不滿，在 Apple’s refusal to support Progressive Web Apps is a detriment to future of the web 此文中就進行了許多的討論；不過近日有開發者發現，在 Webkit 的 BugList 與 Changelog 上出現了有關 PWA 的內容，儘管可能還須要數月乃至於更長的時間，咱們相信將來 Safari 會給予 PWA 更好的支持。
• TensorFire：基於 WebGL 的瀏覽器端高性能神經網絡框架：深度學習與人工智能技術正在逐步地改變人們的生活，以 TensoFlow 爲表明的一系列深度學習與神經網絡框架也是如日中天，迅猛發展。 TensorFire 是基於 WebGL 的，運行在瀏覽器中的神經網絡框架。使用 TensorFire 編寫的應用可以在實現前沿深度學習算法的同時，不須要任何的安裝或者配置就直接運行在現代瀏覽器中。

開發教程

步步爲營，掌握基礎技能

• Vue.js 與 NativeScript 初窺：NativeScript 框架最值得稱道的便是其擴展性，它目前已經支持原生 JavaScript、Angular、Vue.js 等多種框架或者編碼方式，同時將來還計劃支持 Preact 等框架。本文便是介紹如何使用 NativeScript 與 Vue.js 協同開發，首先介紹瞭如何使用 NativeScript 命令行工具建立項目，而後引入 Vue.js 插件以及如何運行該項目；更多 Vue.js 相關資料參考 https://parg.co/byL 。
• Node.js 實踐教程：本教程是但願以一些有名的模塊/功能爲基礎, 在實現的過程當中講解各項知識點，主要分爲控制流、Web、存儲等幾個部分。目前完成的模塊包括 async 介紹、Promise 實現、coroutine 實現、co 模塊介紹、HTTP Client 實現、HTTP Server 實現等；更多 Node.js 相關資料參考 https://parg.co/be0 。
• Airbnb React VR 實踐：Airbnb 自 2014 年以來一直使用 React 構建用戶交互界面，而且爲社區貢獻了不少優秀的開源項目；而隨着 React VR 的發佈，Airbnb 也利用其來快速原型化與測試 VR 相關的創意。本文便是介紹 Airbnb 在 React VR 實踐方面的一些經驗總結，本文首先闡述了 React、React Native 與 React VR 三者之間的關係與差別，而後介紹了 React VR 在佈局、基礎組件方面的語法，最後還討論了 React VR、WebVR 以及 VR 技術自己的發展可能性。更多 WebVR 相關資料參考 https://parg.co/bFR。
• 突破 CSS 前端面試：不一樣於傳統的軟件工程師面試比較注重算法，前端面試可能更多的注重綜合能力以及領域語言的掌握；本文即着眼於對於面試中常見的 CSS 問題的總結與介紹。本文列舉的問題譬如 Resetting 與 Normalizing 區別、floats 工做機制闡述、z-index 與 stacking context 比較、BFC 描述等等；更多 CSS/SCSS 相關資料參考 https://parg.co/baH 。

工程實踐

立足實踐，提示實際水平

• Angular 性能優化：本文介紹了些常見的 Angular 開發中可用的性能優化建議，包括了利用 ChangeDetectionStrategy.OnPush 來顯式聲明組件間依賴、利用 trackBy 來追蹤惟一標識符和避免冗餘的增刪、避免模板中的計算推導、禁用變化監測、使用懶加載等。
• Vue.js 2 單元測試指南：本文主要介紹如何利用 Jasmine 爲 Vue.js 2 應用搭建完整的單元測試；這裏選用 Jasmine 的緣由是它自己的性能較好，而且 Vue.js 自己也是使用該測試框架。本文首先介紹了環境搭建與待測試的組件構成，而後依次介紹了配置測試環境、如何根據組件的業務功能邏輯選定測試點、如何編寫不一樣目標的測試用例等內容；更多 Vue.js 相關資料參考 https://parg.co/byL 。
• 深刻 React 動畫實踐：本文介紹了在 React 開發中多種建立動畫效果的途徑，包括了基於 React 組件狀態的 CSS 動畫、基於 React 組件狀態的 JavaScript 樣式動畫以及第三方依賴的 React Motion、Animated、Velocity-React 等庫。本文最後還討論瞭如何用 GreenSock 等經典強大的動畫庫來輔助 React 組件動畫開發；更多 React 相關資料參考 https://parg.co/bM1 。
• Node.js 如何解析 Form 上傳？：NPM 和 GitHub 裏的開源組件幫咱們解決了不少繁瑣的工做，可是也讓咱們失去了不少深刻技術細節的機會。在現有組件沒法知足咱們需求的時候，就須要咱們來本身動手豐衣足食了。 做者前段時間遇到了一個須要手動解析 Form 表單上傳的機會，也藉此爲各位解析一下 Node.js 解析 Form 上傳的實現細節。更多 Node.js 相關資料參考 https://parg.co/be0 。

深度閱讀

深度思考，昇華開發智慧

• JavaScript 中有趣而又無語的例子：JavaScript 是一門有趣的語言，它有着簡單的語法、龐大的生態系統與社區，不過 JavaScript 中也有着不少使人無語的地方。本文便是對 JavaScript 中一些有趣的、出乎意料的用法收集，對於初學者是個不錯的深刻教程，而對於資深開發者也能夠拿來做爲面試題目。本文中包含的例子譬如 [] == ![]、NaN 的用法注意、try-finally 等等；更多 JavaScript 相關資料參考 https://parg.co/bMI 。
• 安息吧 REST APIs，GraphQL 長存：GraphQL 是 Facebook 針對複雜關係的數據獲取與操做開源的數據查詢語言，本文則是對比了傳統的 REST APIs 與 GraphQL 各自的優劣，討論了 GraphQL 相較於 REST APIs 更適合應用的場景；不過本文並不是提倡使用 GraphQL 徹底替代 REST APIs，也陳述了 GraphQL 存在的不足與缺陷。本文首先歸納性地總結了 GraphQL 解決地三個問題，而後介紹了 GraphQL 的由來和其內部原理，最後討論了 GraphQL 這種靈活性自己的代價。更多 GraphQL 相關資料參考 https://parg.co/b1e 。
• 基於 Proxy 的 PopUnder 庫反混淆：本視頻經過對某個商用的 Chrome 59 中 PopUnder 庫，的執行過程解析，來介紹如何利用 ES6 的 Proxy 進行，簡單的 JavaScript 混淆代碼逆向破解。視頻仍是挺有意思的，做者首先分析了通過混淆的源代碼，發現沒法下手；而後利用 Proxy 監聽常見的 Windows 中 createElement 等函數的調用來了解該庫的執行流程，最後再根據 API 的調用順序復現出該庫。更多 JavaScript 設計模式相關參考 https://parg.co/bIO 。
• 深刻 Vue.js 響應式原理：本文做者從 Java 與 C# 中經典的 Getters/Setters 引入，討論了 Vue.js 中從組件渲染函數、數據的 Getter、Setter 劫持、監聽器的控制以及重渲染觸發整個生命流程。更多 Vue.js 相關資料參考 https://parg.co/byL 。

開源項目

樂於分享，共推前端發展

• Hazel: Hazel 是 Zeit 開源的輕量級 Electron 應用更新服務器，它支持 macOS 與 Windows 應用的同步更新。Hazel 基於 micro 庫構建，可以自動地從 Github Releases 抓取數據而且緩存在內存中，而且沒十五分鐘自動刷新下數據。
• React Native Node: React Native Node 可以在基於 React Native 開發的 Android 應用中啓動後臺 Node.js 進程，從而能夠利用 Node.js 中的流、文件系統接口等特性來進行功能操做；React Native Node 主要依靠 Node.js 7.1.0 版本可以被獨立編譯爲 bin_node_v710 可執行文件。另外一方面，儘管 iOS 並不支持直接運行 V8，可是該項目正在致力於爲 ChakraCore 打造類 V8 特性支持。
• react-simple-maps: react-simple-maps 是基於 d3-geo 與 topojson 的 React 地圖組件庫，容許開發者快捷方便地構建自定義的 SVG 地圖；目前的特性包括了縮放、標記、自定義 SVG 標記、自定義着色、氣泡圖、動畫支持等等。
• Vuestic Admin Dashboard: 基於 Vue.js 與 BootStrap 4 的響應式管理控制檯，包含了 36 個元素、18 個頁面、18 個自定義圖標等內容；其使用 Chart.js 構建了響應式圖標、利用 Leaflet 與 amMap 構建可視化地圖組件等內容。

巔峯人生

• 股權、期權有哪些坑？從技術創業的角度說開去：本文整理自知道創宇 CTO 兼 COO 楊冀龍在 GTLC 全球領導力峯會上的演講，原題爲《技術創業那些事兒》。本文從依賴獨特技術領先與依賴業務領先等不一樣類型的創業公司的股權分配、期權分配、投融資以及創業人本身的堅持等方面分享創業經歷過哪些坑、該怎麼處理。

前端之巔

「前端之巔」是InfoQ旗下關注前端技術的垂直社羣，加入前端之巔學習羣請關注「前端之巔」公衆號後回覆「加羣」。投稿請發郵件到editors@cn.infoq.com，註明「前端之巔投稿」；或者能夠閱讀往期文章：

• Web 前端入門與工程實踐的前端每週清單列表。
• 前端每週清單第 24 期：React 16 中異常處理與 Fiber 實戰、Vue 圖表與 jQuery 插件、V8 Turbofan 性能優化
• 前端每週清單第 22 期：ES8 正式發佈、React 與 GraphQL 開發指南和性能優化，Vue.js 2.4.0 發佈