利用NLP分析三大前端框架的GitHub Issue

译者按：各大框架既有优点也有不足，且用且珍惜！

• 原文: We analyzed the GitHub Issues from the most popular Front-End frameworks, here’s what we found
• 译者:Fundebug

为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。

小编推荐：Fundebug专注于JavaScript、微信小程序、微信小游戏，Node.js和 Java 线上bug实时监控。真的是一个很好用的bug监控服务，众多大佬公司都在使用。

作为开发者，我们习惯于加入向GitHub这样的社区来寻求技术上的帮助。因此，我们不由地好奇对于最流行的前端框架，开发者们到底问了什么样的问题和发现了什么样的bug。

为了回答这些问题，我们使用无监督语义理解的AI技术来分析GitHub上的issue标题。我们的目的是为了发现在这些开源项目的issue中是否有着特定的模式或者相关的概念。

我们上传了 4份数据 到我们的 Lang.ai 系统。这4份数据分别对应Angular、React、Vue和将它们三者综合起来。

整个数据处理时间花了不到一个小时，最终输出一个可视化的意图(intent)集合，并且通过语义聚合来表示它们之间的关系。

一个intent是指一组词汇表达了一个语义。在当前场景下，表示一组issue标题。

返回的结果如下：

接下来我们深入分析每一个数据集得到的结果。

Angular, React and Vue

分析结果

1. 你应当检查每一个null值

这些issue都包含了“Uncaught TypeError”的字段。这是我们发现的第一个，而且在JavaScript社区是非常常见的一个issue。我们可以看到很多都是关于这样的报错，就像： Uncaught TypeError: Cannot read property 'name' of null. 我想应该考虑使用TypeScript。

2. 输入的处理比想象中难

对于如何处理表单的问题我们在所有框架的issue中都有看到。它们要么和验证(validation)相关，或则在不该触发的时候触发事件，等等。事实上，每一个框架都有各自对于表单的工作方式： Angular , React , and Vue .

3. 都喜欢提新功能需求

在Angular的项目中快速查找 feature request ，会返回将近5000个结果。要知道，总共才15k的issues。在React中占比约20%，Vue中约10%。

4. 导入模块也不简单

有上百个issue都是这样开头的： Cannot find module. 。你知道如果找不到https模块，那么会出问题的： you are not able to find the https module .

5. 当修改了NODE_ENV之后并未达到预期的效果

这是那种在我的电脑上没问题的情况。我们已经看到很多issue和环境（开发/生产）相关。还有很多也提到了关于 strict 模式的，虽然和Node环境无关，不过在语义上相近。

分析要点:

1. 提到了很多关于文档的问题

“ AIO” 是Angular.io的缩写，甚至有一个专门的 面板 来整理这样的问题。大约有2.3K的issues和它相关。

2. 需求提交占了主要比重

一个从0开始开发了很多年的项目，特别是还包含了Angular 1的issue。

3. 路由也可能很复杂

With the Child Route intent we are getting issues like “Angular 2 child routes lost data”. There are other questions like “How to update parent’s variable from child’s component?” . Routing will give you some headaches, even with that kind of cross-browser issues (spoiler alert: turns out it was the OP fault, not the browser).

我们的结果数据中有 Child Route 这样的字段，与之对应的issues，像“Angular 2 child routes lost data”。还有很多类似的问题，比如： “How to update parent’s variable from child’s component?” 。路由有时候很头疼，甚至还会有 跨浏览器兼容问题 。最终发现这个是操作问题，而不是浏览器问题。

4. 变化侦测机制仍然有问题

Angular的变化侦测机制是整个框架的核心，尽管已经比Angular 1好了很多，但是依然会触发很多问题。

分析结果

1. 在React中处理输入有多种方式

我们之前已经说过处理输入是一个比想象中难的问题。在开发React应用的时候，这是一个主要的头痛点。也许应该看看这个 think in React? .

2. 全都和setState()有关

