前端每周清单加量版：Vue 3.0展望、React代码迁移

重要的事情要特意提醒： 由于微信不支持外链（注意是外链），查看本文带链接版请点击 阅读原文。

双节假期大家过得还好吗？为了不打扰大家我假期没有发东西，大家该放松的放松，该充电的充电，不过也正因此我们的前端清单积累了很多内容，这次一次都发出来了~

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

新闻热点

国内国外，前端最新动态

Microsoft 宣发面向 iOS 与 Android 平台的 Microsoft Edge：为了保证 Windows 用户各平台使用体验的一致性，Microsoft 于本周发布了针对于 iOS 与 Android 平台的 Microsoft Edge 浏览器以及针对 Android 平台的 Microsoft Launcher；不过目前各平台上的 Edge 浏览器仍然使用的是操作系统默认的渲染引擎，即 iOS 系统上的 Webkit 引擎与 Android 的 Chrome 引擎，因此开发者们也无需担心需要针对移动版的 Microsoft Edge 进行适配。

Firefox 56 正式发布：本周 Firefox 56 版本正式发布，其搭载的新一代 Quantum 引擎带来了大幅度的性能提升、全新的交互界面、升级版本的开发者工具等诸多特性与优化。除此之外，Firefox 56 还提供了便捷的截图功能，允许使用者对于网页截图编辑并且快速保存到云端；同时引入了  以提供资源预加载功能，并且允许使用者通过 -headless 指令来启动无界面化的浏览器。

Mocha 4.0.0 发布：本周 Mocha 4.0.0 版本正式发布，其不再支持 Node.js Pre-v4.0.0 及之前的版本，不再支持 npm v2.15.11 以及之前的版本，并且计划不再支持 Bower；除了版本的兼容性之外，Mocha 不再会强制测试完毕后退出，并且优化了输出显示。

iView 2.4 版本发布：iView 是基于 Vue.js 构建的界面组件与插件库，其包含了 TalkingData 开发的一系列面向中间层与后端业务逻辑的解决方案；iView 提供了基础组件、表单组件、视图组件、导航组件、图表与其他多种类型的组件。

React 16 正式发布：前段时间，期待已久的 React 16 正式发布，带来了一系列新特性与性能提升的同时，也正式将开源协议修改为了 MIT。React 16 中最大变动在于核心调和算法的完全重写，引入了所谓的 Fiber 算法。除此之外，React 16.0 中还允许 render 函数直接返回数组与字符串、提供了全新的异常处理机制、引入了 Portal 从而允许组件以优雅的方式将子元素渲染到组件外 DOM 结点中、优化了服务端渲染的性能表现、支持自定义的 DOM 属性，而整个 React 包的体积也有了一定幅度的下降。

GraphQL 相关开源协议更新：随着 React 16.0 的正式发布，GraphQL 标准也宣布将开源协议修正为 Open Web Foundation Agreement（OWFa）v1.0 ，从而确保来自其他公司的开发者更好地协作完善协议。 同时 GraphQL.js 与 Relay 也更新为了 MIT 开源协议，本周还发布了 Relay 1.4.1 版本。

Enzyme 3.0 发布，支持 React 16：Enzyme 是由 Airbnb 开源的 React 组件测试库，随着 React 16.0 版本正式发布，Enzyme 也发布了其 3.0 版本。在 3.x 版本中，Enzyme 同样彻底重写了内部实现，从而解决其自发布以来存在的久为诟病的一些问题，移除了对于 React 内部库的依赖，使得 Enzyme 更加的灵活可用。

GraphQL Playground 发布：GraphQL 正在逐步改变 API 的设计与实现方法， 而为了更好地调试与开发 GraphQL，GraphCool 开源了 GraphQL Playground。GraphQL Playground 基于 GraphiQL 构建，其在保留 GraphIQL 的文档易读性的同时，提供了更加顺滑的文档阅读体验；除此之外，为了更好地适应团队开发，GraphQL Playground 还引入了原子化 Schema 重载与基于 GraphQL Bin 的共享功能。

开发教程

步步为营，掌握基础技能

