在同一基准下对前端框架进行比较[每日前端夜话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 是低分。

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

第两个有内容的绘制

第两个有意义的绘制

速度指数

第两个 CPU 空闲

交互天数

估计的输入延迟

有关详细信息，请查看 Lighthouse评分指南【 https://developers.google.com/web/tools/lighthouse/v3/scoring】。

越早展开绘制和工作，用户的体验就越好。

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

注意：由于缺少 Demo流程，因此跳过了 PureScript。

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

指标 #2：大小

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

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

这里发生了很多令人惊讶的事情。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-fr

总结

请记住，这不是两个针对同类产品较为。有些实现使用了代码分割，有些则没。其中一些托管在 GitHub 上，一些托管在 Now，还有一些托管在 Netlify。你还想知道哪两个是最好的吗？最好的应该是能够满足你需求的那个！

问：你喜欢类型吗？

答：

问：你写两个占用空间非常小的流程？

答：cil 和 AppRun。

问：你想用有最少的代码来展开维护吗？

答：

问：想学习新东西吗？

答：选择两个你不知道的库或架构！

常见问题

因为 RealWorld repo 没完成它的实现。你可以考虑贡献自己的代码！用你喜欢的库或架构中实施解决方案，下次他们将会把它加进去！

因为它比 To-Do 流程多一点。通过 RealWorld，并不意味着他们会对薪水、维护、生产力、学习曲线等展开较为。其他调查【https://insights.stackoverflow.com/survey/2018/】回答了其中一些的问题。他们所说的 RealWorld 是两个连接到服务器，验证并允许用户展开 CRUD 操作的流程 —— 就像真实世界的流程一样。

请参阅上面的#1，但是为了以防万一，再说一次：因为实现没在 RealWorld repo 中完成。我不做所有的实现 —— 这是社区的努力。如果想在较为中看到你的架构，请考虑参与。

上线时可用的那个（2019年3月），我相信你可以从 GitHub repo中找到相关的信息。

最后再说一次，请见上文。RealWorld repo 的实施并未完成，就这么简单。

感谢 Rich Harris 和 Richard Feldman 在发布前展开了审阅。

如果你觉得这篇文章对你有帮助，请点击右下角的 “🌸好看” 并分享给小伙伴们↘️↘️↘️🙏🏼

下面夹杂一些私货：也许你和高薪之间只差这一张图

2019年京程一灯课程体系上新，这是他们第一次将全部课程列表对外开放。

愿你有个好前程，愿你月薪30K。他们是认真的 ！

拉你加入控制技术交流群

唠一唠怎样才能拿高薪

世界顶级公司的后端面试都问些什么

混合内容下的浏览器行为

实战！半小时写两个脑力小游戏

JavaScript的工作原理：引擎、运行时和调用堆栈

后端先锋，写作更多技术文章和业界动态。