这个很容易解释：因为你要更新UI的主要方法，特别是处理事件或者服务器请求的时候。文档已经给出了相应的指示： 关于 pitfalls 和 anti-patterns 的 warns ， 但是好像只有很少一部分开发者真的阅读了这些资料。

3. 服务器渲染也有相应的成本

你可以读一读这篇 博客 , 服务端渲染的React应用可以提供一些好处，比如性能和SEO。但是这些好处会导致一些资源耗费：比如整个应用的复杂性。比如展示一张图片都需要 额外的工作 。

4. 我们需要更多的属性(attribute)

我们想要更多的属性，比如添加对SVG元素的支持，甚至 iframe . 还有多少人在使用iframes?

分析结果:

1. 再说一遍，处理表单的问题

尽管有很清晰并且 详细的文档 ，但是好像使用Vue和React的开发者总是在处理输入上不愉快。也许他们应该看看这个： 不同框架对比 。

2. 小心对待计算出来的属性(Computed Properties)

可以在我们的分析结果中看出，issues中提到和cache,setter,和dependency有关的问题。

3. <Select> 元素非常微妙

虽然我们的分析结果中有很多关于输入的，但是关于 <Select> 元素的issues有很多。比如这样的： doesn’t select what was supposed to select .

4. 关于属性传递

我们通过属性值来传递数据，但是好像也会有一些问题。

我们是如何做到的？

获取数据

第一步是获取数据，幸运的是GitHub提供API和包供我们使用。我们使用了Node.js模块来处理 @octokit/rest .

要注意GitHub把所有的pull requests都看作issues，所以要做点区分。我们只是去分析真的issues。然后我们获取每个issues的标题并保存下来。

最终的数据集包含了 27.4k issue titles 。它们来自: Angular (15k) (不是 AngularJS ), Vue (6.4k)和 React (6k)。

const Promise = require('bluebird')
const fs = require('fs')
const octokit = require('@octokit/rest')()

octokit.authenticate({
  type: 'basic',
  username: 'USER',
  password: 'PASS',
})

function handleGithubResponse(response, filename) {
  const data = response.data
  data.filter(
    issue => !issue.pull_request
  ).forEach(
    issue => fs.appendFileSync(`${filename}`, `${issue.title}\n`)
  )
}

async function getIssueTitles({owner, repo, filename}) {
  let response = await octokit.issues.getForRepo({
    owner, repo, per_page: 100, state: 'all'
  })
  handleGithubResponse(response, filename)
  while (octokit.hasNextPage(response)) {
    response = await octokit.getNextPage(response)
    handleGithubResponse(response, filename)
  }
}

const repos = [
  {
    owner: 'facebook',
    repo: 'react',
    filename: 'react-issues.txt',
  }, {
    owner: 'vuejs',
    repo: 'vue',
    filename: 'vue-issues.txt',
  }, {
    owner: 'angular',
    repo: 'angular',
    filename: 'angular-issues.txt',
  },
]

Promise.mapSeries(repos, getIssueTitles)

分析数据

当我们有了这些数据，在 Lang.ai 上创建项目: 包含所有的issues。分析结果：针对三大框架的issue一起分析得出了145个意图(intents)，分别分析Angular 153个，React 86个，Vue 78个。

下一步

我们也可以将issues的评论和对话一起来分析，这将是另一个有趣的实验，不在本文的描述范围内。我们相信通过自然语言处理可以帮助开发者打造更好的产品。比如帮助开发者打造和改进聊天机器人，内容优化，文本分析等等。

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。

自从2016年双十一正式上线，Fundebug累计处理了5亿+错误事件，得到了众多知名用户的认可。

版权声明:
转载时请注明作者<b><a href="https://fundebug.com" target="_blank" title="Fundebug">Fundebug</a></b>以及本文地址：
<b><a href="https://blog.fundebug.com/2018/08/02/analyzed-github-issues-result/" target="_blank" title="利用NLP分析三大前端框架的GitHub Issue">https://blog.fundebug.com/2018/08/02/analyzed-github-issues-result/</a></b>