前端周报第 69 期：Udacity 弃用 React Native，微信小程序将支持 npm、分包和可视化编程

新闻热点

国内国外，前端最新动态

微信小程序的下一步：支持 NPM、小程序云、可视化编程、支持分包：7 月 11 日，微信公开课微信小程序技术专场在上海举行，会上，微信公布了面向开发者的技术规划，内容主要包括小程序技术能力与规划、小程序生态体系、小程序性能优化三个方面。

未来的规划主要为：

• 推出自定义组件 2.0：usingComponents 计划支持全局定义和通配符定义、支持类似 Computed 和 watch 的功能和支持 Component 构造器插件；
• 支持 npm：不久的将来，小程序将支持 npm 包管理，有了这个之后，想要引入一些开源的项目就变得很简单了，只要在项目里面声明，然后用简单的命令安装，就可以使用了。
• 原生组件同层渲染，微信决定将用同层渲染取代 cover-view，它能像普通组件一样使用，原生组件的层级不再是最高，而是和其他的非原生组件在同一层级渲染，可完全由 z-index 控制，可完全支持触摸事件。
• 推出小程序云，特点是：无服务器搭建、无域名配置、能完整体验云端流程，可原生调用小程序 API，同步支持服务器 SDK，开发工具可视化管理云端服务。
• 可视化编程，它是一种全新的小程序开发模式，通过简单的拖曳即可生成小程序，让那些不擅长前端技术的开发人员也能开发小程序，能极大地降低开发门槛，打造更好的小程序视觉交互体验。
• 为了优化小程序的性能，微信小程序还将推出分包预下载和独立分包功能。

ESLint 的 NPM 账户遭黑客攻击：7 月 12 日，黑客攻击了 ESLint 维护者的 NPM 帐户，并将带有病毒的 eslint-scope 和 eslint-config-eslint 软件包发布到 NPM 注册表中。带有恶意病毒的软件包在安装时，计算机会自动下载并执行 pastebin.com 代码，然后将含有 NPM 访问令牌的.npmrc 文件内容发送给攻击者。

事件的起因是由于帐户遭到入侵的维护者在其他几个网站上设置的密码和 npm 上的一样，并且没有在他们的 npm 帐户上启用双重身份验证。

恶意程序包包含在 eslint-scope@3.7.2 和 eslint-config-eslint@5.0.2 中，目前，它们都已经从 npm 中被移除出去了，pastebin.com 在这些包中的链接也已被删除。npm 也已撤销在 2018-07-12 12:30 UTC 之前发出的所有访问令牌。因此，受此攻击影响的所有访问令牌都不再可用。

Udacity 也弃用 React Native 了：不久之前，Airbnb 团队刚刚宣布放弃使用 React Native，才过了不到一个月，在线教育机构 Udacity 移动团队最近也宣布从 App 中移除了使用 React Native 开发的最后一批功能。而 6 月中旬，Facebook 宣布将大规模重构 RN，这一系列的事件，让不少正在使用 React Native 的开发者瑟瑟发抖，陷入了恐慌之中。

在本文章中，Udacity 团队将告诉大家他们使用 React Native 的历程以及放弃他们的原因，也希望给一些开发者一些参考和启发，看自己是否适合使用 React Native。

开发教程

步步为营，掌握基础技能

如何用TypeScript 构建更好的React 应用程序：将TypeScript 和React 一同使用，会大大提高开发体验。

TypeScript 允许你以 type 接口的形式定义复杂的定义。当你要在应用程序中使用复杂的 type（例如包含其他属性的对象）时，会进行严格的审查，减少了可能产生的错误。

在这篇文章中，作者将向您展示如何使用 TypeScript 改进 React 应用程序的代码。

如何使用React 16 中的错误边界：React 16 于2017 年9 月26 日正式发布，在React 16 中，大家就能使用错误边界这一新功能，错误边界是一种React 组件。它及其子组件形成一个树型结构，能捕获JavaScript 中所有位置的错误，记录下错误，并且还能显示一个后备界面，避免让用户直接看到组件树的崩溃信息。本文作者就告诉你如何开始使用错误边界。

