参考框架 系统 基准

by Jacek Schae

由Jacek Schae

带有基准的前端框架的真实比较(2018更新) (A Real-World Comparison of Front-End Frameworks with Benchmarks (2018 update))

This article is a refresh of A Real-World Comparison of Front-End Frameworks with Benchmarks from December 2017.

本文是2017年12月起的具有基准的前端框架的真实世界比较的更新。

In this comparison, we will show how different implementations of almost identical RealWorld example apps stack up against each other.

在此比较中，我们将显示几乎相同的RealWorld示例应用程序的不同实现如何相互叠加。

The RealWorld example app gives us:

RealWorld示例应用程序为我们提供了：

1. Real World App — Something more than a “todo”. Usually “todos” don’t convey enough knowledge and perspective to actually build real applications.

   真实世界的应用程序 -不仅仅是“待办事项”。 通常，“待办事项”没有传达足够的知识和观点来实际构建实际的应用程序。

2. Standardized — A project that conforms to certain rules. Provides a back-end API, static markup, styles, and spec.

   标准化的 -符合某些规则的项目。 提供后端API，静态标记，样式和规范。

3. Written or reviewed by an expert — A consistent, real world project that, ideally, an expert in that technology would have built or reviewed.

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

对最新版本的批评(2017年12月) (Criticism from the last version (Dec 2017))

✅️ Angular was not in production. The demo app listed on the RealWorld repo was using a development version, but thanks to Jonathan Faircloth it is now in production version!

✅️Angular尚未生产。 RealWorld回购中列出的演示应用程序使用的是开发版本，但由于Jonathan Faircloth的支持，它现在已进入生产版本！

✅ Vue was not listed in the Real World repo, and thus was not included. As you can imagine, in the front-end world, this caused a lot of heat. How come you didn’t add Vue? What the heck is wrong with you? This time around Vue.js is in! Thank you Emmanuel Vilsbol.

ue Vue未在“现实世界”仓库中列出，因此未包括在内。 可以想象，在前端世界中，这引起了大量的热量。 您怎么没有添加Vue？ 你到底怎么了？ 这次Vue.js来了！ 谢谢你伊曼纽尔·维尔斯博尔 。

我们正在比较哪些库/框架？ (Which libraries/frameworks are we comparing?)

As in the December 2017 article, we included all implementations listed in the RealWorld repo. It doesn’t matter if it has a big following or not. The only qualification is that it appears on the RealWorld repo page.

与2017年12月的文章一样，我们包括了RealWorld存储库中列出的所有实现。 是否有大量的追随者都没有关系。 唯一的限制是它会出现在RealWorld回购页面上。

我们看什么指标？ (What metrics do we look at?)

1. Performance: How long does this App take to show content and become usable?

   性能：此应用需要多长时间才能显示内容并可用？

2. 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，因此我们仅调整该文件的大小。

3. 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)

Check out the First meaningful paint test with Lighthouse Audit that ships with Chrome.

查看Chrome随附的Lighthouse Lighthouse进行的第一个有意义的油漆测试。

The sooner you paint, the better the experience for the person who is using the App. Lighthouse also measures First interactive, but this was almost identical for most apps, and it’s in beta.

涂漆越早，使用该应用程序的人的体验就越好。 Lighthouse还可以测量“ 首次互动”功能 ，但是对于大多数应用而言，该功能几乎相同，并且处于测试阶段。

You probably won’t see a lot of difference when it comes to performance.

在性能方面，您可能不会看到太多差异。

指标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响应标头以及响应正文。

The smaller the file, the faster the download (and there’s less to parse).

文件越小，下载速度越快(而且解析的内容更少)。

This depends on the size of your framework as well as on any extra dependencies you added, and how well your build tool can make a small bundle.

这取决于框架的大小以及所添加的任何其他依赖项，并且取决于构建工具可以制作出小的捆绑包的能力。

You can see that Svelte, Dojo 2, and AppRun do a pretty good job. I can’t say enough about Elm— especially when you look at the next chart. I’d like to see how Hyperapp compares…maybe next time, Jorge Bucaran?

您可以看到Svelte，Dojo 2和AppRun表现出色。 关于Elm，我还不能说太多，尤其是当您查看下一张图表时。 我想看看Hyperapp的比较方式……也许下次， 豪尔赫·布卡拉 ( Jorge Bucaran) ？

指标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

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.

您所拥有的代码行越少，发现错误的可能性就越小。 您还需要维护较小的代码库。

结论 (In conclusion)

I’d like to say a big thank you to Eric Simons for creating the RealWorld Example Apps repo, and to numerous contributors who wrote different implementations.

我要非常感谢Eric Simons创建了RealWorld示例应用程序存储库，并感谢了许多编写了不同实现的贡献者。

Update: Thanks to Jonathan Faircloth for providing production version of Angular.

更新：感谢Jonathan Faircloth提供了Angular的生产版本。

And if you found this article interesting, you should follow me on Twitter and Medium.

如果您觉得这篇文章有趣，则应该在Twitter和Medium 上关注我 。

翻译自: https://www.freecodecamp.org/news/a-real-world-comparison-of-front-end-frameworks-with-benchmarks-2018-update-e5760fb4a962/

参考框架 系统 基准