前端每周清单第39期: OpenAI与gRPC, Gitlab的Vue年度总结，GraphQL技术栈漫游

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

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

新闻热点

国内国外，前端最新动态

• React 16.1.0发布:本周React 16.1.0版本发布，自该版本开始React不再发布到Bower，而是采用unpkg来镜像存放UMD构建版本；那些依赖于Bower进行依赖管理的开发者只能选择使用老的版本。此外该版本中还修复了UMD构建中，异常全局变量的错误；并且为实验性的React Call Return模块添加了父子通信的接口。

• Node.js 9.1.0发布:本周Node.js 9.1.0版本发布，整合了一系列的提交；值得注意的变化包括NODE_OPTIONS环境变量开始支持 –stack-trace-limit选项，OpenSSL更新到了1.0.2m，对于http模块开始支持103 Early Hints状态码，并且修复了connect事件处理器溢出的漏洞。

开发教程

步步为营，掌握基础技能

• OpenAPI与gRPC横向比较: OpenAPI(原Swagger)是构建网络API的两种不同方式，不过如果你了解过这两种技术方案，你会发现二者 也有很多的共通之处，本文即是对OpenAPI与gRPC进行了详细的阐述与对比。OpenAPI是用于描述REST API的语言，其提供了规范的API描述格式，默认基于HTTP进行数据交互并且使用JSON格式来表示数据；这种规范性也就使得基于Schema的代码生成更容易实现。而gRPC则源自Google，同样提供了接口描述格式，其默认使用HTTP/2进行数据交互，并且使用Protocol Buffer作为数据格式，其相较于OpenAPI会更为严格。更多API相关资料参考这里。

• HTML实战系列教程:本系列作者曾写过多篇HTML教程，为了更好地帮助初学者掌握HTML相关知识，作者在将之前的知识总结为了本系列中的数篇文章。本系列教程包含了HTML的基础语法、HTML文档结构、HTML标签基础类型、链接，图片与文档路径、HTML元素的封装、HTML中的列表与导航等内容，如果希望有更深入的了解还可以查看文档中推荐阅读的内容；更多Web基础教程查看这里。

• Angular 5特性概述:Angular 5(代号为Pentagonal-Donut)近日正式发布，其不仅带来了新的功能特性，还包含了很多致力于提升Angular应用 体积与运行性能的内部改变；本文即是对其特性进行详细介绍。性能方面的提升包括了Angular CLI v1.5中默认启用优化器、Angular编译器优化、不再需要intl与Reflect Polyfill等，功能特性方面的 提升包括了updateOn表单域、Router Events、Service Worker等；更多Angular相关资料参考这里。

• 渗透测试之子域名枚举详解:掌握常见的网络安全与渗透测试相关知识，也是前端开发者的 进阶要求之一；本文即是介绍渗透测试中的子域名枚举的实战技巧。所谓的子域名枚举，顾名思义，即是在给定某个域名的情况下获取到其所有的关联子域名，从而为下一步的渗透测试提供信息支撑；本文主要介绍了通过Google等搜索引擎、通过第三方DNS数据库、通过证书服务器、通过字典爆破、通过排列置换等等方式来枚举子域名。更多渗透测试相关资料参考这里。

工程实践

立足实践，提示实际水平

• 基于Realm的Electron高性能跨进程数据交互: Realm在iOS、Android、React Native等原生应用或者混合应用开发中提供了，便捷强大的数据存储解决方案，而现在Realm也针对Electron中的跨进程(主进程与渲染进程)数据交互给出了自己的方案。与Slack选择的electron-redux这种Redux模式的跨进程数据交互不同的是，Realm使用了Multi-Version Concurrency Control架构，来保证多线程的并发控制。这种架构相较于electron-redux能够带来接近原生的性能表现，此外Realm还提供了响应式的能力，允许开发者监听某个对象并且在对象发生变化时进行响应式操作；更多Electron相关资料参考这里。

• Gitlab使用Vue.js的年度总结:时光易逝，岁月如梭，不觉之间Gitlab已经使用了一年多的Vue.js，其对于Vue.js应用开发也有了更深刻的认识，本文即是Gitlab对于这一年的使用感悟的分享。就像Scala，Vue.js并非一锤子买卖，当我们正确使用它时，它能够给予优秀地体验反馈；这一年来Gitlab也遇到了，并且尝试去解决了很多的问题。作者在接下来的章节中讨论了使用VueX进行状态管理、编写高质量的代码、如何提升应用性能等内容；更多Vue.js相关资料参考这里。

• BBC是如何进行网页发布的:本文是BBC在线技术委员会的首席 架构师Neil Craig分享的，BBC是如何将它们大部分的网页发布到因特网上。BBC服务于全世界超过230个国家和地区，为了保证全世界用户的使用体验，BBC在其发布流程上采用了一系列的优化策略。其对于资源的请求总量与并发请求数进行了分析，并且将下属的栏目划分到了不同的目录下以进行不同的峰值应对；对 于不同国家和地区的用户，负载均衡会将其转发到不同的CDN或者应用服务器中，并且对于不同类型的资源也进行了区分对待。更多Web工程实践相关资料参考这里。

