2.2-Frontend

• 前端每周清单：Vue 2.2发布，React在GitHub突破6万star 为InfoQ中文站特供稿件，首发地址为这里；如需转载，请与InfoQ中文站联系。从属于笔者的Web前端入门与工程实践。

新闻热点

前端领域最新动态

• 《Chrome开始集成图形识别API》：最近，Chrome团队尝试在Chrome中集成了一套与图形识别相关的API，使得图形识别这种以前只在原生应用中存在，或者在浏览器上，要借助其他难用的外部库才能实现的功能，现在只要少量代码即可实现。这些API包括人脸识别，条形码/二维码识别和文本识别，基本上覆盖了当前互联网应用的大部分场景。

• 《 Yarn发布其中文网站》：近日，Yarn中文站正式发布。Yarn是Facebook开源的，针对存储在npm或Bower注册表中的JavaScript模块的一个代理包管理器，旨在提供更快，更可靠，更安全的包管理。参考资料：《 Facebook开源JavaScript包管理器Yarn》

• 《 React在Github上突破60 000 Star》：近日，React在Github上突破60000 Star，作为专注于界面层的小而美的前端库，相信React未来会更加辉煌。

• 《 Node.js v7.6.0发布》: Node.js 7.6.0版本正式发布，可以使用nvm等工具进行安装。此版本最大的亮点在于其默认支持async/await语法，而不需要 –harmony-async-await等命令行参数。Reddit讨论区中大家对于Koa2的进一步流行充满了期待。不过 Twitter 上也有人提醒到，过度使用await反而可能带来性能问题，应该适时地使用Promise.all()。

• 《 TypeScript 2.2发布》: TypeScript基于ECMAScript标准构建，并且添加了额外的类型检测的支持。TypeScript 2.2能更好地与VSCode相结合，提供更加友好的语法提示。除此之外，TypeScript 2.2还引入了很多新特性，可以查看原文获取更多信息。

• 《 Meteor 1.4.3发布》: Meteor 1.4.3带来了一系列的性能提升，特别是对于大型应用的重构建耗时的优化；同时核心包体的版本也都进行了更新，npm更新到了4.x版本。

• 《 Vue 2.2.0发布》：该版本包含了22个开发者提交的31个PR，除了更新vue核心包体之外，还需要更新vue-template-compiler以及vue-loader。该版本并未进行公共API的更新，不过有部分内部的文档未提及的API发生了变化，详情可以参考官方文档。

开发教程

步步为营，掌握基础技能

• 《Learn Angular 2 with Me 》：本系列视频介绍Angular 2的环境搭建与部分工程实例。本教程介绍了Angular CLI的使用、Angular模块基础、构建注册表单、动态表单，等等。

• 《 3步学习D3与Canvas》：此系列教程介绍了D3.js与Canvas的基本使用，包含了数据绑定、元素绘制以及允许用户交互这几个部分。

• 《全栈开发者学习指南》：全栈开发者即是那些能够同时负责后端开发、前端开发以及服务器部署的开发人员，而本系列文章即着眼于介绍成为全栈开发者所必备的那些技能知识。

• 《基于React与Redux Sagas的权限验证应用开发教程》：此文中作者深入地介绍了如何利用Redux、Redux Saga、Redux Form、React Router这些工具开发常见的权限验证应用。单独地使用某个工具似乎没啥难度，但是在工程应用中将它们较好地组合在一起却不是件容易事。而本文则是作者从自身工程实践的角度进行了介绍。

• 《基于ReactNative与MobX的Imgur应用开发教程》：此文中作者结合ReactNative与MobX开发一个展示Imgur中图片的应用，涉及到了如何使用MobX进行状态管理、如何与RESTful API进行交互、如何在ListView中渲染全屏图片以及如何监听设备状态等。

工程实践

立足实践，提示实际水平

• 《2017 Web发展的5个趋势》：此文讨论了2017年Web发展的5个趋势，包括Progressive Web App的崛起、Web技术栈的日趋稳定与选择更加灵活、函数式编程继续风行、以GraphQL为代表的数据查询方式以及面向人工智能的设计等等。

• 《在React中构建微交互动画》：微交互能够更好地引导用户，提升用户体验，而文本则是基于CSS Transitions、react-motion、react-animations构建可交互的搜索框。

• 《理解JavaScript中的作用域》: JavaScript中的作用域、闭包以及上下文绑定一直是令人凌乱的知识，此文作者详细地从函数作用域、块作用域、词法作用域、闭包等进行详细阐述，值得一读做个梳理。

• 《实际项目中HTTP/2性能测试与分析》HTTP/2 – A Real-World Performance Test and Analysis: HTTP/2相较于HTTP/1提供了很多的新特性，包括二进制流、多路复用、服务端推送以及消息头压缩，从而带来了显著的性能提升。此文作者则是基于真实项目对于HTTP/1与HTTP/2性能表现进行了测试与分析，给出了HTTP/2实践中应该注意的要点建议。