8 个关键的 React 技术选型：自 2013 年 React 开源以来，React 技术栈也发生了急剧的变化与更新，现在搜索到的不少文章可能也都过时了；本文则是对于现在进行 React 开发所需要的技术栈进行了盘点。首先是开发环境，create-react-app 以 65% 独占鳌头；在类型系统上，有 42% 的开发者选择了 PropTypes，34% 的开发者选择了 TypeScript。而在状态管理上，48% 的使用 Redux，11% 的使用了 MobX；越来越多的开发者也选择使用 CSS 或 SASS 设置样式，选择用 HoC 或者 Render Props 来复用逻辑。更多 React 相关资料查看这里。

Vue.js 2 与 Vue.js 3 中响应式实现的对比：Vue.js 核心团队已经在讨论 Vue.js 3 中核心的响应式实现方式，在保证 API 一致的情况下，其内部实现方式可能会发生变化，本文即是对两种响应式实现方案进行对比。Vue.js 2.0 的响应式主要依赖 Object.defineProperty，其具有较好地浏览器兼容性，但是其无法直接监听数组下标方式变更以及动态添加的属性；而 Vue.js 3 中则计划使用 ES6 Proxy 来实现响应式监听，其能够简化源代码、易于学习，并且还能带来更好地性能表现。更多 Vue.js 相关资料查看这里。

HTTPS 工作原理简述：本文是对于 HTTPS 协议原理的简要介绍，随着越来越多的站点全站化 HTTPS，我们也有必要去了解 HTTPS 的相关知识。本文首先概述了 HTTPS 的机制原理，然后介绍了 Diffie-Hellman 算法，接下来介绍了电子证书、Asymmetric Key Encryption、电子签名、证书校验等内容；更多 HTTPS 相关资料查看这里。

CSS Grid 中的技巧与绊脚石：CSS Grid 为我们带来了新的布局方式，不过在实际使用的过程中也存在着很多的问题，本文即是对这些技巧与绊脚石进行盘点。本文首先分析了 CSS Grid 相较于 Flexbox 的优势，然后讨论了 CSS Grid 与 Flexbox 各自的适用场景、自适应尺寸的 CSS Grid、如何利用 CSS Grid 实现瀑布流、如何添加背景与边距色、如何进行嵌套布局、如何调试等内容；更多 CSS 相关资料查看这里。

Expo AR 简明教程：新版本的 Expo 添加了 iOS 平台上的 Augmented Reality API 支持，从而使得开发者能够利用熟悉的 Three.js 这样的库来开发 AR 场景应用，同时还能利用 Expo 提供的地理位置信息等原生接口来获取信息。本文循序渐进地介绍了如何利用 Expo 与 Three.js 开发简单的 AR 应用，首先介绍了 WebGLRender 的用法与调试，然后讨论了如何添加基础的 AR 场景，最后还给出了完整应用的示例代码。更多 React Native 相关资料参考这里。

React 16 中服务端渲染的新特性介绍：本文是对于近日发布的 React 16 版本中提供的新服务端渲染 SSR 的特性进行了阐述，包括了数组、性能、流等内容。本文首先介绍了 React 15.x 以及之前版本中的服务端渲染写法，然后介绍了 React 16 中引入的新 API 以及后向的兼容性，接下来讨论了 React 16 服务端渲染策略的变化、能够生成更为简洁的 HTML、对于流传递的支持等待；更多 React 相关教程参考这里。

在 NPM 上发布自定义的 Vue.js 组件：当我们利用 Vue.js 编写了不错的组件的时候，会希望将它分享给其他开发者共同使用， 本文即是介绍如何将 Vue.js 组件打包并且发布到 NPM 中。本文主要涉及以下内容：如何在打包中避免引入其他依赖、如何使用 Webpack 构建针对浏览器与 Node 各自独立的包、如何创建浏览器插件、package.json 中的重要配置、如何发布到 NPM 等；更多 Vue.js 相关教程参考这里。

Mozilla CSS Grid 教程：本系列是由 Mozilla 出品的通俗易懂的 CSS Grid 教程，还介绍了如何使用 Firefox 最新版本的调试工具来便捷调试基于 CSS Grid 的布局。 本文首先分享了 CSS Grid 的基础术语概念，然后介绍了简单的 Grid 的构建与 Firefox DevTools 的使用，接下来详细介绍了 fr 尺寸、混合尺寸等不同的尺寸设置，最后还给出了标准的网页布局的例子。更多 CSS 相关教程参考这里。