• 阿里云11·11：DataV的数据可视化之道:从2012年起，阿里每年的双11大促都会推出一个大屏，以多种生动的展示方式实时地显示交易情况。实时数据大屏，它的特点是各种大：屏幕大、数据量大、展示信息量大，可以说是数据可视化的圣杯。作为双11数据大屏的幕后功臣，DataV在经历数个大型项目后几乎试遍技术沉淀的所有路径：开源代码、产品化、打包解决方案、平台化……应用场景也从双11电商作战，扩展到智慧城市、智慧交通等诸多领域。他们一路走来的历程和思索，值得后来者借鉴参考。更多数据可视化资料参考这里。

深度阅读

深度思考，升华开发智慧

• React Native与原生应用的量化比较:现在，从事移动应用开发的程序员可能都会听过React Native，这个由Facebook开源的优秀的跨平台开发解决方案；不过很多公司在进行技术选型时可能还较难在Swift原生开发与React Native做恰当的抉择。本文即是从理论到实践，多方位、立体地、量化地对React Native与Swift原生应用进行比较。作者分别使用Swift与React Native实现了一个简单的应用，包含了常见的登录、列表、地图等功能，而后又分别针对各个页面，从CPU、GPU、内存使用等多个角度进行了量化比较。最后作者又从各方面比较了React Native的优势与不足；更多React Native相关资料参考这里。

• GraphQL技术栈漫游: GraphQL开源已两年有余，其相关的生态圈也呈现指数级的增长，成百上千的公司在生产环境中使用了GraphQL；本文即是对于GraphQL Summit 2017中的演讲的总结。本文首先概述了GraphQL的特别之处，然后分析了GraphQL开发中缓存、追踪、模式拼接等方面地实践技巧与相关开源项目；更多GraphQL相关资料参考这里。

• 揭秘V8 Web工具性能评测: JavaScript的性能表现，一直是V8团队关注的核心问题之一；本文中V8团队讨论了它们工作中用于定位与修复性能瓶颈的，JavaScript Web工具性能评测方法。所谓的Web工具性能评测套装，源自对于日常开发中常用的基于Node.js的工具使用场景的归纳，其着重关注JavaScript核心性能，忽略Node.js相关的IO或者其他额外的交互。其典型的测试用例包括了使用es2015的Babel转化器性能、对于Lodash等常见输入源的Babylon的性能、Webpack使用的acorn解释器性能、基于TypeScript-Angular项目的TypeScript编辑器性能等。更多V8相关资料参考这里。

• 为什么我还在使用jQuery:现代Web开发中，jQuery一直是传统开发的代名词，开发者喜欢谈论TypeScript、ECMAScript 2015+、React、Vue.js等等时髦的名词；作者则是在本文中讨论了为何他现在还是会继续使用着jQuery。很多对于jQuery的诟病在于其增加了网站的体积，不过目前jQuery仅有27KB，并且在通过CDN方式分发并不会增加站点压力；而jQuery的辅助方法还是能够帮我们提升代码的编写效率与性能。接下来作者还讨论了如何避免错误的代码、编写可扩展的jQuery代码、如何将jQuery集成到其他框架、在什么情况下要避免使用jQuery等内容。

开源项目

乐于分享，共推前端发展

• cube-ui: cube-ui是由滴滴开源的，基于Vue.js实现的精致移动端组件库，由滴滴内部组件库精简提炼而来，历经考验，并且每个组件都有充分单元测试，为后续集成提供保障。它以迅速响应、动画流畅、接近原生为目标，在交互体验方面追求极致；遵循统一的设计交互标准，高度还原设计效果；接口标准化，统一规范使用方式，开发更加简单高效，并且支持按需引入和后编译，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。

• js2flowchart: js2flowchart能够将JavaScript代码表示为SVG格式的流程图，能够同时在浏览器于Node.js环境中执行；js2flowchart允许我们随时根据代码的变化生成关联的逻辑流程图，从而方便展现与陈述代码逻辑。

• Chimee: Chimee是组件化的H5播放器框架，支持mp4、m3u8、flv等多种格式，由奇舞团视频云前端组研发。它帮我们解决大部分的兼容性问题，能够解决包括全屏、自动播放、内联播放、直播解码等常见视频需求；通过组件化开发，能满足业务方快速迭代、灰度发布等要求，让开发者能够轻松快捷地完成视频场景的开发。

• NBA Go: NBA Go是面向NBA粉丝的命令行工具，能够在命令行中查看比赛安排、比赛结果、选手信息等内容，方便程序员们随时掌握比赛信息。

巅峰人生

• 谷歌大脑负责人Jeff Dean：让机器学会学习，专用硬件很有前景:提到谷歌大脑，一定要提到它背后的“大脑”：Jeff Dean，他于1999年加入Google，带领团队完成了一系列令人瞩目的工作，如支持谷歌运行的超大规模计算框架MapReduce，以及你正在使用的TensorFlow等等。作为谷歌大脑的负责人，他仍在进行一系列开创性的研究工作。近日，Jeff Dean接受了Gigaom的访问，谈及了这些工作和未来的主攻方向，也分享了他个人对于通用人工智能、机器学习以及人工智能应用的一些见解。

前端之巅

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