前端每周清单：React组件解耦之道；基于Headless Chrome的自动化测试；Angular 2/4是否为时已晚？

国内国外，前端最新动态

• TypeScript 2.4 发布： TypeScript 是提供了静态类型和很多先进特性的 JavaScript 语言超集；而在最新发布的 2.4 版本中，新增了动态 import 语法、字符串枚举类型等特性，并且提高了泛型推导等功能。( https://parg.co/bem )

• Node v8.1.3 发布： 近日发布的 Node v8.1.3 版本包含了一系列的错误修复与文档内容提升。( https://nodejs.org/en/blog/release/v8.1.3/ )

• Preact CLI 1.3.0 发布： Preact CLI 是快速创建 Preact 应用的工具，在近日发布的 Preact CLI 1.3.0 版本中，开发者可以自定义 Webpack 配置文件与 .babelrc 配置文件。该版本还转向了使用 Webpack 进行预渲染，同时还修复了之前版本遗留的一系列错误；最后该版本还引入了完整的测试用例以提高整个代码的鲁棒性。( https://parg.co/bXx )

• MDN 被 Mozilla 重造，将更关注 Web 文档 ：MDN 的权威性以及文档的高质量一直广受 Web 开发人员的认可，开发人员在搜索 HTML 和 JavaScript 的文档时，通常会发现 MDN 的点击率很高。基于此，Mozilla 决定“押宝”在提升 Web 文档体验，正式宣布将使 MDN 的工作重心侧重于 Web 文档。( https://parg.co/bXT )

• Twitter Lite PWA 显著提升用户活跃度并且降低了数据流量 ：Twitter 是主要的社交网络平台之一，其 80% 的用户访问来源于移动端。为了提高移动端网页版体验效果，Twitter 整合了现代 Web 与原生特性的优点，开发了 Twitter Lite Progressive Web App，并且在四月份正式面向所有用户开放。而近日统计数据显示新版本网页带来了 65% 的用户停留时长提升、75% 的用户发文提升与 20% 的回退率降低。( https://parg.co/bX7  )

步步为营，掌握基础技能

• 基于 Headless Chrome 的自动化测试 ：本文介绍了如何在 Headless Chrome 环境中使用 Karma 作为测试驱动运行基于 Mocha 与 Chai 的自动化测试用例。Headless Chrome 允许我们在无界面环境下，使用特性完备的 Chrome 来执行 JavaScript 脚本并且渲染网页。本文首先介绍了使用 karma-chrome-launcher 来搭建本地启动 Chrome 环境，然后介绍了使用 Mocha 与 Chai 来编写基础测试用例，最后还讨论了如何自定义 Headless Chrome 启动器并且集成到 Travis CI 环境下。( https://parg.co/beo )

• Angular 2+ 项目实战系列 ：本系列文章包含了八个不同的章节，从零开始介绍如何利用 MongoDB、Express、Angular 2+ 以及 Node.js（MEAN Stack）来构建某个真实的应用项目。第一部分着眼于进行基础环境的搭建，包括搭建 Angular 应用开发环境、本地搭建 MongoDB、在 Auth0 申请账户与开发者密钥、搭建 Node.js 服务器并且为 Angular 应用添加基础的组件等等。第二部分着眼于添加基础的权限验证功能，并且构建数据模型等。 ( https://parg.co/beA )

• 利用树莓派、Node 与 React 打造智能家居 ：作者自小就喜欢倒腾电路与计算机，而本文则简要记述了作者如何利用树莓派来将自己的电子家居变得智能可控。作者主要是由了 React Native 来开发客户端应用，并且通过 WebSocket 来与 NodeJS 后端进行数据通信，并且使用 pi-blaster 与 wiringPi 等库来保证 NodeJS 后端控制树莓派并且获取实时数据。另一方面，作者利用树莓派作为中控枢纽，分别将其连接到不同的控制器中，作者在本文中还给出了详细的电路图设计，全部的代码参考 这里。( https://parg.co/bXB )

• VueConf 观后感 ：首届官方举办的 Vue.js 大会刚刚落幕，本文即是作者对于自己参会之后的感想进行的简要阐述。作者首先介绍了自己参与的数个 WorkShop 与演讲，从 Evan You 对于 Vue.js 发展历史与现状的介绍，到基于 Vuex 的状态管理、服务端渲染、代码分割等多个具体的技术实现。本文是非常不错的对于 VueConf 的回顾，如果没有参会或者尚未了解过议程的同学可以一看，并且选择自己感兴趣的议题查看对应的胶片与演讲视频。 ( https://parg.co/ber  )

• Webpack 中的作用域提升简介 ：近日发布的 Webpack 3 中引入了所谓的 Scope Hoisting 新特性，从社区的反馈来看该特性已经在很多项目中成功地帮助开发者减少包体大小，提高首屏加载效率；本文则是简要地介绍了 Webpack 3 中作用域提升的基础原理。本文假设你对于 JavaScript 中闭包与模块语法有所了解，首先介绍了在老版本 Webpack 中采用的作用域分割机制及其存在的额外的性能损耗，然后对比呈现了在引入作用域提升机制之后，打包而成的文件的形式，与其带来的性能提升原理。( https://parg.co/beE )

立足实践，提示实际水平

• React 组件解耦之道 ：React 的组件非常地灵活可扩展，不过随着业务复杂度的增加和许多外部工具库的引入，组件往往也会显得浮肿；作者在本文中阐述了常见的几种，遵循单一职责原则的，组件分割与解耦的方法。 本文首先介绍了基础的分割 render 函数的使用范式，然后讨论了将元素以属性方式传入，最后还介绍了部分高阶组件相关的用法与知识；更多 React 相关资料参考  https://parg.co/bM1 。( https://parg.co/bXz )

• 为什么我们选择 TypeScript ：本文是 Reddit 工程师 Niranjan Ramadas 记述在前端技术选型时选用 TypeScript 的考虑过程。作者认为任何语言都有其优缺点，不过合适的语言应该具备如下特点：强类型、完备的工具链支持、能够用于生产环境等。作者还特地比较了 TypeScript 与 Flow，TypeScript 是能够编译到 JavaScript 的超集语言，而 Flow 则是提供了一系列额外的注解来实现类型系统。Flow 能够保证较好的类型覆盖，但是其对于多态性的支持并不是很好，并且 TypeScript 的社区也相对活跃。( https://parg.co/beb  )

• 基于 Prometheus 的 Node.js 应用性能监控 ：本文致力于帮助已有生产环境下 Node.js 应用的开发者，了解如何利用开源应用 Prometheus 搭建监测平台；Prometheus 为我们提供了强大的数据压缩与针对时序数据的快速查询功能。本文首先讨论了 Node.js 应用监控的设计理念与指标，然后对比了当前存在的几种监控解决方案的优缺点。最后介绍了如何在项目中引入 Prometheus，并且集成 Kubernetes、Grafana 等第三方插件；更多 Node.js 相关资料参考  https://parg.co/be0 。( https://parg.co/bed  )

• 我认为的 React Native 开发最佳实践分享 ：React Native 问世已愈两年，也为越来越多的团队用来开发性能表现不输原生的应用；尽管 React Native 还不算完全成熟（未发布 1.0 版本），但是围绕它已经产生了一个庞大的社区和许多的开发实践。作者编写本系列文章即是希望与大家共享个人在多年的 React Native 开发中总结而来最佳实践，第一篇文章首先介绍了 Redux 的概念与引入的积极意义，然后讨论了如何编写可复用的组件以及如何尽可能地提取公共代码与变量等内容；更多 React Native 相关资料参考  https://parg.co/bV4 。( https://parg.co/beC  )

深度思考，升华开发智慧