工程实践

立足实践，提示实际水平

React, 内联函数与性能：很多关于 React 性能优化的文章都会谈及内联函数，其也是常见的被诟病为拖慢性能表现的元凶之一；不过本文却是打破砂锅问到底，论证了内联函数并不一定就会拖慢性能，过度的性能优化反而会有损于应用性能。作者从自己的实践谈起，首先讨论了内联函数可能拖慢性能的两个原因：内存分配与垃圾回收、shouldComponentUpdate；作者认为使用内联函数反而能够减少组件初始化时的耗时，而 shouldComponentUpdate 或者 PureComponent 也并非所有的情况都能起作用，我们也是应该因时而异。更多 React 相关资料查看这里。

Angular 性能优化建议：Oasis Digital 一直在使用 Angular 来构建大型软件项目，而在多年的实践中，特别是在构建性能敏感的应用过程中，工程师们总结了很多的经验教训；本文即是他们分享的三个最为重要的性能优化相关的建议。本文首先讨论了对于运行时性能的定义与指标构成，然后分析了如何提升事件的响应速度、如何最小化变化检测的范围、如何最小化 DOM 操作这三个优化策略。更多 Angular 相关资料查看这里。

响应式图片基础：图片是现代网站的重要组成，其能够增强网页的表现力与感染力；不过用户往往不愿意过久地等待图片加载，因此选择合适的图片尺寸能够大大提升用户体验。作者在本文中阐释了响应式图片的基本概念以及常见的设置响应式图片的方法；本文首先讨论了如何选择合适的方式来设置响应式图片、如何选择合适的分割点、像素与百分比的对比、浏览器中 size 属性的作用、利用 CSS 使得图片更加流畅等待。更多性能优化相关资料参考这里。

编写可读的 Selenium 与 Node.js 自动化测试用例：现在很多的介绍如何利用 Node.js 与 Selenium 进行自动化测试的文章都专注于如何搭建测试环境与编写基础的测试用例， 而本文则专注于分享优雅的代码片与一些最佳实践的技巧，从而提升整体测试用例的可读性与可维护性。本文主要讨论了粗暴的使用 sleep 函数的不足，并且给出了利用 Promise 以等待元素出现、等待元素可见、等待元素可交互等实践技巧；更多 Web 自动化测试相关教程参考这里。

Quri 的 GraphQL 实践：GraphQL 秉持着 Schema First 的理念，本文则是 Quri 两年以来 GraphQL 实践的分享以及对于这个原则的理解与执行。 本文主要讨论了利用 graphql-faker 来根据 Schema 构建测试数据、如何在日常的业务开发中贯彻 Schema First 的理念等内容；更多 GraphQL 相关教程参考这里。

奇妙的 Mobx State Tree：本文是 MobX 的作者 Michel Weststrate 对于 Mobx State Tree 的介绍；现在已经有很多文章在讨论 MobX 与 Redux 各自的优劣以及使用场景，本文也是从对比 Redux 与 MobX 入手，首先介绍了 MobX 的不足。MobX 只是中立、抽象的函数响应式数据流工具，并非完整的应用状态管理工具；而 MST 则在保留了响应式对象的易操作性的同时，将全局状态存放在不可变的、结构化的、共享的状态树中。开发者可以使用传统的面向对象的方式，直接修改某个实例的属性，MST 会自动地在后台创建状态快照与不可变的状态树；标准的 MST 模型由 model、views、actions 等几个部分，同时支持自定义中间件。更多 MobX 相关教程参考这里。

TypeScript 在 Lyft 的应用实践：可能很多人在初次接触类型系统的时候，都会疑问于为什么需要引入额外的类型；但是相信不过多久，他们已经无法离开类型系统了，本文则是 Lyft 使用 TypeScript 进行静态类型检测的实践。本文依次讨论了没有静态类型系统时常见的错误与引入类型系统之后带来的生产力的提升，然后本文认真讨论了 TypeScript 与 FlowType 各自的优劣，最后介绍了 TypeScript 的学习路径与 Lyft 基于 TypeScript 开源的一些项目； 更多 TypeScript 相关教程参考这里。

