Create 2.2-Frontend.md

Weekly/2017/2/2.2-Frontend.md

+> [前端每周清单：Vue 2.2发布，React在GitHub突破6万star](https://zhuanlan.zhihu.com/p/25462536) 为InfoQ中文站特供稿件，首发地址为[这里](https://mp.weixin.qq.com/s?__biz=MzIwNjQwMzUwMQ==&mid=2247485018&idx=1&sn=bcb83941e1f302e1b5afae816ab4e26f&chksm=97236498a054ed8eea3457950c2f0846f3102ea4b2a82314e3a65d69cdb3fb4e216daf072878)；如需转载，请与InfoQ中文站联系。从属于笔者的[Web 前端入门与工程实践](https://github.com/wxyyxc1992/Web-Frontend-Introduction-And-Engineering-Practices)。
+
+
+
+## 新闻热点
+
+`前端领域最新动态`
+- [《Chrome开始集成图形识别 API》](https://mp.weixin.qq.com/s?__biz=MzIwNjQwMzUwMQ==&mid=2247485016&idx=1&sn=16d49301abf4f9911ae33fbaa587ad94&chksm=9723649aa054ed8cc0a8a060465f0bcff93b10384780052472b5435f610ea1343fa8aae9d285#rd)：最近，Chrome团队尝试在Chrome中集成了一套与图形识别相关的API，使得图形识别这种以前只在原生应用中存在，或者在浏览器上，要借助其他难用的外部库才能实现的功能，现在只要少量代码即可实现。这些API包括人脸识别，条形码/二维码识别和文本识别，基本上覆盖了当前互联网应用的大部分场景。
+- [《Yarn 发布其中文网站》](https://zhuanlan.zhihu.com/p/25320734)：近日， [Yarn 中文站](https://yarnpkg.com/zh-Hans/)正式发布。Yarn 是Facebook开源的，针对存储在npm或Bower注册表中的JavaScript模块的一个代理包管理器，旨在提供更快，更可靠，更安全的包管理。参考资料：[《Facebook开源JavaScript包管理器Yarn》](https://mp.weixin.qq.com/s?__biz=MzIwNjQwMzUwMQ==&mid=2247484332&idx=1&sn=7ea6a0be155b8f3b7db2e1c280822282&chksm=9723616ea054e878905b6568f35c6f19547b32051f93158ed08506477d3cfaaa090060ae4ab8#rd)
+- [《React 在 Github 上突破 60 000 Star》](https://twitter.com/reactjs/status/833570245243654144)：近日，React 在 Github 上突破 60000 Star，作为专注于界面层的小而美的前端库，相信 React 未来会更加辉煌。
+- [《Node.js v7.6.0 发布》](https://www.reddit.com/r/node/comments/5vgdsy/node_v760_released_with_asyncawait/)：Node.js 7.6.0 版本正式发布，可以使用 nvm 等工具进行安装。此版本最大的亮点在于其默认支持 async/await 语法，而不需要 --harmony-async-await 等命令行参数。Reddit 讨论区中大家对于 Koa2 的进一步流行充满了期待。不过 [Twitter](https://twitter.com/ljharb) 上也有人提醒到，过度使用 await 反而可能带来性能问题，应该适时地使用 Promise.all()。
+- [《TypeScript 2.2 发布》](https://blogs.msdn.microsoft.com/typescript/2017/02/22/announcing-typescript-2-2/): TypeScript 基于 ECMAScript 标准构建，并且添加了额外的类型检测的支持。TypeScript 2.2 能更好地与 VSCode 相结合，提供更加友好的语法提示。除此之外，TypeScript 2.2 还引入了很多新特性，可以查看原文获取更多信息。
+- [《Meteor 1.4.3 发布》](https://blog.meteor.com/announcing-meteor-1-4-3-d1e9ab511d06#.n1tu0947z): Meteor 1.4.3 带来了一系列的性能提升，特别是对于大型应用的重构建耗时的优化；同时核心包体的版本也都进行了更新，npm 更新到了 4.x 版本。
+- [《Vue 2.2.0 发布》](https://github.com/vuejs/vue/releases/tag/v2.2.0)：该版本包含了 22 个开发者提交的 31 个 PR，除了更新`vue`核心包体之外，还需要更新`vue-template-compiler`以及`vue-loader`。该版本并未进行公共 API 的更新，不过有部分内部的文档未提及的 API 发生了变化，详情可以参考官方文档。
+## 开发教程
+
+`步步为营，掌握基础技能`
+
+- [《Learn Angular 2 with Me》](https://www.youtube.com/watch?v=QzXdiH3wJp0)：本系列视频介绍 Angular 2 的环境搭建与部分工程实例。本教程介绍了 Angular CLI 的使用、Angular 模块基础、构建注册表单、动态表单，等等。
+- [《3 步学习 D3 与 Canvas》](https://medium.freecodecamp.com/d3-and-canvas-in-3-steps-8505c8b27444#.i2kfofy6u)：此系列教程介绍了 D3.js 与 Canvas 的基本使用，包含了数据绑定、元素绘制以及允许用户交互这几个部分。
+- [《全栈开发者学习指南》](https://medium.com/@amit_tushar/part-uh-what-does-it-take-to-be-a-full-stack-developer-a82c449ec969#.w3wk60zap)：全栈开发者即是那些能够同时负责后端开发、前端开发以及服务器部署的开发人员，而本系列文章即着眼于介绍成为全栈开发者所必备的那些技能知识。
+- [《基于 React 与 Redux Sagas 的权限验证应用开发教程》](http://start.jcolemorrison.com/react-and-redux-sagas-authentication-app-tutorial/)：此文中作者深入地介绍了如何利用 Redux、Redux Saga、Redux Form、React Router 这些工具开发常见的权限验证应用。单独地使用某个工具似乎没啥难度，但是在工程应用中将它们较好地组合在一起却不是件容易事。而本文则是作者从自身工程实践的角度进行了介绍。
+- [《基于 ReactNative 与 MobX 的 Imgur 应用开发教程》](http://school.shoutem.com/lectures/build-simple-imgur-client-react-native/)：此文中作者结合 ReactNative 与 MobX 开发一个展示 Imgur 中图片的应用，涉及到了如何使用 MobX 进行状态管理、如何与 RESTful API 进行交互、如何在 ListView 中渲染全屏图片以及如何监听设备状态等。
+
+
+## 工程实践
+
+`立足实践，提示实际水平`
+
+- [《2017 Web 发展的 5 个趋势》](https://www.oreilly.com/ideas/5-web-trends-for-2017)：此文讨论了 2017 年 Web 发展的 5 个趋势，包括 Progressive Web App 的崛起、Web 技术栈的日趋稳定与选择更加灵活、函数式编程继续风行、以 GraphQL 为代表的数据查询方式以及面向人工智能的设计等等。
+- [《在 React 中构建微交互动画》](https://medium.freecodecamp.com/how-to-build-animated-microinteractions-in-react-aab1cb9fe7c8#.4jnphlp3r)：微交互能够更好地引导用户，提升用户体验，而文本则是基于 CSS Transitions、react-motion、react-animations 构建可交互的搜索框。 
+- [《理解 JavaScript 中的作用域》](https://scotch.io/tutorials/understanding-scope-in-javascript)：JavaScript 中的作用域、闭包以及上下文绑定一直是令人凌乱的知识，此文作者详细地从函数作用域、块作用域、词法作用域、闭包等进行详细阐述，值得一读做个梳理。
+- [《实际项目中 HTTP/2 性能测试与分析》HTTP/2 – A Real-World Performance Test and Analysis](https://css-tricks.com/http2-real-world-performance-test-analysis/)：HTTP/2 相较于 HTTP/1 提供了很多的新特性，包括二进制流、多路复用、服务端推送以及消息头压缩，从而带来了显著的性能提升。此文作者则是基于真实项目对于 HTTP/1 与 HTTP/2 性能表现进行了测试与分析，给出了 HTTP/2 实践中应该注意的要点建议。
+- [《基于 Webpack 2 的渲染代码分割》](https://medium.com/@adamrackis/vendor-and-code-splitting-in-webpack-2-6376358f1923#.4ma6usgf0)：Webpack 2 对其文档与使用规范带来了极大的提升，而 Webpack 2 中对于代码分割相较于 Webpack 1 也有所变化。此文作者则是从自身项目中的实践出发介绍代码分割、包体体积审视与控制以及压缩等等内容。
+- [《掌握 CSS Animation》](https://stories.jotform.com/how-to-use-css-animations-like-a-pro-dfacc1e97338#.2myk0rrar): 利用 Keyframes 以及各种各样的动画属性：timing、delay、play state、animation-count、iteration count、direction、fill mode、will change 来构建交互动画。
+- [《2017 年 React 与 Redux 学习建议》](https://www.robinwieruch.de/tips-to-learn-react-redux/?from=timeline&isappinstalled=0#flatState): 此文是作者数年来学习与使用 React 以及 Redux 的感悟，不一定适合纯初学者，不过对于有一定基础概念的很推荐一看。
+
+## 深度阅读
+
+`深度思考，升华开发智慧`
+
+- [《ECMAScript 2017 and beyond》](https://speakerdeck.com/rauschma/ecmascript-2017-and-beyond)：这是  Axel Rauschmayer 的演讲总结，讨论了自从 ECMAScript 2016 以来添加的各种新特性，以及 ES2017 的最终发布版会包含的特性，最后还讨论了 ES2017 之后会被加入到标准中的特性。
+- [《async/await 并非万能，适时使用 Promise》](https://medium.com/@bluepnume/even-with-async-await-you-probably-still-need-promises-9b259854c161#.w1k2udirb)：ES2017 中正式加入了 async/await 特性，这让我们可以写出更加优美的异步代码。然而，过度地使用 async/await ，特别是在使用 Babel 将其编译为旧版本浏览器支持代码的情况下，反而会带来性能损耗。我们应该适时地使用 Promise.all() 等类似方法来提升性能。
+- [《Google宣布攻破SHA-1，从此SHA-1不再安全！》](https://mp.weixin.qq.com/s?__biz=MzA5Nzc4OTA1Mw==&mid=2659599007&idx=1&sn=d85635ec19e2a82794aac26f26a62b8b&chksm=8be9978dbc9e1e9b4412d3d86ad20a1cbb97315bf61bbfa91e3900b7a7c22597f3d3efdcd18f&mpshare=1&scene=1&srcid=0224XxxzhH83ZvaUvGfBoJKu&key=99fc506efa04c0d71489a0a3ecdcd3120bfd48058552db9272258f3e9077af2ad3bf79cf28bba679ef69940a7594ae58664a952cb7c23325cb21d5644eef13781f6f9b99a85ee7c6e6d9f8e93d3574aa&ascene=0&uin=NjY5Njk1MDU%3D&devicetype=iMac+MacBookPro11%2C2+OSX+OSX+10.12.2+build(16C67)&version=12010310&nettype=WIFI&fontScale=100&pass_ticket=Dd1f6urCQNues19c%2FliavMKGxQcvbcH%2BL8BjDnN3fug%3D)：SHA-1等加密散列函数可谓加密学家手中的瑞士军刀，距离SHA-1的最初发布已经过去了十年，Google 以及 CWI 正式公布第一套可实现碰撞的实用性技术方案。Linus Torvalds 也对这件事情发表了[看法](https://plus.google.com/+LinusTorvalds/posts/7tp2gYWQugL)，他表示不需要过分担心目前 Linux 的安全机制收到影响，毕竟 SHA1 更多的只是校验而非加密，不过这件事也有助于促进 Linux 代码的更迭。
+- [《Node.js 社区的发展之道：质量与速度并重》](https://nodejs.org/en/blog/community/quality-with-speed/): Node.js 社区的核心目标之一就是在快速迭代的同时保证代码质量，新发布的版本务必与之前的版本保持相同的稳定性，避免造成生产环境下应用的崩溃。Node.js 社区并没有一味的寻求妥协，而是不断突破自己，从而在保证变更速度的同时达成较高的质量要求。文本则是 Node.js 社区对于他们发布版本、变更流程以及自动化测试、性能测试等多方面的介绍。
+- [《Twitter Redux Store 探秘》](https://medium.com/statuscode/dissecting-twitters-redux-store-d7280b62c6b1#.wu5trgupx)：复杂应用的 Store 设计一直是开发中的难点，而作为大型内容社交软件 Twitter 之前宣布 Web 移动端逐步迁移到 Node.js、Express、React PWA 架构，本文就是对于 Twitter 的 Redux Store 设计分析与探秘。
+
+## 开源项目
+
+`乐于分享，共推前端发展`
+
+- [《开源在线代码演示网站 Dwitter 发布 》](https://www.dwitter.net/)：Dwitter 是类似于 CodePen 这样的，不过专注于 JavaScript 代码片演示的网站，已经有很多开发者在上面贡献了奇妙的基于 JavaScript 的动画或者小程序。
+- [《基于 div 与 纯 CSS 实现的加载动画》](http://www.raphaelfabeni.com.br/css-loader/)：Web 开发中，当我们需要用户等待某个异步操作完成，譬如网路请求或者表单提交时，我们应当给予用户友好的提示。而 CSS Loader 就是仅基于 div 与 CSS3 动画的加载提示库，其并不像 GIF 这样需要额外的图片请求，并且具有相当好的可维护性与自定义性。
+- [《仅有 500 bytes 的 fetch polyfill》](https://github.com/developit/unfetch)：unfetch 支持 IE8 及以上浏览器，提供了完整的 fetch API 的子集，其最大优势在于压缩之后的尺寸非常的小。
+- [《AR.js》](https://github.com/jeromeetienne/AR.js): AR.js 是高性能的面向 Web 的增强现实的工具库，它在移动端能达到 60fps。感兴趣的可以在手机浏览器中打开[这里](https://jeromeetienne.github.io/AR.js/three.js/examples/mobile-performance.html)，然后扫描[这个标志](http://wibiwardhono.lecture.ub.ac.id/files/2015/01/HIRO.jpg)，你会发现一些奇妙的东西。
+- [《Webpack offline 插件》](https://offline-plugin.now.sh/)：该插件可以为基于 Webpack 构建的项目添加离线体验支持，它底层依赖于 ServiceWorker 以及 AppCache 。我们只需要简单地将插件添加到`webpack.config`中，然后在客户端脚本中动态地执行`runtime.install()`就可以自动缓存所有 Webpack 编译之后的资源。可以查看[这篇博客获取详细使用详解](https://dev.to/kayis/easy-offline-first-apps-with-webpacks-offline-plugin)或者参考[这个示范项目](https://github.com/kay-is/webpack-offline-plugin-example)。
+
+## 巅峰人生
+
+`一览众山，聆听巅峰故事`
+
+- [《关于技术选型的那些事儿》](https://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2650995506&idx=1&sn=4dbec250c8e24f895ca6ce4833f9444e&chksm=bdbf03618ac88a7738837306259f9052c22a852b5936900df00c90dbfd44788a5ab3b5e29c8a&mpshare=1&scene=1&srcid=0227t63poGY9cZX2frQFPvFT#rd)：杜欢是滴滴出行的技术总监，负责滴滴小巴业务的技术管理工作。在互联网领域已经有十年工作经验，曾就职于微软、百度，也曾自主创业两次，来到滴滴之后也经历过很多项目和业务的变化，是一个“什么都懂”工程师，对前端、客户端、服务端、运维等方面都有不少实战经验。此文是他在大咖说中的分享整理而成。
+- 回顾大牛成长：2011年杜欢在QCon上的主题演讲([《HTML5游戏探索之路》](http://www.infoq.com/cn/presentations/dh-html5-development-platform?utm_source=infoq&utm_campaign=user_page&utm_medium=link)；2016年接受采访[《滴滴杜欢：高歌猛进中的滴滴如何解决架构上的阵痛？》](http://www.infoq.com/cn/news/2016/06/Didi)，为《架构师》撰写的卷首语[《重构的时机》](http://www.infoq.com/cn/minibooks/architect-201608)。
+
+
+![](http://static.geekbang.org/infoq/58807d93176c5.png?imageView2/0/w/800)