参考框架 系统 基准
by Jacek Schae
由Jacek Schae
带有基准的前端框架的真实世界比较(2019更新) (A RealWorld Comparison of Front-End Frameworks with Benchmarks (2019 update))
Also available in: Turkish — thanks to @erdenizZz, Portugues — thanks to @felipefialho
还提供以下语言： 土耳其语 -感谢@erdenizZz， Portugues-感谢@felipefialho
For the third time, we are comparing Front-End frameworks by using the Real World example apps. RealWorld example app gives us:
我们第三次使用“ 真实世界”示例应用程序比较前端框架。 RealWorld示例应用程序为我们提供了：
RealWorld App Something more than a “todo”. Usually “todos” don’t convey enough knowledge and perspective to actually build real applications.
RealWorld应用程序不仅仅是“待办事项”。 通常，“待办事项”没有传达足够的知识和观点来实际构建实际的应用程序。
Standardized A project that conforms to certain rules. Provides a back-end API, static markup, styles, and spec.
标准化符合某些规则的项目。 提供后端API，静态标记，样式和规范。
Written or reviewed by an expert A consistent, real-world project that, ideally, an expert in that technology would have built or reviewed.
专家撰写或审查的，一致的，真实世界的项目，理想情况下，该技术的专家应建立或审查的项目。
我们正在比较哪些库/框架？ (Which libraries/frameworks are we comparing?)
As of the writing, there are 18 implementations of Conduit at the RealWorld example app repo.
在撰写本文时，在RealWorld示例应用程序仓库中有18种Conduit实现。
It doesn’t matter if it has a big following or not. The only qualification is that it appears on the RealWorld repo page.
是否有大量的追随者都没有关系。 唯一的限制是它会出现在RealWorld回购页面上。
我们看什么指标？ (What metrics do we look at?)
性能 (Performance)
How long does this App take to show content and become usable?
此应用需要多长时间才能显示内容并可用？
尺寸 (Size)
How big is the App? We will only compare the size of the compiled JavaScript file(s). The CSS is common to all variants and is downloaded from a CDN (Content Delivery Network). The HTML is common to all variants, too. All technologies compile or transpile to JavaScript, thus we only size this file(s).
该应用程序有多大？ 我们将仅比较已编译JavaScript文件的大小。 CSS对所有变体都是通用的，并且是从CDN(内容交付网络)下载的。 HTML对于所有变体也是通用的。 所有技术都可以编译或转换为JavaScript，因此我们仅调整该文件的大小。
代码行 (Lines of Code)
How many lines of code did the author need to create the RealWorld app based on spec? To be fair some apps have a bit more bells and whistles, but it should not have a significant impact. The only folder we quantify is src/ in each app.
作者需要多少行代码才能根据规范创建RealWorld应用程序？ 公平地讲，某些应用程序有很多麻烦，但应该不会产生重大影响。 我们量化的唯一文件夹是每个应用程序中的src/ 。
指标1：效果 (Metric 1: Performance)
We’ll check the Performance score from Lighthouse Audit that ships with Chrome. Lighthouse returns a Performance score between 0 and 100. 0 is the lowest possible score.
我们将检查Chrome随附的Lighthouse Audit的性能得分。 Lighthouse返回的性能得分在0到100之间。0是最低的得分。
审核设置 (Audit Settings)
Performance is a combined score from the following metrics
效果是以下指标的综合得分
- First Contentful Paint 首次满意涂料
- First Meaningful Paint 第一有意义的油漆
- Speed Index 速度指数
- First CPU Idle 第一个CPU空闲
- Time to Interactive 互动时间
- Estimated Input Latency 估计输入延迟
For more details check Lighthouse Scoring Guide.
有关更多详细信息，请参阅《 灯塔计分指南》 。
性能TL; DR (Performance TL;DR)
The sooner you paint and the sooner someone can do something, the better the experience for the person who is using the App.
绘画得越早，某人可以做某事的越早，使用该应用程序的人的体验就越好。
Note: PureScript was skipped due to a lack of Demo application.
注意：由于缺少演示应用程序，因此跳过了PureScript。
结论 (Conclusion)
Most of the apps score above 90. You won’t probably feel a lot of difference when it comes to performance.
大多数应用程序的得分都超过90。在性能方面，您可能不会感到太大差异。
指标2：大小 (Metric 2: Size)
Transfer size is from the Chrome network tab. GZIPed response headers plus the response body, as delivered by the server.
传输大小来自Chrome网络标签。 服务器提供的GZIPed响应标头以及响应正文。
This depends on the size of your framework as well as on any extra dependencies you added, and how well your build tool can eliminate the unused code from your bundle.
这取决于框架的大小以及所添加的任何其他依赖项，以及构建工具如何从捆绑包中消除未使用的代码。
尺寸TL; DR (Size TL;DR)
The smaller the file, the faster the download, and less to parse.
文件越小，下载速度越快，并且解析的次数也更少。
结论 (Conclusion)
There is a lot of sensational things happening in this area. Svelte — The magical disappearing UI framework — really holds true to its punch line. Stencil is the new kid in this benchmark and also performs pretty well. Both are relatively new and are pushing the limits of what is possible in terms of size.
这个地区发生了许多令人震惊的事情。 Svelte —神奇的消失的UI框架—确实符合其妙语。 Stencil是该基准测试中的新手，并且性能也很好。 两者都是相对较新的，并且在尺寸方面正在推动极限。
指标3：代码行 (Metric 3: Lines of Code)
Using cloc we count the lines of code in each repo’s src folder. Blank and comment lines are not part of this calculation. Why is this meaningful?
使用cloc，我们计算每个仓库的src文件夹中的代码行数。 空白行和注释行不是此计算的一部分。 为什么这有意义？
If debugging is the process of removing software bugs, then programming must be the process of putting them in — Edsger Dijkstra
如果调试是消除软件错误的过程，则编程必须是将其放入程序的过程— Edsger Dijkstra
代码行TL; DR (Lines of Code TL;DR)
This shows how succinct given library/framework/language is. How many lines of code do you need to implement almost the same app (some of them have a bit more belts and whistles) accordingly to the specification.
这说明给定库/框架/语言的简洁程度。 根据规范，您需要多少行代码才能实现几乎相同的应用程序(其中一些具有更多的功能)。
Note Imba: Imba was skipped due to cloc not being able to process .imba files.
注所向无敌：所向无敌跳过由于CLOC不能够处理.imba文件。
Note Elm: Elm developers write the code a bit more vertically, thus the high count of LoC — at least this is what I have been told.
注意Elm：Elm开发人员更加垂直地编写了代码，因此LoC的数量很多-至少这是我所知道的 。
Note Angular+ngrx: LoC calculation done with /libs folder only including .ts and .html files. If you believe this is wrong, please let me know what is the correct number and how did you calculate it.
注意Angular + ngrx：使用/libs文件夹完成的LoC计算仅包括.ts和.html文件。 如果您认为这是错误的，请告诉我什么是正确的数字以及如何计算。
Note Hyperapp: LoC was not correct when the article was published, thanks to Mateusz Kwasniewski for pointing out the correct way to calculate LoC.
注意Hyperapp：这篇文章发表时，LoC并不正确，这要归功于Mateusz Kwasniewski指出了计算LoC的正确方法。
结论 (Conclusion)
ClojureScript with re-frame gives you the most bang? for the LoC. Clojure is known for being unusually expressive. If you care about you LoC you should check out ClojureScript, AppRun, and Svelte.
带重新框架的ClojureScript给您最大的冲击？ 针对LoC。 Clojure以异常表达而著称。 如果您关心自己的LoC，则应签出ClojureScript，AppRun和Svelte。
摘要 (Summary)
Keep in mind that this is not exactly an apples-to-apples comparison. Some implementations use code splitting and some don’t. Some of them are hosted at GitHub, some at Now and some at Netlify. Do you still want to know which one is the best? The best one is the one that fits your needs.
请记住，这并不是苹果与苹果的比较。 有些实现使用代码拆分，有些则没有。 其中有些托管在GitHub上，有些托管在Now上，有些托管在Netlify上。 您是否仍然想知道哪一个最好？ 最好的一种是适合您的需求。
Q: Do you like types? A: Look into Elm, PureScript, and TypeScript — Angular, AppRun, Dojo.
问：您喜欢类型吗？ 答：查看Elm，PureScript和TypeScript-Angular，AppRun和Dojo。
Q: Do you want to have a very small footprint? A: Check out Svelte, Stencil, and AppRun.
问：您是否希望占用很小的空间？ 答：签出Svelte，Stencil和AppRun。
Q: Do you want to have the smallest code base to maintain? A: Check out ClojureScript with re-frame, AppRun and Svelte.
问：您是否要维护最小的代码库？ 答：请使用Clo-reScript，AppRun和Svelte签出ClojureScript。
Q: Want to learn something new?A: Pick the one you don’t know!
问：想学习新东西吗？ 答：选择一个您不认识的人！
常问问题 (FAQ)
＃1为什么此比较中未包含框架X，Y和Z？ (#1 Why were framework X, Y, and Z not included in this comparison?)
Because the implementation is not completed at RealWorld repo. Consider contributing! Implement the solution in your favorite library/framework of choice and we will include it next time!
因为在RealWorld仓库中尚未完成实施。 考虑做出贡献！ 在您喜欢的选择的库/框架中实施该解决方案，我们下次将包括它！
2为什么将其称为现实世界？ (2 Why do you call it the real world?)
Because it’s a bit more than a To-Do app. By RealWorld we don’t mean that we’ll compare salaries, maintenance, productivity, learning curves, etc. There are other surveys that answer some of these questions. What we mean by RealWorld is an application that connects to a server, authenticates, and allows users to CRUD — just as a real-world app would do.
因为它不仅仅是待办事项应用程序。 通过RealWorld，我们并不是要比较薪水，维护，生产力，学习曲线等。还有其他一些调查可以回答其中的一些问题。 我们所说的RealWorld是一个连接到服务器，进行身份验证并允许用户CRUD的应用程序，就像真实世界中的应用程序一样。
3您为什么不包括我最喜欢的框架？ (3 Why didn’t you include my favorite framework?)
Please see #1 above, but just in case, here it comes again: because the implementation is not completed at RealWorld repo. I don’t do all of the implementations — it’s a community effort. Consider contributing if you want to see your framework in the comparison.
请参阅上面的＃1，但以防万一，这里又来了：因为在RealWorld repo上实现尚未完成。 我并没有完成所有的实现-这是社区的努力。 如果您想在比较中看到您的框架，请考虑做出贡献。
4您包括哪个版本的库/框架？ (4 Which version of the library/framework did you include?)
The one that is available at the time of wiring (Mar 2019). The information comes from RealWorld repo. I’m sure you can find this out from the GitHub repo.
接线时(2019年3月)可用的一种。 该信息来自RealWorld回购 。 我确定您可以在GitHub存储库中找到此内容。
5为什么您忘记包含比比较中更流行的框架？ (5 Why did you forget to include a framework that is more popular than the one in the comparison?)
Again, see above. The implementation is not complete at RealWorld repo; it’s that simple.
同样，请参见上文。 在RealWorld存储库中 ，该实现尚未完成； 就这么简单。
Thanks to Rich Harris and Richard Feldman for taking a look before publishing.
感谢Rich Harris和Richard Feldman在发布之前先来看看。
更新： (Updates:)
When this article has been published the TL;DR LoC had following description:
当本文发布时，TL; DR LoC具有以下描述：
The fewer lines of code you have, then the probability of finding an error is smaller. You also have a smaller code base to maintain.
您所拥有的代码行越少，发现错误的可能性就越小。 您还需要维护较小的代码库。
If you like this article you should follow me on Twitter. I only write/tweet about programming and technology.
如果您喜欢这篇文章，应该在Twitter上关注我 。 我只写关于编程和技术的推文。
参考框架 系统 基准
扫一扫
1729
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
