在同一基准下对前端框架进行比较(2019年更新)

栏目: 编程语言 · Clojure · 发布时间: 5年前

内容简介:本文首发微信公众号:前端先锋欢迎关注,每天都给你推送新鲜的前端技术文章

翻译:疯狂的技术宅

https://medium.freecodecamp.o...

本文首发微信公众号:前端先锋

欢迎关注,每天都给你推送新鲜的前端技术文章

在同一基准下对前端框架进行比较(2019年更新)

这是我们第三次用 Real World example apps 对前端框架进行比较。 RealWorld example apps 为我们提供:

RealWorld App

这不仅仅是“todo”。通常“todo”并没有传达出在构建 真正的 程序时所需的足够的知识和视角,。

标准化

一个符合某些规则的项目。提供后端API、静态标记、样式和规范。

由专家撰写或审核

一个一致的、真正的项目,在理想情况下,由相关技术的专家建立或审查。

我们比较哪些库和框架?

截至撰稿时为止,在 RealWorld example app 的 repo 已经中有18个 库或框架的实现。

是否有大量的拥趸者并不重要。唯一要求是它是否出现在了 RealWorld 的代码仓库页面上。

在同一基准下对前端框架进行比较(2019年更新)

我们关注那些指标?

表现

此程序需要多长时间才能显示内容并变得可用?

大小

应用有多大?我们只会比较已编译的 JavaScript 文件的大小。 CSS 对所有变体都是通用的,并从 CDN(内容分发网络)下载。 HTML 也适用于所有变体。所有技术都编译或转换为 JavaScript,因此我们只比较这种文件的大小。

代码行数

作者根据规范创建 RealWorld app 需要多少行代码?公平地说,一些程序过于花里胡哨,但它不应该产生重大影响。我们量化的唯一文件夹是每个程序中的 src/

度量标准 #1:性能

我们将通过检查 Chrome 附带的 Lighthouse Audit 的效果得分。 Lighthouse 返回的性能分数在 0 到 100 之间,0 是低分。

审核设置

在同一基准下对前端框架进行比较(2019年更新)

测试用的所有 Lighthouse Audit 设置

效果是基于以下指标的综合得分

  • 第一个有内容的绘制
  • 第一个有意义的绘制
  • 速度指数
  • 第一个 CPU 空闲
  • 交互时间
  • 估计的输入延迟

有关详细信息,请查看 Lighthouse评分指南

简述

越早进行绘制和工作,用户的体验就越好。

在同一基准下对前端框架进行比较(2019年更新)

表现得分(0 -100)—— 越高越好

注意:由于缺少 Demo程序,因此跳过了 PureScript。

结论

大多数应用程序的得分都高于90,在性能方面,你可能感觉不到太多的差异。

指标 #2:大小

传输大小来自 Chrome 的 network 标签中。 GZIPped 响应头加上服务器提供的响应主体。这取决于框架的大小和你添加的额外依赖项,以及构建 工具 如何消除捆绑包中未使用的代码。

简述

文件越小,下载越快,解析越少。

在同一基准下对前端框架进行比较(2019年更新)

传输大小以KB为单位 - 越少越好

结论

这里发生了很多令人惊讶的事情。 Svelte —— 能够隐身的 UI 框架 —— 这是真正适用于它的妙语。 Stencil 这个基准测试中的新手也表现不错。两者都相对较新,正在推动大小方面的限制。

指标 #3:代码行数

我们用了 cloc 计算每个 repo 的 src 文件夹中的代码行数。空行和注释行不计入在内。

如果说调试是删除软件错误的过程,那么编程必须是把它们加进去的过程 — Edsger Dijkstra

简述

这显示了给定库、框架或语言的简洁程度。根据规范,你需要多少行代码才能实现几乎相同的程序(其中一些会有更多的额外功能)。

在同一基准下对前端框架进行比较(2019年更新)

