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

时间 2019-11-16

标签同一基准前端框架进行比较 2019年更新繁體版

原文原文链接

翻译：疯狂的技术宅
https://medium.freecodecamp.o...

本文首发微信公众号：前端先锋
欢迎关注，天天都给你推送新鲜的前端技术文章html

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

RealWorld App git

这不只仅是“todo”。一般“todo”并无传达出在构建真正的程序时所需的足够的知识和视角，。程序员

标准化github

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

由专家撰写或审核面试

一个一致的、真正的项目，在理想状况下，由相关技术的专家创建或审查。编程

咱们比较哪些库和框架？

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

是否有大量的拥趸者并不重要。惟一要求是它是否出如今了 RealWorld 的代码仓库页面上。后端

咱们关注那些指标？

表现

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

大小

应用有多大？咱们只会比较已编译的 JavaScript 文件的大小。 CSS 对全部变体都是通用的，并从 CDN（内容分发网络）下载。 HTML 也适用于全部变体。全部技术都编译或转换为 JavaScript，所以咱们只比较这种文件的大小。

代码行数

做者根据规范建立 RealWorld app 须要多少行代码？公平地说，一些程序过于花里胡哨，但它不该该产生重大影响。咱们量化的惟一文件夹是每一个程序中的 src/。

度量标准 #1：性能

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

审核设置

测试用的全部 Lighthouse Audit 设置

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

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

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

简述

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

表现得分（0 -100）—— 越高越好

注意：因为缺乏 Demo程序，所以跳过了 PureScript。

结论

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

指标 #2：大小

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

简述

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

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

结论

这里发生了不少使人惊讶的事情。 Svelte —— 可以隐身的 UI 框架 —— 这是真正适用于它的妙语。 Stencil 这个基准测试中的新手也表现不错。二者都相对较新，正在推进大小方面的限制。

指标 #3：代码行数

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

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

简述

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

#代码行数 - 越少越好

注意 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 Harris 和 Richard Feldman 在发布前进行了审阅。