大奖18dj18vip-大奖18dj18娱乐官网

海外1核2G服务器低至2折,半价续费券限量免费领取!

大奖18dj18vip

大奖18dj18vip 门户 教程 电脑网络 查看内容

2020年前端框架的比较

2020-3-25 16:51| 发布者: 虚拟主机评测| 查看: 16| 评论: 0

摘要: 我们再做一次。 这是2020年,还有2019年,2018年和2017年。首先让我开始-绝对不是您应该为前端选择的比较。 它是对三个方面的比较小而相对简单的:性能,大小和非常相似的应用程序的代码行。考虑到这一点,它是如何 ...

2020年前端框架的比较

我们再做一次。 这是2020年,还有2019年,2018年和2017年。

首先让我开始-绝对不是您应该为前端选择的比较。 它是对三个方面的比较小而相对简单的:性能,大小和非常相似的应用程序的代码行。

考虑到这一点,它是如何工作的:

我们正在比较RealWorld应用程序-不仅仅是"要做"的应用程序。 通常,"待办事项"没有传达足够的知识和观点来实际构建实际的应用程序。

它以某种方式标准化-一个符合某些规则的项目-有一个规范。 提供后端API,静态标记和样式。

由专家撰写或审查-一个一致的,真实世界的项目,理想情况下,该技术的专家应建立或审查。

我们正在比较哪些库/框架?

在撰写本文时,在RealWorld存储库中有24种Conduit实现。 是否有大量的追随者都没有关系。 唯一的条件是-它显示在RealWorld回购页面上。

2020年前端框架的比较

我们看什么指标?

性能-此应用需要多长时间才能显示内容并变得可用?

大小-该应用程序有多大? 我们将只比较已编译的JavaScript文件的大小。 HTML和CSS对所有变体都是通用的,并且是从CDN(内容交付网络)下载的。 所有技术都可以编译或转换为JavaScript,因此我们仅调整该文件的大小。

代码行-作者需要多少行代码才能基于规范创建RealWorld应用程序? 公平地讲,某些应用程序有很多麻烦,但应该不会产生重大影响。 我们量化的唯一文件夹是每个应用程序中的src /。 无论它是自动生成的,都没关系-您仍然需要对其进行维护。

指标1:性能

我们将检查Chrome随附的Lighthouse Audit的性能得分。 Lighthouse返回的性能得分在0到100之间。0是最低的得分。 有关更多详细信息,请参阅《灯塔计分指南》。

审核设置

2020年前端框架的比较

Lighthouse Audit Settings for all tested apps

基本原理

绘画得越早,某人可以做某事的越早,使用该应用程序的人的体验就越好。

2020年前端框架的比较

Performance (points 0–100) — higher is better.

备注

注意:由于缺少演示应用程序,因此跳过了PureScript。

结论

Lighthouse Audit没睡。 您可以在今年看到未维护/未更新的应用程序跌破90悬崖。 如果您的应用程序得分> 90,则可能不会有很大的不同。 也就是说,AppRun,Elm和Svelte确实令人印象深刻。

指标2:大小

传输大小来自Chrome网络标签。 服务器提供的GZIPped响应标头以及响应正文。

这取决于框架的大小以及所添加的任何其他依赖项。 同样,构建构建工具可以很好地消除捆绑软件中未使用的代码。

基本原理

文件越小,下载速度越快,并且解析的次数也更少。

2020年前端框架的比较

Transfer size in KB — fewer is better

备注

由于缺少演示应用程序,因此跳过了PureScript。

Angular + ngrx + nx,请不要怪我Angular + ngrx + nx-检查Chrome开发工具网络标签,如果我算错了,请告诉我。

Rust + Yew + WebAssembly还包括.wasm文件

结论

Svelte和Stencil社区所做的惊人工作将其压缩到20KB以下,确实是一项成就。

指标3:代码行

使用cloc,我们可以计算每个存储库的src文件夹中的代码行数。 空白行和注释行不是此计算的一部分。 为什么这有意义?

如果调试是消除软件错误的过程,则编程必须是将其放入其中的过程— Edsger Dijkstra

基本原理

