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

感谢徐川对本文的审校。

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