前端每周清单：Vue2 响应式原理，RN 运行内置 Node，GraphQL 优劣思辨

编者按：前端圈不应该成为娱乐圈，让我们关注技术本身。

国内国外，前端最新动态

• 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 。