#代码行数 - 越少越好

注意 Imba:由于 cloc 无法处理 *.imba 文件而跳过了它。

注意 Elm:Elm 开发人员纵向的进行开发,因此代码行数很高 —— 至少 我被告知是这样的

注意 Angular + ngrx:在 /libs 文件夹内完成的代码行数计算,仅包括 \*.ts\*.html 文件。如果你觉得这是错的,请告诉我正确的值是多少,以及你是如何计算的。

注意 Hyperapp:文章发布时代码行数不正确,感谢 Mateusz Kwasniewski 指出错误并提供了正确计算方法。

结论

使用 ClojureScript 的 re-frame 为你提供了最佳效果。 Clojure 以其异常丰富的表现力而著称。如果你对代码行数很在意,应该关注 ClojureScript、AppRun 和 Svelte。

总结

请记住,这不是一个针对同类产品比较。有些实现使用了代码分割,有些则没有。其中一些托管在 GitHub 上,一些托管在 Now,还有一些托管在 Netlify。你还想知道哪一个是最好的吗?最好的应该是能够满足你需求的那个!

问:你喜欢类型吗?

答:要研究 Elm、PureScript 和 TypeScript 的话,请关注 Angular,AppRun,Dojo。

问:你写一个占用空间非常小的程序?

答:请关注 Svelte、Stencil 和 AppRun。

问:你想用有最少的代码来进行维护吗?

答:关注使用 ClojureScript 的 re-frame、AppRun 和 Svelte 。

问:想学习新东西吗?

答:选择一个你不知道的库或框架!

常见问题

#1 为什么在这个比较中没有框架 X、Y 和 Z ?

因为 RealWorld repo 没有完成它的实现。你可以考虑贡献自己的代码!用你喜欢的库或框架中实施解决方案,下次我们将会把它加进去!

2 为什么称它为 real world ?

因为它比 To-Do 程序多一点。通过 RealWorld,并不意味着我们会对薪水、维护、生产力、学习曲线等进行比较。 其他调查 回答了其中一些的问题。我们所说的 RealWorld 是一个连接到服务器,验证并允许用户进行 CRUD 操作的程序 —— 就像真实世界的程序一样。

3 为什么不包含我最喜欢的框架?

请参阅上面的#1,但是为了以防万一,再说一次:因为实现没有在 RealWorld repo 中完成。我不做所有的实现 —— 这是社区的努力。如果想在比较中看到你的框架,请考虑参与。

4 你用的是哪个版本的库或框架?

上线时可用的那个(2019年3月),我相信你可以从 GitHub repo 中找到相关的信息。

5 为什么你忽略了一个更受欢迎的框架?

最后再说一次,请见上文。 RealWorld repo 的实施并未完成,就这么简单。

感谢 Rich HarrisRichard Feldman 在发布前进行了审阅。

本文首发微信公众号:前端先锋

欢迎扫描二维码关注公众号,每天都给你推送新鲜的前端技术文章

在同一基准下对前端框架进行比较(2019年更新)

欢迎继续阅读本专栏其它高赞文章:


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

查看所有标签

猜你喜欢:

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

数据挖掘技术

数据挖掘技术

[美]MichaelJ.A.B / 别荣芳、尹静、邓六爱 / 机械工业 / 2006-7 / 49.00元

本书是数据挖掘领域的经典著作,数年来畅销不衰。全书从技术和应用两个方面,全面、系统地介绍了数据挖掘的商业环境、数据挖掘技术及其在商业环境中的应用。自从1997年本书第1版出版以来,数据挖掘界发生了巨大的变化,其中的大部分核心算法仍然保持不变,但是算法嵌入的软件、应用算法的数据库以及用于解决的商业问题都有所演进。第2版展示如何利用基本的数据挖掘方法和技术,解决常见的商业问题。 本书涵盖核心的数......一起来看看 《数据挖掘技术》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具