• 《基于Webpack 2的渲染代码分割》: Webpack 2对其文档与使用规范带来了极大的提升，而Webpack 2中对于代码分割相较于Webpack 1也有所变化。此文作者则是从自身项目中的实践出发介绍代码分割、包体体积审视与控制以及压缩等等内容。

• 《掌握CSS Animation》:利用Keyframes以及各种各样的动画属性：timing、delay、play state、animation-count、iteration count、direction、fill mode、will change来构建交互动画。

• 《 2017年React与Redux学习建议》:此文是作者数年来学习与使用React以及Redux的感悟，不一定适合纯初学者，不过对于有一定基础概念的很推荐一看。

深度阅读

深度思考，升华开发智慧

• 《ECMAScript 2017 and beyond 》：这是Axel Rauschmayer的演讲总结，讨论了自从ECMAScript 2016以来添加的各种新特性，以及ES2017的最终发布版会包含的特性，最后还讨论了ES2017之后会被加入到标准中的特性。

• 《 async/await并非万能，适时使用Promise》: ES2017中正式加入了async/await特性，这让我们可以写出更加优美的异步代码。然而，过度地使用async/await，特别是在使用Babel将其编译为旧版本浏览器支持代码的情况下，反而会带来性能损耗。我们应该适时地使用Promise.all()等类似方法来提升性能。

• 《 Google宣布攻破SHA-1，从此SHA-1不再安全！》：SHA-1等加密哈希函数可谓加密学家手中的瑞士军刀，距离SHA-1的最初发布已经过去了十年，Google以及CWI正式公布第一套可实现碰撞的实用性技术方案。Linus Torvalds也对这件事情发表了看法，他表示不需要过分担心目前Linux的安全机制收到影响，毕竟SHA1更多的只是校验而非加密，不过这件事也有助于促进Linux代码的更迭。

• 《 Node.js社区的发展之道：质量与速度并重》: Node.js社区的核心目标之一就是在快速迭代的同时保证代码质量，新发布的版本务必与之前的版本保持相同的稳定性，避免造成生产环境下应用的崩溃。Node.js社区并没有一味的寻求妥协，而是不断突破自己，从而在保证变更速度的同时达成较高的质量要求。文本则是Node.js社区对于他们发布版本、变更流程以及自动化测试、性能测试等多方面的介绍。

• 《 Twitter Redux Store探秘》：复杂应用的Store设计一直是开发中的难点，而作为大型内容社交软件Twitter之前宣布Web移动端逐步迁移到Node.js、Express、React PWA架构，本文就是对于Twitter的Redux Store设计分析与探秘。

开源项目

乐于分享，共推前端发展

• 《开源在线代码演示网站Dwitter发布 》: Dwitter是类似于CodePen这样的，不过专注于JavaScript代码片演示的网站，已经有很多开发者在上面贡献了奇妙的基于JavaScript的动画或者小程序。

• 《基于div与 纯CSS实现的加载动画》: Web开发中，当我们需要用户等待某个异步操作完成，譬如网路请求或者表单提交时，我们应当给予用户友好的提示。而CSS Loader就是仅基于div与CSS3动画的加载提示库，其并不像GIF这样需要额外的图片请求，并且具有相当好的可维护性与自定义性。

• 《仅有500 bytes的fetch polyfill》: unfetch支持IE8及以上浏览器，提供了完整的fetch API的子集，其最大优势在于压缩之后的尺寸非常的小。

• 《 AR.js》: AR.js是高性能的面向Web的增强现实的工具库，它在移动端能达到60fps。感兴趣的可以在手机浏览器中打开这里，然后扫描这个标志，你会发现一些奇妙的东西。

• 《 Webpack offline插件》：该插件可以为基于Webpack构建的项目添加离线体验支持，它底层依赖于ServiceWorker以及AppCache。我们只需要简单地将插件添加到webpack.config中，然后在客户端脚本中动态地执行runtime.install()就可以自动缓存所有Webpack编译之后的资源。可以查看这篇博客获取详细使用详解或者参考这个示范项目。

巅峰人生

一览众山，聆听巅峰故事

• 《关于技术选型的那些事儿》：杜欢是滴滴出行的技术总监，负责滴滴小巴业务的技术管理工作。在互联网领域已经有十年工作经验，曾就职于微软、百度，也曾自主创业两次，来到滴滴之后也经历过很多项目和业务的变化，是一个 “ 什么都懂 ” 工程师，对前端、客户端、服务端、运维等方面都有不少实战经验。此文是他在大咖说中的分享整理而成。

• 回顾大牛成长：2011年杜欢在QCon上的主题演讲(《HTML5游戏探索之路》；2016年接受采访《滴滴杜欢：高歌猛进中的滴滴如何解决架构上的阵痛？》，为《架构师》撰写的卷首语《重构的时机》。