前端每周清单第 2 期:Vue 2.2 发布,React 在 GitHub 突破 6 万 star

408 阅读10分钟
原文链接: mp.weixin.qq.com
作者 | 王下邀月熊 编辑 | 尾尾 上周,前端开发每周阅读清单一经推出就受到了淀粉们的好评。在这个各种信息眼花缭乱,前端技术日新月异的时代,前端之巅愿从广阔的大海中,为大家筛选出璀璨的珍珠。如果你也愿意为大家贡献自己的力量,愿意提供好内容线索或成为译者,那就快快发邮件到luna.han@infoq.com,加入我们吧! 新闻热点

国内国外,前端最新动态

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

  • 《React 在 GitHub 上突破 60 000 Star》:近日,React ,这个专注于界面层的小而美的前端库在 Github 上突破了 60 000 Star。

  • 《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 还引入了很多新特性,可以查看原文获取更多信息。

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

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

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

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

开发教程

步步为营,掌握基础技能

  • 《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() 等类似方法来提升性能。

  • 《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年接受InfoQ采访《滴滴杜欢:高歌猛进中的滴滴如何解决架构上的阵痛?》;

    • 杜欢为《架构师》2016年8月刊撰写的卷首语《重构的时机》。


本文带链接版地址:

https://zhuanlan.zhihu.com/p/25460054?refer=qianduanzhidian

今日荐文

点击下方图片即可阅读

前端每周清单第1期:PWA 将与安卓原生平起平坐

视野拓展

如何用人工智能的方法实现 App 测试的高度自动化?如何才能有效的进行容量计划与性能瓶颈分析?如何打造打造一个可靠、快速、互动性更好的 PWA 应用?如何帮助开发和测试人员节省时间?Google 、Airbnb、NimbleDroid、LinkedIn、腾讯、阿里、百度、360等公司一线技术大咖将在 QCon 北京 2017 为您揭秘。点击阅读原文,即可前往了解更多。

前端之巅

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