前端每周清单第 35 期：Vue.js 2.5 发布、微前端概念详解、浏览器扩展开发实践

前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单。

新闻热点

国内国外，前端最新动态

• Vue.js 2.5 发布：本周 Vue.js 2.5 版本正式发布，同样包含了很多的特性提升与性能优化，推荐阅读 Release Notes 获取详细的特性列表。本文则是对于 Vue.js 2.5 中的重要特性进行介绍，包括了更好的 TypeScript 集成、更好的错误处理、更好的单文件组件中的函数式组件支持以及多环境下服务端渲染的支持等。
• Next.js 4 发布：本周发布的 Next.js 4 版本全面支持 React 16，并且针对其内置的样式引擎 styled-jsx 进行了更新，添加了对于动态样式的支持。而在迁移到了新的 React 版本之后，Next.js 4 在服务端渲染的性能有了约 2.6 倍的提升，并且样式初始化的速度也提升了 20% 左右。除此之外，该版本还包含了一系列的错误修复与功能增强，可以查看原文获取更多信息。
• Preact Cli 2.0.0 发布：本周发布的 Preact Cli 2.0.0 版本引入了自定义模板的特性，允许开发者使用 GitHub/Gitlab/Bitbucket 仓库作为自定义模板，并且通过 preact-cli 命令行工具来创建新的项目。除此之外，preact-cli 2.0.0 还升级到了 Webpack 3，并且修复了一系列的错误；可以查看原文获得更多信息。

开发教程

步步为营，掌握基础技能

• Reboot.css: Bootstrap 4 中 CSS 基础样式归一化：Bootstrap 是广为使用的前端样式库之一，而 Bootstrap 4 使用了 Reboot.css 来替换老的 Normalize.css 进行基础的样式归一化操作。本文首先回顾了 CSS Reset 概念的由来、其实际的价值以及流行过的版本，特别介绍了 Normalize.css 的作用及其缺陷。而 Reboot.css 正是面向现代浏览器，默认将所有元素设置为 box-size: border-box;，并且以简单自然的基础样式保证了跨浏览器样式的一致性；更多 CSS 相关资料参考这里。
• 利用 JavaScript Streams 加速 I/O 与数据操作：在现代 Web 平台之上，Web Bluetooth、Background Sync 以及 WebVR 等一系列新特性的出现使得很多的新功能得以实现；而参考 Streams Specification ，我们能够使用流来进行数据的读写与处理，从而减少内存占用、提高程序并行率、延长电池寿命、优化用户体验。本文即是介绍 Streams Specification 在浏览器中的实践，首先对比了 Node.js 中的流与 Streams Specification、然后介绍了流的概念、语法和典型的使用场景，接下来具体介绍了读写流的使用以及 Fetch 的示范。更多 JavaScript 相关资料参考这里。
• 结合 Bootstrap 4 与 Firebase 构建 Angular 5 项目：本文是入门级的介绍文章，介绍如何从零构建 Angular 5 项目，并且手动地添加 Bootstrap 4 以及 Firebase 库到项目中。本文首先介绍了如何创建空白的 Angular 项目，然后介绍了如何创建空白的 Firebase 在线项目，并且将相关的 JavaScript 库添加到 Angular 项目中；接下来本文讨论了如何引入 Bootstrap 4 与 ng-Bootstrap，以及如何从 Firebase 中获取数据并且呈现在界面上。更多 Angular 相关资料参考这里。
• Vue.js 中 Form 使用详解：Web 开发中常见的需求即是处理表单输入，本文即着眼于介绍在 Vue.js 2.x 应用中如何创建、校验以及利用表单中的用户输入。本文首先介绍了如何利用 v-model 等指令双向绑定表单中的输入域，然后介绍了利用 vee-validate 组件来进行声明式数据校验，并且添加自定义的校验规则，最后介绍了如何提交表单数据并且进行响应回显。更多 Vue.js 相关资料参考这里。

工程实践

立足实践，提示实际水平

• 使用 CSS Grid 重构 slack.com : 本文是来自 Slack 的工程师分享他们基于 CSS Grid 重新设计与实现 slack.com 主页的实践；他们希望能够在保证体验连贯性的情况下，提升站点架构、代码模块化以及整体的性能与可访问性等整体指标。本文首先介绍了对于主页与 Web App 的解耦，以及对于基本组件库的重构；然后介绍了现代化的响应式布局方案以及如何使用 Flexbox 实现优雅降级。最后介绍了字体的设置与响应式图片等内容；更多 CSS 相关资料参考这里。
• Event Loop 与异步编程的崛起：本文是 How JavaScript works 系列的第四篇文章，主要讨论了单线程环境的缺陷以及 JavaScript UI 中如何避免这些，最后还分享了几个使用 async/await 的实践。本文首先介绍了单线程中的不足、JavaScript 中构建块、JavaScript Call Stack 以及 Event Loop 的详细介绍、JavaScript 异步编程范式以及 async/await 的使用建议；更多 JavaScript 相关资料参考这里。
• 构建弹性的浏览器扩展: Grammarly 是广为使用的 Chrome 插件，其 Firefox、Safari 以及 Edge 插件同样吸引了大量的用户。本文即是 Grammarly 背后的工程师团队分享的他们六年来构建与完善该工具的实践经验，同样也是他们对于如何构建弹性的浏览器扩展项目的心得分享。本文第一部分首先介绍了开发框架的搭建，包括文件目录、命令行、组件浏览等；然后介绍了测试、分支模型、持续交付等；接下来讨论了发布到 Chrome Store、Mozilla add-ons、Safari gallery、Edge 的步骤，以及线上版本的质量管理、追踪、反馈收集等内容。第二部分则介绍了具体的应用开发相关内容，包括网络请求、权限验证、用户存储、浏览器接口、权限校验、容错、弹窗、动态更新、性能等。更多浏览器扩展开发相关资料参考这里。
• QQ 空间在生产环境使用 QUIC 协议的经验：QUIC（Quick UDP Internet Connections，发音’quick’）是 Google 于 2013 年发布的基于 UDP 的多路传输协议，它的主要目标是为了整合 TCP 协议的可靠性和 UDP 协议的速度和效率，以降低延迟，提高用户体验。Google 通过大规模的性能分析发现，“相对于 TCP 而言，QUIC 的性能有了真正的进步”，而 QQ 空间前端团队通过对 HTTP2 和 QUIC 协议的应用和实践，使得 Web 页面访问速度得到了很大的提升，并且他们针对性地采用了不同的资源加载策略，最大化利用了协议的优势。

