前端每周清单第15期：Node.js v8.0发布，从React迁移到Vue，前端开发的未来

前端 前端每周清单

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

新闻热点

国内国外，前端最新动态

• 《Node.js LTS v8.0发布》：Node.js于5月30日在其官方博客上宣布发布代号为Carbon的Node.js v8.0.0版本，其带来了很多重要的特性改进和一些全新的特性。其典型改变包括了引入async_hooks以监控异步操作、引入N-API以开发原生插件、改进了Buffer的安全性以及将NPM升级到了5.0.0版本等( https://parg.co/bJh )

• 《Chrome 60中DevTools新特性介绍》：Google IO 2017中，Paul Irish在题为DevTools: State of the Union的演讲中，介绍了Chrome DevTools即将包含的新特性。新特性包括了基于Lighthouse的全新Audits面板、第三方请求标识、异步代码的单步调试支持等等。( https://parg.co/bJR )

• 《Github宣布将V4版本的API完全迁移到GraphQL架构》：近日，Github在其博客宣布将会在V4版本的API中仅使用GraphQL架构，而不再提供REST风格的接口。Github认为GraphQL提供了显著的灵活性与便捷性，能够有助于使用者更为方便、多变地构建查询与获取数据。( https://developer.github.com/v4/ )

• 《styled-components v2发布》：在经过6个月的迭代与300多次提交之后，styled-components宣布发布其V2版本。新版本中包体体积进一步减少，并且提供了关键路径CSS抽取以及很多的新API。( https://parg.co/bJM )

开发教程

步步为营，掌握基础技能

• 《需要掌握的Node.js Streams相关知识》：Node.js steams一直以来都被诟病难以理解与使用，近年来也有不少的开发者创建了封装库以便于使用Node.js streams；不过本文追本溯源，着重于介绍Node.js Streams的基本语法并且理清常见的误解。本文首先以简单的利用Stream读取文件的例子来介绍Stream的概念，然后介绍了Node.js中四个流以及其具体实现方式。( https://parg.co/bJN )

• 《8个常用的NPM技巧》：NPM是前端开发中不可避免的脚本工具，而本文则介绍了数个常见的NPM小技巧；包括了初始化包、运行测试、可用脚本命令枚举、查看已安装包等等。( https://parg.co/bJO )

• 《REST API基础》：作为目前主流的接口风格定义之一，REST在数据交互中占据了重要的地位。本文则是从REST风格的基础开始介绍REST的由来、设计理念以及在真实应用中设计RESTful API应该考虑的方面与遵循的原则。( https://restful.io/rest-api-back-to-basics-c64f282d972 )

• 《从React迁移到Vue.js》：React与Vue.js都是非常优秀的前端框架，不同的团队在不同的应用场景下可能有不同的偏好。而本文则记录了作者从React迁移到Vue.js中的思考过程；本文首先介绍了React与Vue.js之间的异同，对比了二者常用的语法特点以及生态圈，并且讨论了为何从React迁移到Vue.js的理由。( https://parg.co/bJ8 )

• 《基于Vuex的Vue应用状态管理》：就如同其他基于组件的框架，对于基于Vue开发的应用随着其体量与功能的增加，对于状态的追踪会变得日渐麻烦。而本文则分析了状态管理的痛点以及深入浅出地介绍了如何利用Vuex进行Vue应用状态管理。( https://parg.co/bJk )

工程实践

立足实践，提示实际水平

• 《Redux状态管理之痛点、分析与改良》：如何设计Redux的store？这几乎是Redux在实践中被问到最多的问题，或许你有自己的方式，却总觉得哪里不太对劲。这篇文章希望从状态是什么，到Elm中的状态管理，最后与Redux分析和对比，试图找到问题，并推导可行的改良方式。( https://parg.co/bJq )

• 《JavaScript单元测试框架大乱斗：Jasmine、Mocha、AVA、Tape以及Jest》：在开始新的前端项目时，我们常常会考虑应该使用哪一个单元测试框架，或者考虑应该为哪些代码添加单元测试。而本文则对于常用的Web开发中的单元测试框架Jasmie、Mocha、AVA、Tape以及Jest进行了横向对比，并且基于自己的经验给出了不同应用场景与需求下不同的单元测试框架选项建议。( https://parg.co/bJ5 )

• 《React Europe 2017见闻实录》：本文记录了作者在第三届React Europe大会上的见闻，也是不错的窥见React生态圈现状与未来发展方向的方式。本文首先介绍了即将到来的React 16以及新的调和算法Fiber，然后介绍了一些辅助构建高质量JavaScript代码的工具，最后还讨论了基于流的按帧渲染方式。( https://parg.co/bJt )

• 《常用的Recompose HOCs》：由Andrew Clark发布的Recompose是便捷的构建高阶组件的辅助库，本文则介绍了branch、mapProps、withState、lifeCycle、nest这些常用的HOCs的实际用法。( https://parg.co/bJV )

• 《阅读Flexbox Spec之后的感悟》：Flexbox是Web前端开发中常用的布局方式之一，其便于使用并且相当灵活；不过本文作者在阅读完了Flexbox的Spec之后却有了很多基础用法之外的发现。本文就介绍了margin、min-width以及各个属性在Flex布局中的隐藏特点。( https://parg.co/bJJ )

深度阅读

深度思考，升华开发智慧

• 《Vue 2017现状与展望》：5月20日，在全球首届VueConf上，Vue.js作者尤雨溪介绍了Vue.js 2017的现状，并对Vue的未来做了展望。本文是对此次演讲的回顾。获取更多Vue相关内容，请关注前端之巅公众号并回复“Vue”。( https://parg.co/bJ6 )

• 《软件开发中的合成之道》：本文是Eric Elliott为其Composing Software系列文章所著的序章，着眼于软件开发中常用的函数合成与对象合成相关的概念解析与介绍。我们软件开发的过程就是不断地将小的模块逐步组合为完整的系统，我们不可避免地需要去组合调度多个函数，或者利用继承等方式将简单的类慢慢组合为复杂的业务类。( https://parg.co/bJ4)

• 《Web前端开发的未来》：本文作者从自己的实践出发畅想了未来Web前端开发的可能方向；主要包括JavaScript新特性的增强以及对于状态管理的深入、从简单界面逐渐过渡到完整系统、原生与Web之间的边界逐步消失、CSS会逐步模块化并且预处理器会逐步退出历史舞台、性能仍然是关键瓶颈以及URL会变得愈发重要等多个方面。( https://parg.co/bJr )

• 《统一样式语言》：近几年CSS-in-JS迅猛发展，各种实现库也是层出不穷。而本文作者，也是CSS Modules的作者之一，则是高屋建瓴地介绍了CSS-in-JS的特点与解决的问题，梳理了人们之前对于CSS-in-JS存在的误解。并且横向比较了多个CSS-in-JS的优缺点与适用场景，最后还畅想了下CSS-in-JS的未来。( https://parg.co/bJi )

开源项目

乐于分享，共推前端发展

• 《chromatism》：chromatism是一系列用于进行常见颜色转换操作的函数的集合，提供了色彩转换、色差色温计算以及其他功能函数。( https://github.com/toish/chromatism )

• 《Workbox》：Workbox是来自Google Chrome团队的快速将现有应用转化为Progressive Web Apps的JavaScript库；Workbox允许我们通过Webpack插件、Gulp插件以及npm脚本的方式快速地为当前应用的资源创建对应加载ServiceWorker。( https://workboxjs.org/ )

• 《Hyperloop》：Hyperloop是服务于美团点评客户端的组件发版、持续集成、App打包构建、资源调度等各个环节的发布调度系统。接入Hyperloop系统后，开发同学可以通过Hyperloop来管理自己的项目，配置发版和打包所需要的步骤和检查项。开发完成时，用户只需要登录Hyperloop进行相关操作，Hyperloop就会根据项目的配置去调用不同的步骤，上报每个步骤的状态，给出错误日志、状态通知等。( http://tech.meituan.com/iOS_Hyperloop.html )

• 《pix2code》：pix2code依赖于深度学习技术将来自于设计师的界面图片转化为iOS等客户端中的代码。( https://github.com/tonybeltramelli/pix2code )

• 《Birdview.js》：Birdview.js是个非常有趣的JavaScript插件，它能将整个页面以鸟瞰图的方式呈现给用户，并且允许用户直接进入选中的点。( http://achrafkassioui.com/birdview/ )

巅峰人生

前端之巅

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