JavaScript 代码清理：如何重构并使用类：在较小的 React 项目中，将所有组件方法保留在组件本身中效果很好。在中型项目中，您可能会发现自己希望从组件中获取这些方法并成为“帮手”。在本文中，作者将向您展示如何使用类（而不是导出单个函数和变量）来组织代码。

工程实践

立足实践，提示实际水平

京东 APP 的 UI 自动化测试框架及平台化探索：UI 自动化测试，即通过模拟手动操作用户 UI 界面的方式，以代码方式实现自动操作和验证的一种自动化测试手段。在十年前，那时候还是 PC web 的天下，以 Selenium 驱动 web UI 的自动化测试还是主流。五年前，当测试人员逐渐熟悉了 Selenium API 编写 UI 自动化用例时，互联网的主战场已经从 web 端逐渐过渡到了 app 端。现在，App 在 UI 自动化方面的框架已经比较成熟，例如 appium、uiautomator、espresso、robotium 等。

框架如何避免或降低 UI 的问题呢？作者认为：

• 框架用例编写简单，降低上手门槛
• 降低用例维护成本
• 底层能识别框架 (Appium) 的可替换性，屏蔽不同框架的差异性 API
• 失败重试机制，提高用例稳定性
• 协助快速定位问题的能力
• 数据统计的能力

Android 自动化页面测速在美团的实践：随着移动互联网的快速发展，移动应用越来越注重用户体验。其中很重要的一项内容就是页面的加载速度。如果发生冷启动时间过长、页面渲染时间过长、网络请求过慢等现象，就会直接影响到用户的体验，所以，如何监控整个项目的加载速度就成为重要挑战。

随着美团业务的快速迭代，有越来越多的新页面、越来越多的业务逻辑、越来越多的代码改动，这些不确定性会使他们测速部分的代码耦合进业务逻辑，并且需要手动维护，进而增加了成本和风险。于是通过借鉴先前的一些方案，分析其存在的问题并结合自身特性，他们实现了一套无需业务代码侵入的自动化页面测速插件，本文将对其原理做一些解读和分析。

阮一峰webpack 教程（Demo 集合）：Webpack 是用于构建Javascript 模块脚本来给浏览器使用的前端工具。它和Browserify 很像，但是能做更多的事。本文的内容包括：安装使用指南、入口文件、多个入口文件、Babel-loader、CSS-loader、Image loader、插件系统、如何加载第三方插件、环境变量、代码分离等15 个demo。

深度阅读

深度思考，升华开发智慧

Vue 手册：全方位了解 Vue ：Vue 可以说是今年最火的前端框架了，由于它简单性能好，正逐渐受到很多开发者的青睐。本篇文章介绍了 Vue 的基本特点、如何构建 Vue 应用程序、深入了解 Vue CLI、Vue 组件、使用 Vuex 管理状态、使用 Vue Router 处理 URL 等 20 多个内容，Vue 的初级开发者可点进原文链接自取。

Node 前端指南：本指南主要面向那些了解 JavaScript 但尚未熟悉 Node 的前端开发者。本文包括 Node 版本选择、回调风格、模块系统、环境变量等 10 项内容。

开源项目

乐于分享，共推前端发展

face-api.js ：face-api.js 是用在 tensorflow.js 核心 API（tensorflow / tfjs-core）之上实现的浏览器中的面部检测和面部识别的 JavaScript API。

open-source-mac-os-apps ：open-source-mac-os-apps 集齐了 macOS 开源应用程序。

lynx-native ：Lynx 是一个使用 Javascript 来构建 Android 和 iOS 本地应用的框架。Lynx 直接使用平台 UI 来进行渲染，同时可以使用 CSS 进行排版。

前端之巅

「前端之巅」是 InfoQ 旗下关注大前端技术的垂直社群。紧跟时代潮流，共享一线技术，欢迎关注。