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