在同一基准下对前端框架进行比较[每日前端夜话0x58]
每日前端夜话0x58
每日前端夜话，陪你聊前端。
每天晚上18:00准时推送。
正文共：2543 字
预计阅读时间：6 分钟
翻译：疯狂的技术宅 原文：https://medium.freecodecamp.org/a-realworld-comparison-of-front-end-frameworks-with-benchmarks-2019-update-4be0d3c78075
这是我们第三次用 Real World example apps 【https://github.com/gothinkster/realworld】对前端框架进行比较。RealWorld example apps 为我们提供：
RealWorld App
这不仅仅是“todo”。通常“todo”并没有传达出在构建真正的程序时所需的足够的知识和视角，。
标准化
一个符合某些规则的项目。提供后端API、静态标记、样式和规范。
由专家撰写或审核
一个一致的、真正的项目，在理想情况下，由相关技术的专家建立或审查。
我们比较哪些库和框架？
截至撰稿时为止，在 RealWorld example app 的 repo 已经中有18个 库或框架的实现。
github: https://github.com/gothinkster/realworld
是否有大量的拥趸者并不重要。唯一要求是它是否出现在了 RealWorld 的代码仓库页面上。
我们关注那些指标？
表现
此程序需要多长时间才能显示内容并变得可用？
大小
应用有多大？我们只会比较已编译的 JavaScript 文件的大小。CSS 对所有变体都是通用的，并从 CDN（内容分发网络）下载。HTML 也适用于所有变体。所有技术都编译或转换为 JavaScript，因此我们只比较这种文件的大小。
代码行数
作者根据规范创建 RealWorld app 需要多少行代码？公平地说，一些程序过于花里胡哨，但它不应该产生重大影响。我们量化的唯一文件夹是每个程序中的 src/。
度量标准 #1：性能
我们将通过检查 Chrome 附带的 Lighthouse Audit 【 https://developers.google.com/web/tools/lighthouse/ 】的效果得分。Lighthouse 返回的性能分数在 0 到 100 之间，0 是低分。
审核设置
测试用的所有 Lighthouse Audit 设置
效果是基于以下指标的综合得分
- 第一个有内容的绘制
- 第一个有意义的绘制
- 速度指数
- 第一个 CPU 空闲
- 交互时间
- 估计的输入延迟
有关详细信息，请查看 Lighthouse评分指南【 https://developers.google.com/web/tools/lighthouse/v3/scoring 】。
简述
越早进行绘制和工作，用户的体验就越好。
表现得分（0-100）—— 越高越好
注意：由于缺少 Demo程序，因此跳过了 PureScript。
结论
大多数应用程序的得分都高于90，在性能方面，你可能感觉不到太多的差异。
指标 #2：大小
传输大小来自 Chrome 的 network 标签中。GZIPped 响应头加上服务器提供的响应主体。这取决于框架的大小和你添加的额外依赖项，以及构建工具如何消除捆绑包中未使用的代码。
简述
文件越小，下载越快，解析越少。
传输大小以KB为单位 - 越少越好
结论
这里发生了很多令人惊讶的事情。Svelte —— 能够隐身的 UI 框架 —— 这是真正适用于它的妙语。Stencil 这个基准测试中的新手也表现不错。两者都相对较新，正在推动大小方面的限制。
指标 #3：代码行数
我们用了 cloc 计算每个 repo 的 src 文件夹中的代码行数。空行和注释行不计入在内。
如果说调试是删除软件错误的过程，那么编程必须是把它们加进去的过程 — Edsger Dijkstra
简述
这显示了给定库、框架或语言的简洁程度。根据规范，你需要多少行代码才能实现几乎相同的程序（其中一些会有更多的额外功能）。
代码行数 - 越少越好
注意 Imba：由于 cloc 无法处理 *.imba 文件而跳过了它。
注意 Elm：Elm 开发人员纵向的进行开发，因此代码行数很高 —— 至少我被告知是这样的 【https://twitter.com/rtfeldman/status/983384187116949505】。
注意 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，并不意味着我们会对薪水、维护、生产力、学习曲线等进行比较。其他调查【https://insights.stackoverflow.com/survey/2018/】回答了其中一些的问题。我们所说的 RealWorld 是一个连接到服务器，验证并允许用户进行 CRUD 操作的程序 —— 就像真实世界的程序一样。
#3 为什么不包含我最喜欢的框架？
请参阅上面的#1，但是为了以防万一，再说一次：因为实现没有在 RealWorld repo 中完成。我不做所有的实现 —— 这是社区的努力。如果想在比较中看到你的框架，请考虑参与。
#4 你用的是哪个版本的库或框架？
上线时可用的那个（2019年3月），我相信你可以从 GitHub repo中找到相关的信息。
#5 为什么你忽略了一个更受欢迎的框架？
最后再说一次，请见上文。RealWorld repo 的实施并未完成，就这么简单。
感谢 Rich Harris 和 Richard Feldman 在发布前进行了审阅。