前端每周清单第13期：Webpack CLI发布、Angular 5可期待的新特性、解密现代浏览器引擎构建之道

前端 前端每周清单

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

新闻热点

国内国外，前端最新动态

• 《Stack Overflow发布技术趋势工具》：平均每天有约8000名开发者在Stack Overflow上提问工作学习中碰到的问题，Stack Overflow对这些问题关联的技术进行了提取与分析，形成了Stack Overflow Trends tool。Stack Overflow Trends tool能够根据每个月提出的问题涉及到的技术，形成对于编程语言或者框架等技术相关内容的热度变化分析图。( https://parg.co/btI )

• 《Git 2.13发布》：近日开源项目Git发布其2.13.0版本，包含了来自65个贡献者提供的新特性与错误修复。新版本中提供了SHA-1碰撞检测、更方便地路径匹配、条件配置等功能。( https://github.com/blog/2360-git-2-13-has-been-released )

• 《新版Webpack CLI发布》：为了减少初始化Webpack项目的门槛，并且使得从Webpack V1迁移到Webpack V2更加地方便，Webpack团队根据社区的反馈意见重制了新版的Webpack命令行工具。该命令行工具能够快速根据用户指定模板创建初始化项目，并且能够将V1版本的配置文件自动升级为V2版本的配置文件。( https://parg.co/bV0 )

• 《TypeScript React Starter发布》：为了方便初学者使用TypeScript开发React应用，近日Microsoft官方仓库发布了TypeScript React Starter。其能够帮助开发者快速创建基于React与TypeScript的前端项目、使用TSLint进行代码检测、使用Jest与Enzyme进行代码测试并且使用Redux进行状态管理。( https://github.com/Microsoft/TypeScript-React-Starter )

开发教程

步步为营，掌握基础技能

• 《接口的权限认证技术纵览》：本文以表格的方式详细列举了常见的接口权限认证技术的描述、适用场景、数据存储以及和服务端交互方式等内容。本文涉及到的常用权限认证技术包括：HTTP Basic认证、无状态Session Cookie、JWT、有状态Session Cookie、随机令牌、请求签名、OAuth等。( https://parg.co/bte )

• 《在案例分析中学习CSS Animation与Web Animation API》：本文由作者实现的某个 Logo动画入手，首先介绍了如何利用Web Animations API创建简单的KeyFrame动画，包括创建动画对象以及将其应用到具体的元素中；接下来作者介绍了该动画的CSS实现版本，还对比分析了二者在性能上的差异。( https://parg.co/btn )

• 《拥抱React Router 4，改变旧的思维习惯》：在今年的React大会上，Michael Jackson以及Ryan Florence发布了所谓“Learn Once，Route Anywhere”的演讲。同时也代表了React Router 4中的核心思想：路由即声明式组件；本文则介绍了React Router V3到React Router V4的变化。( https://parg.co/bVv )

• 《使用现代方法端到端测试Vue.js应用》：端到端测试是Web测试中的重要组成部分，也是应用开发流程中不可或缺的部分；本文则介绍了如何使用TestCafe对Vue.js应用进行端到端测试。( https://parg.co/bV9 )

• 《简短的WebAssembly卡通指南》：现在有很多关于WebAssembly与JavaScript生态圈的讨论，人们往往关注于WebAssembly带来的巨大的性能提升以及它会如何颠覆现代Web开发。不过很多的介绍中并没有详细阐述隐藏在速度提升之后的具体细节，本文则是从整个JavaScript的演化史来介绍WebAssembly巨大性能提升的原因。( https://parg.co/bVa )

工程实践

立足实践，提示实际水平

• 《高性能动态CSS样式》：本文是对 JSS 新近提供的函数式值的介绍，其与React内联样式以及其他CSS解决方案相比有数倍的性能提升。在Web开发中动态设置样式往往会触发页面的重渲染，而本文则是介绍了如何使用CSSOM的API来在元素渲染之前即完成样式的设置。( https://parg.co/btW )

• 《编写安全的Node.js代码》：本文是对于Danny Grander演讲的总结，他首先回顾了如何黑掉有漏洞的Node.js应用，同时也深度阐述了数个流行的npm包中存在的安全威胁；最后作者给出了修复这些漏洞以及在未来应用开发中保证Node.js代码安全性的建议。( https://parg.co/bVL )

• 《如何保证H5页面高质量低成本快速生成？》：任何技术优化都依托于业务的发展，而QQ会员增值业务的重心转移到手Q移动端，同时由于每个页面都意味着KPI收入，任何可能导致页面功能不可用的发布行为都是不可接受的。那么如何保证H5页面高质量快速生成呢？( https://parg.co/bV1 )

• 《Angular v5中可期待的新特性》：在Angular V4发布之后，Angular团队就开始致力于Angular v5的开发，本文则是介绍Angular V5中部分可期待的新特性。在Angular V5中团队致力于简化应用的编译流程，将AOT编译模式设置为默认模式；同时会添加编译时的自动监控辅助命令，并且为模板添加类型检测的功能；同时V5版本会进一步优化错误提示，并且使得未来的升级更加地平滑。( https://parg.co/bVy )

深度阅读

深度思考，升华开发智慧

• 《React新引擎React Fiber究竟要解决什么问题？》：Facebook正在以流行的JavaScript框架React为基础开发一个全新的架构。这个名为React Fiber的全新设计改变了检测变更的方法和时机，借此可改进浏览器端和其他渲染设备的响应速度。这一 全新架构 最初已于2016年7月公开发布，其中蕴含着过去多年来Facebook不断改进的工作成果。该架构可向后兼容，彻底重写了React的协调(Reconciliation)算法。该过程可用于确定出现变更的具体时间，并将变更传递给渲染器。( https://parg.co/btw )

• 《测试中Fakes、Mocks以及Stubs概念明晰》：在自动化测试中，我们经常会使用一些简化但是类似于生产环境下的对象复制品来进行测试，从而简化测试的复杂度、允许仅对测试目标而独立于其实际耦合模块进行测试。本文则是形象生动地介绍了常见的测试复制品(Test Doubles)中Mocks、Fakes以及Stubs的区别。( https://dev.to/milipski/test-doubles---fakes-mocks-and-stubs )

• 《GUI应用程序架构的十年变迁：MVC、MVP、MVVM、Unidirectional、Clean》：随着现代浏览器的日渐流行，Web以及混合开发技术的发展，大前端的概念日渐成为某种共识；而无论iOS、Android、Web这样的端开发还是React Native、Weex这样的跨端开发，其术不同而道相似纵览这十年内的架构模式变迁，大概可以分为MV*与Unidirectional两大类，而Clean Architecture则是以严格的层次划分独辟蹊径。从笔者的认知来看，从MVC到MVP的变迁完成了对于View与Model的解耦合，改进了职责分配与可测试性。而从MVP到MVVM，添加了View与ViewModel之间的数据绑定，使得View完全的无状态化。最后，整个从MV*到Unidirectional的变迁即是采用了消息队列式的数据流驱动的架构，并且以Redux为代表的方案将原本 MV* 中碎片化的状态管理变为了统一的状态管理，保证了状态的有序性与可回溯性。( https://zhuanlan.zhihu.com/p/26799645 )

• 《 解密Quantum：现代浏览器引擎的构建之道》：2016年十月份Mozilla宣布了Quantum项目，基于Rust构建下一代浏览器引擎；而在上个月发布的Firefox 53中就包含了Quantum的部分代码。本文即是在介绍Quantum开发与演变的过程中同时解密其蕴含的现代浏览器引擎的基础框架与构建之道。( https://parg.co/bVg )

开源项目

乐于分享，共推前端发展

• 《vx》：vx是对基于React与d3实现的一系列底层可视化组件的汇总，它结合了d3来创建交互式可视化图表与React来进行应用更新的优势。( https://github.com/hshoff/vx )

• 《iotaCSS》：iotaCSS是基于SASS的OOCSS框架，其具备了完全轻量可扩展的特性，并且提供了高性能的、可读性较好的以及完全响应式的接口配置。( https://www.iotacss.com/ )

• 《SVGito》：SVGito是轻量级的SVG优化工具，特别是对于导出自Sketch的SVG图标具有较好的优化效果。SVGito能够帮你自动完成那些手动地操作，有效减少SVG的复杂度与文件体积。( https://parg.co/btg )

• 《Britecharts》： Britecharts是基于D3.js v4的客户端可复用图表库，它提供了简单而直观的图表组件以方便结合开发出复杂炫酷的可视化应用。( https://parg.co/bVH )

• 《Insomnia》：Insomnia是基于Electron构建的跨平台REST客户端，提供了友好美观的用户交互界面。( https://github.com/getinsomnia/insomnia )

巅峰人生

前端之巅

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