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