前端每周清单第 33 期：React 16 发布与特性介绍，Expo AR 教程，ExtJS 从崛起到沉寂

作者：王下邀月熊 编辑：徐川

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

新闻热点

国内国外，前端最新动态

• 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 的共享功能。

开发教程

步步为营，掌握基础技能

• 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 相关教程参考这里。

工程实践

立足实践，提示实际水平

• 编写可读的 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 相关教程参考这里。

深度阅读

深度思考，升华开发智慧

• 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 相关教程参考这里。

开源项目

乐于分享，共推前端发展

• 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 这些常用的返回值响应函数的封装。

巅峰人生

• 那个疯狂岁月里，苹果公司的工程师文化：一款划时代产品的诞生需要经历多少磨难与煎熬，需要多少人在背后默默地付出？这中间发生的一切都是最终用户难以想象的。《硅谷革命》的作者 Andy Hertzfeld 将开发初代 Mac 的故事搬到了 folklore.org 网站上，后又将它们集结成书出版，希望发生在 80 年代早期的这场影响深远的技术革命能够成为旷世传奇。作者在序言里写道：“我认为我们当年的理想并未完全实现，要实现 Macintosh 的梦想仍然有待努力，或许真正的传奇尚未降临”。

前端之巅

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