深度阅读

深度思考，升华开发智慧

Vue.js 现状盘点与未来规划：本文不是一篇教程，而是以时间线叙述的方式来介绍 Vue.js 的创建与发展，Vue.js 技术社区的现状以及未来 3.0 版本的规划。本文首先介绍了 Vue.js 的创建初衷与设计理念，然后介绍了 Vue.js 目前的各种资源：学习资料、周报、论坛、社区等等，还有 Vue.js 相关的 Weex 这样的原生扩展。最后本文还讨论了 2.0 版本中对于测试套件、TypeScript 支持、ESLint 优化等提升，以及 3.0 版本中对核心的响应式机制、对于旧版本浏览器的支持等规划。更多 Vue.js 相关资料查看这里。

V8 引擎中针对 ES2015 Proxy 进行的优化：Proxy 是 ES2015 的重要组成部分，其也被逐步地应用到众多的项目或者库中，譬如 jsdom、Comlink RPC 等；近日来 V8 团队也在致力于提升 Proxy 在 V8 中的性能表现，本文主要分享了 V8 中 Proxy 的性能提升范式，也有助于开发者了解 Proxy 的实现原理。本文首先分析了老版本的 Proxy 实现原理与工作机制，然后讨论了优化的解决方案以及现实环境下的性能对比；更多 V8 相关资料查看这里。

图片优化中的必知必会：截止 2017 年，图片仍然是网络带宽最大的占用者，参考 HTTP Archive 的统计数据，所有抓取的网页数据中有超过 60% 的流量是 JPEG、PNG 以及 GIF 等图片资源；Addy Osmani 则在本书中非常详细地阐述了图片压缩中必知必会的知识。本书首先抛出了观点：所有的图片都应该进行合适地压缩，所有的压缩都应当是自动化地进行, 接下来本书依次介绍了如何判断图片是否需要压缩、如何选择合适的图片格式、JPEG 的格式介绍与压缩技巧、WebP 介绍与浏览器的支持情况、SVG 压缩技巧、避免重复压缩、雪碧图、缓存、预加载等等内容；更多性能优化相关资料参考这里。

大型代码库迁移到 React 16 过程中学到的知识：在 Facebook 正式发布了 React 16.0 版本之后，新的 Fiber 渲染流带来了更多的性能提升；本文则是来自 Discord 的工程师分享的它们将原有应用升级到 React 16.0 版本的经验。本文首先分析了新版本中带来的譬如 ErrorBoundary 等一系列的特性变化，分享了 Discord 内部关于是否有必要升级的讨论；然后介绍了利用 jscodeshift 来修正 PropTypes、如何安全移除原有内部 API 的使用、如何升级依赖，以及 React Native 中需要进行的升级工作等内容。更多 React 相关资料查看这里。

ExtJS：从崛起到沉寂：对于许多的开发者而言，ExtJS 仍是非常好的开发企业级应用的平台；而本文作者从 2006 年起到 2015 年一直活跃在 Sencha 社区中，为社区的发展贡献着自己的力量。而随着 Sencha 被 IDERA 收购，作者有感而发编写此文以盘点下 ExtJS 走过的风雨十年。本文从 2005 年开始谈起，彼时 SPA 的潮流逐渐兴起，Yahoo 发布的 YUI 框架也成为了一时之选；最初的时候 ExtJS 还是 YUI-ext，算是对于 YUI 的实验性扩充，后来随着组件库复杂度的增加，也正式独立成为了 ExtJS（Extensible JavaScript）。2010 年左右，Sencha 正式成立，吸纳了 jQTouch、Raphel JS 以及许多的开源技术，形成了 Sencha Touch 等更加完善的社区；此时 ExtJS 4.0 也带来了极大的革新，不过其性能问题也令社区出现了分化。最后的 ExtJS 6.0 则将 ExtJS 与 Sencha Touch 中优秀的部分整合起来，但是随着 React.js 的蓬勃发展，ExtJS 的社区活跃度也在不断下降，其未来也是犹未可知。

