前端每周清单第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，注明“前端之巅投稿”。