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