Web 应用的重用策略：随着产品线的扩充与产品复杂度的增加，我们不可避免地需要在应用中集成来自其他团队或者开发组的模块，乃至于完整的应用；本文则是介绍了三种不同的重用集成策略：利用 iframe 直接引入界面、重用整个 APP 组件、重用 UI 组件。 iframe 方式最为简单直接，能够较好地进行应用隔离，在整个技术栈不同、不需要重复认证、没有数据交互的情况下是不错的选择。而 APP 组件方式则在技术栈融合、动态尺寸、少量交互的情况下使用；最后的 UI 组件方式则是最为优雅的方式，但是也需要团队统一的技术栈与编程规范。更多 Web 应用架构相关内容参考这里

面试中所需要的技术与非技术指南：本文是对于程序员面试中常见的算法与前端领域的知识进行盘点，希望能帮助程序员更好地进行面试。本文依次讨论了如何准备技术面试、按照主题分类的算法技巧与最佳实践的问题、常见的前端面试问题与答案、顶级技术公司常见的面试形式、不同公司的行为性问题、面试结束时候你可以反问的优秀的问题。

CSS font-display: Web 中字体渲染的未来：字体是 Web 开发中不可分割的重要部分，当某个 Web Font 不存在于用户设备时，浏览器 需要开始下载对应的字体包；而在下载结束之前，浏览器需要决定如何处理相关文本的显示方式，我们即需要选择合适的方式以尽可能少地影响用户阅读体验并且提高性能。本文则是详细介绍了 font-display 属性的使用方法，其在浏览器中处理的时间线划分以及不同设置与不同加载结果下浏览器的处理策略。更多 CSS 相关教程参考这里。

开源项目

乐于分享，共推前端发展

Vuera: Vuera 是同时兼容 React 与 Vue.js 组件的集成框架，它允许开发者在 React 中引入 Vue.js 组件，或者在 Vue.js 中引入 React 组件。Vuera 算是非常不错的实验性尝试，不过其具体的性能表现如何还有待观察。

Nest: Nest 是基于 TypeScript 的用于构建高性能、可扩展的 Node.js 应用的框架，其同时整合了面向对象编程 OOP 与函数式编程 FP 以及函数响应式编程 FRP 优秀理念。Nest 提供了类似于 Angular、Express 这样著名框架的接口，内置了 WebSocket、响应式微服务支持、管道等多种功能特性。

Sentineljs: SentinelJS 是轻量级的，允许通过 CSS 选择器设置监听目标，并且动态监测新 DOM 节点创建的库；它能够在监控到新的 DOM 节点创建完毕之后自动调用回调函数。SentinelJS 相较于其他解决方案，使用了动态定义的 CSS Animation 规则中的 animationstart 事件来监听某个元素是否存在，能够获得比 Mutation Observer 更好地性能表现。

billboard.js: billboard.js 是基于 D3.js V4 版本的轻量级、可复用的数据可视化组件库；billboard.js 提供了常见的线型图、饼图、点图等等图表类型。

Dexie.js：Dexie.js 是对于浏览器中标准数据库 IndexedDB 的封装，其提供了类似于服务端数据库风格的接口；同时进行了健壮的异常处理，保证了可扩展性与可用性，提供了变化追踪与区间查询等功能，从而简化了关键字搜索、逻辑运算等操作。

Cherow：Cherow 是基于标准 ECMAScript 语法编写的快速 ECMAScript 语法解析器；它遵照了标准的 ECMAScript 2018 语言规范，能够安全地用于生产环节中。Cherow 支持 Stage 3 提案，支持 JSX，默认跳过工作注释结点并且能够可选地追踪语法结点位置。

wretch: wretch 是对于 fetch 的轻量级封装，提供了直观透明的语法。wretch 主要是为了弥补 fetch 底层接口使用繁复的不足，提供了 notFound、unauthorized、error、catch 这些常用的返回值响应函数的封装。

巅峰人生

欲修炼成架构师，必先……：本文是互联网老兵陈美珍（Frank）分享的其对于架构师的看法与理解，以及成为架构师所需要各方面能力的讨论。作者首先分析了什么是架构师以及架构师在团队中的定位，然后讨论了架构师与传统领域专家的异同，最后分享了其认为架构师应该具备的各项能力，从基础的逻辑、抽象、想象，到空杯、好奇、实践的心态，以及技术架构与组织架构等待。

前端之巅

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