深度阅读

深度思考，升华开发智慧

• WebRender 的极速之道：本文是对于 Firefox Quantum 引擎中，即将使用的高性能渲染引擎 WebRender 的详细介绍。WebRender 最引人瞩目的就是它的高性能，不过 WebRender 其实不能说是快，而是顺滑；WebRender 的设计目标是希望应用能够以 60 FPS 运行，无论展示的数据量大小或者页面跳转。本文首先介绍了渲染引擎的作用，然后介绍了 Painting 与 Compositing 的含义与历史，接下来讨论了 WebRender 如何与 GPU 协同工作及其性能优化范式；更多浏览器引擎相关资料参考这里。
• 微前端：微服务概念的前端实践：本文是对于不同团队使用的不同 JavaScript 框架构建 Web 应用的技术、策略、方法进行讨论，其借鉴了服务端中非常流行的微服务的概念，对于 ThoughtWorks 2016 年末技术雷达中介绍的微前端的概念进行了详细解读。所谓微前端，即是将某个网站或者应用看做一系列由独立团队支撑的特性集合；本文对于现代 Web 应用、微前端的核心概念、DOM API、浏览器支持、服务端渲染、数据抓取等概念进行了详细解读。更多 Web 架构相关资料参考这里。
• 微服务监控与仪表展示的未来：监控能够帮助我们实时地了解系统状态，发现、理解、定位、最小化潜在的业务问题；特别是在微服务这样的分布式离散系统中，我们需要依赖强大的监控功能来保障业务的顺畅运行。而微服务监控的未来也是依赖于行业中的标准化解决规范以及会引入的新特性，本文即是对于 2018 年中那些可以预期的监控特性进行分析，介绍了 APM 的理论基础以及 OpenTracing 的标准与实践； 更多微服务相关资料参考这里。
• 王跃：关于微信小程序的技术，也许你想错了：2017 年 1 月 9 日，微信小程序正式发布。在近一年里，不管外界评价如何，小程序一直在坚定的向前走。同时它的理念和模式受到广泛认可，也被其它公司所模仿。在微信小程序尚在内测之时，外界对它所采用的技术就有很多猜测，正式发布的小程序解答了人们的一些疑惑，但有些问题官方并未正式对外公开说过。在即将于 10 月 17 日举办的 QCon 上海 2017 大会上， 微信小程序相关项目负责人王跃将向大家分享小程序的核心架构及实战案例，我们也对他进行了采访，提前了解了一些我们关心的问题。

开源项目

乐于分享，共推前端发展

• browser-compat-data ：browser-compat-data 是由 MDN 提供的常见 Web 相关技术的浏览器兼容性数据，使得我们除了 Can i use 之外有了新的参考选择。所谓的浏览器兼容性即描述了具体的浏览器平台对于某些特定的 Web API 的支持情况，可以方便于我们构建接口文档，譬如浏览器支持度，或者动态地引入 Polyfill。
• React-Sight : React-Sight 是支持 Fiber、React Router、Redux 的 React 组件可视化工具，它能够将 React 组件以树状方式层次化地可视化呈现给开发者。目前 React Sight 提供了 Chrome 插件，不过需要开发者首先安装 React Dev Tools。
• MapTalks.js : MapTalks.js 是用于创建易集成的 2D/3D 地图的 JavaScript 轻量级框架，提供了高性能顺滑的交互体验、插件化的开发方式，并且易于上手与集成。MapTalks.js 基于 Mapbox.gl，并且完全使用了 ES2015 的代码，支持 IE9 以上的现代浏览器。

巅峰人生

• 漫极客 CTO 李焱：大前端之路 —— 如何用 Web 技术一统三端开发：本文是 EGO 会员、漫极客 CTO 李焱的线上分享，依次介绍了自己不安分、爱挑战的折腾之旅、对于大前端的理解与定义、Web 技术一统三端开发实践，包括 Node.js、APP、微信开发、PC 端、数据可视化、AR / VR、JS 性能、部署架构等方面。

前端之巅

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

感谢徐川对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作，请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博（ @InfoQ ， @丁晓昀），微信（微信号： InfoQChina ）关注我们。