这说明给定库/框架/语言的简洁程度。 根据规范,您需要多少行代码才能实现几乎相同的应用程序(其中一些具有更多的功能)。

2020年前端框架的比较

lines of code — fewer is better

备注

由于cloc无法处理.svelte文件,因此Svelte被跳过。

由于cloc无法处理.riot文件,因此跳过了riotjs-effector-universal-hot。

Angular + ngrx:使用/ libs文件夹完成的LoC计算仅包括.ts和.html文件。 如果您认为这是错误的,请告诉我什么是正确的数字以及如何计算。

结论

只有具有重新构架的Imba和ClojureScript才能在1000LoC下实施该应用程序。 Clojure以异常表达而著称。 Imba第一次出现在这里(去年是cloc,不知道.imba文件格式),看起来好像会保留下来。 如果您关心自己的LoC,那么您就会知道该怎么做。

常问问题

#1为什么此比较中不包含框架X,Y和Z?

因为在RealWorld仓库中尚未完成实施。 考虑做出贡献! 在您喜欢的选择的库/框架中实施该解决方案,我们下次将包括它!

#2您为什么称其为现实世界?

因为它不只是一个待办事项应用程序。 在RealWorld中,我们并不是要比较薪水,维护,生产力,学习曲线等。还有其他一些调查可以回答其中的一些问题。 我们所说的RealWorld是一个连接到服务器,进行身份验证并允许用户CRUD的应用程序,就像真实世界中的应用程序一样。

#3您为什么不包括我最喜欢的框架?

请参见上面的#1,但以防万一,这里又来了:因为在RealWorld存储库中该实现尚未完成。 我并没有完成所有的实现-这是社区的努力。 如果您想在比较中看到您的框架,请考虑做出贡献。

#4您包括哪个版本的库/框架?

在撰写本文时(2020年3月)可用。 该信息来自RealWorld回购。 我确定您可以在GitHub存储库中找到此内容。

#5为什么您忘了包含一个比比较流行的框架?

同样,请参阅#1和#3。 在RealWorld存储库中,该实现尚未完成; 就这么简单。

如果您喜欢这篇文章,应该在Twitter上关注我。 我只写/推特有关编程和技术。

摘要

请记住,这并不是苹果之间的比较。 有些实现使用代码拆分,有些则没有。 其中有些托管在GitHub上,有些托管在Now上,有些托管在Netlify上。 您是否仍然想知道哪一个最好? 我把它留给你。

大奖18dj18vip社区温馨提示:
大奖18dj18vip(www.dastanona.com)十分重视网络版权及其他知识产权的保护,针对网络侵权采取如下版权政策:
1、大奖18dj18vip有理由相信网友侵犯任何人的版权或作品,(图文,文字,下载,视频,非法传播),大奖18dj18vip有权不事先通知即删除涉嫌侵权的作品和内容
2、大奖18dj18vip将采取必要的网络技术手段,确认为侵权作品或内容的用户有权进行警告、屏蔽、删除的行为,尽可能的防止侵权行为的发生
3、大奖18dj18vip影视资源均收集自互联网,没有提供影片资源存储,也未参与录制上传,若大奖18dj18vip收录的资源涉及您的版权或知识产权或其他利益,我们会立即删除
4、大奖18dj18vip,删帖,投诉,举报,侵权,若大奖18dj18vip侵犯您的权益,附上身份及权利证明,请直接发送邮件到 kefu-sosoba@qq.com 我们将在一个工作日内删除

鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

资讯分类

推荐图文

文章排行

Powered by www.dastanona.com Copyright © 2013-2020 大奖18dj18vip社区 小黑屋|手机版|地图|关于我们|腾讯云代金券|帮助中心|大奖18dj18vip
广告服务/项目合作: kefu-sosoba@qq.com  侵权举报邮箱: kefu-sosoba@qq.com  大奖18dj18vip建站时间:创建于2013年07月23日
免责声明:大奖18dj18vip所有的内容均来自互联网以及第三方作者自由发布,版权归原作者版权所有,大奖18dj18vip不承担任何的法律责任,若有侵权请来信告知,我们立即删除!

GMT+8, 2020-4-3 13:32 , Processed in 1.104751 second(s), 9 queries , Gzip On, MemCache On.

返回顶部