2019 前端框架对比及评测

栏目: JavaScript · 发布时间: 5年前

内容简介:撰写本文时,本文不考虑框架的流行程度,RealWorld 仓库中列出的前端框架皆纳入对比范围。应用显示内容、可以使用需要花多久?

撰写本文时, RealWorld 示例应用 仓库共包括 18 个 Conduit (Medium.com 克隆应用)实现。

本文不考虑框架的流行程度,RealWorld 仓库中列出的前端框架皆纳入对比范围。

2019 前端框架对比及评测

测度

性能

应用显示内容、可以使用需要花多久?

尺寸

应用有多大?我们只比较编译后的 JavaScript 文件大小。所有应用使用同样的 CSS 样式文件,CSS 文件加载自 CDN。所有应用使用的 HTML 也是一样的。这些框架都支持编译或转换为 JavaScript,所以我们仅仅测量 JavaScript 文件大小。

代码行数

根据规范创建 RealWorld 应用需要多少行代码?公平地说,某些实现的功能要略微多一点,但这应该没有什么显著的影响。我们仅仅测量每个应用的 src/ 目录。

性能

我们将使用 Chrome 的Lighthouse Audit 测试性能。Lighthouse 返回 0 至 100 间的评分。0 为最低分。

配置

所有测试均使用如下配置:

2019 前端框架对比及评测

性能评分基于以下测度得出:

  • First Contentful Paint (页面中内容元素首次渲染时间)
  • First Meaningful Paint (页面中有意义的内容元素首次渲染时间)
  • Speed Index (页面加载过程视觉上的变化速度)
  • First CPU Idle (到 CPU 首次空闲的时间)
  • Time to Interactive (到页面可交互的时间)
  • Estimated Input Latency (预计输入延迟)

详见Lighthouse 评分指南。

TL;DR

首次渲染越快,到可以进行操作的时间越短,应用的用户体验就越好。

2019 前端框架对比及评测

注意:我们跳过了 PureScript,因为它没有 Demo 应用。

结论

大部分应用的评分超过 90。所以,用户大概感觉不到这些框架的性能有什么大差别。

尺寸

传输尺寸根据 Chrome 开发者 工具 的网络标签页统计,包括服务器送达的响应头和响应体(经过 GZIP 压缩)。

这取决于框架的尺寸以及额外依赖的尺寸,还有构建工具精简未使用代码的效率。

TL;DR

文件越小,下载越快,需要解析的内容越少。(下图中的单位为 KB。)

2019 前端框架对比及评测

结论

这方面有不少惊人的结果。Svelte,魔法消失 UI 框架,无愧其名。Stencil 是一个比较新的框架,表现优异。这两个框架相对而言都比较新,将尺寸推向了新的极限。

代码行数

我们使用 cloc 计算每个仓库的 src 目录的代码行数,不计空行和注释。为什么要比较代码行数?这是因为:

如果说调试是移除软件 bug 的过程,那么编程一定是植入 bug 的过程。

Edsger Dijkstra

TL;DR

下面的图表显示了给定的库/框架/语言有多凝练。根据规范实现几乎完全一样的应用(某些应用功能略多一点)需要多少行代码。

2019 前端框架对比及评测

注意:我们跳过了 Imba,因为 cloc 无法处理 .imba 文件。Elm 开发者写代码喜欢分行,所以行数较多(至少别人是这么告诉我的)。Angular+ngrx 只计算了 libs 目录中的 .ts.html 文件,如果你认为这么算不对,请告诉我正确的数字及其计算方法。本文刚发表时 Hyperapp 的代码行数计算有误,感谢Mateusz Kwasniewski 指出正确的代码行数。

结论

就代码行数而言,使用 ClojureScript 的 re-frame 给出了炸裂:boom:的结果。Clojure 以异常高的表达力而闻名。如果你在乎代码行数,应该了解下 ClojureScript、AppRun、Svelte。

总结

别忘了这并不是一个精确公平的对比。有些实现分离了代码,有些没有。有些部署在 GitHub 上,有些部署在 Now 上,有些部署在 Netlify 上。如果你仍然要问哪个最好?我只能说,最好的框架是最符合你需求的那个。

Q:偏爱强类型检查? A: 了解下 Elm、PureScript、TypeScript —— Angular、AppRun、Dojo.

Q:想要一个非常轻量的框架? A: 了解下 Svelte、Stencil、AppRun.

Q:想维护尽可能少的代码? A: 了解下 re-frame(使用 ClojureScript)、AppRun、Svelte.

Q:想要学点新的? A: 选择你不了解的框架!

FAQ

1. 为什么不对比框架 X、Y、Z?

因为 RealWorld 仓库 中的实现不完整。考虑下贡献代码!用你最喜欢的库/框架实现一下,我们会在下次对比中包含它们!

2. 为什么称它为 RealWorld?

因为它的功能要比 To-Do 应用复杂。RealWorld 并不意味着我们会对比薪资水平、维护水平、生产率、学习曲线等要素,有其他调研回答了这些问题中的一部分。RealWorld 的意思是这个应用会像真实世界项目一样,连接一个服务器,认证用户,允许用户增删改查。

3. 你为什么没纳入我最喜欢的框架?

请回过头去看看上文的第一问。不过我这里还是想强调下:因为 RealWorld 仓库 中的实现不完整。这些实现是社区共同努力的结果,而非我一人所为。如果你想在对比中看到自己最喜欢的框架,考虑下贡献代码。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

黑客大曝光

黑客大曝光

Joel Scambray、Vincent Liu、Caleb Sima / 姚军 / 机械工业出版社华章公司 / 2011-10 / 65.00元

在网络技术和电子商务飞速发展的今天,Web应用安全面临着前所未有的挑战。所有安全技术人员有必要掌握当今黑客们的武器和思维过程,保护Web应用免遭恶意攻击。本书由美国公认的安全专家和精神领袖打造,对上一版做了完全的更新,覆盖新的网络渗透方法和对策,介绍如何增强验证和授权、弥补Firefox和IE中的漏洞、加强对注入攻击的防御以及加固Web 2.0安全,还介绍了如何将安全技术整合在Web开发以及更广泛......一起来看看 《黑客大曝光》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具