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

前端 前端每周清单

前端每周清单专注前端领域内容，分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。关注【前端之巅】微信公众号(ID：frontshow)，及时获取前端每周清单。

新闻热点

国内国外，前端最新动态

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

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

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

深度阅读

深度思考，升华开发智慧

• 选择与支持 Vue.js 的理由：本文是来自 Monterail 的前端工程师、Vue.js 资深开发者 Damian Dulisz 分享他选择与支持 Vue.js 的理由。本文不仅仅从开发者的角度阐述了 Vue.js 对其的吸引力，还从产品经理的视角、Vue.js 社区发展的角度阐述了 Vue.js 的巨大潜力。本文是一篇不错的介绍 Vue.js 最新变化与进展，并且对常见的 Vue.js 的部分误解进行了阐述的文章；更多 Vue 相关资料参考 https://parg.co/byL 。( https://parg.co/bX2 )

• TC39，ECMAScript 与 JavaScript 的未来：本文是 Nicolás Bevacqua 在腾讯前端大会上发表的同名演讲的总结，介绍了 TC39 与 ECMAScript 的含义，概述了 ECMAScript 中提案的步骤以及部分代表性提案，同时还畅谈了 JavaScript 的未来发展方向。作者介绍了 Stage 0、Stage 1、Stage 2、Stage 3 这四个提案处理进度的具体含义与要求，并且列举了 Array#includes、Named Captures 等具体的例子来阐述 JavaScript 不断衍化的语法特性；作者还介绍了未来社区会持续关注的代码转译与适配、代码质量保证、代码打包与发布等多个领域。( https://parg.co/bXD )

• JavaScript 中的函数式编程就是反模式(*本文仅代表原作者个人意见)：作者在本文中对比讨论了 JavaScript 与 Clojure，并且介绍了 ClojureScript 的基础用法与优势所在。作者首先讨论了他认为的函数式脚本语言应该包含的特性，包括充分的 API、内建的不可变数据结构等；然后阐述了 lodash、fp、Rambda 这样的单个库存在的不足，譬如 ImmutableJS 虽然能较好地解决部分问题，但是却会割裂使用者的开发体验。最后笔者介绍了 ClojureScripe 的特性与优点，包括能够在编辑器中单行运行、内建的大量转化函数、较好地性能与代码可读性保证等等。( https://parg.co/beH )

开源项目

乐于分享，共推前端发展

• bundlesize：bundlesize 是轻量级的用于检测项目打包生成包体体积的工具，可以方便地集成于 Travis CI、Circle CI 等持续集成工具中，以确保生成的库或者应用体积不会超过预期；目前 React、styled-components、emotion 等诸多流行库都已采用该工具。( https://github.com/siddharthkp/bundlesize )

• kittenTricks：kittenTricks 是超过 40 屏的 React Native 应用开发中常见的精美界面集锦，包括应用加载、权限验证、社交资料、资讯浏览、聊天通信等多个领域。kittenTricks 还提供了内置的应用主题热加载，并且其本身的代码库也是相当干净整洁，值得一读。( https://github.com/akveo/kittenTricks )

• PicoGL.js：PicoGL.js 是基于 WebGL 2 的轻量级辅助库，适用于任何了解 WebGL 2 渲染管道流并且打算使用它的开发者。PicoGL.js 提高了更为方便地流式接口，典型的使用场景即是创建 Vertex Buffers、Vertex Arrays、FrameBuffers 等。( https://github.com/tsherif/picogl.js )

• vue-table-component: vue-table-component 提供了轻量级、易于使用的 Vue.js 组件；该组件的一大特性在于其能够自动缓存用户的筛选与排序结果，即使用户刷新了页面该数据仍然可以保留使用。( https://github.com/spatie/vue-table-component )

• react-hold: react-hold 能够自动地为纯组件创建加载提示，它能够自动地根据纯组件不同的形状与类型创建不同的占位提示符。( https://github.com/toplan/react-hold )

巅峰人生

前端之巅

前端之巅是 InfoQ 旗下关注前端技术的垂直社群，加入前端之巅学习群请关注前端之巅公众号后回复“加群”。投稿请发邮件到 editors@cn.infoq.com，注明“前端之巅投稿”。