书名译者:Jacek Schae
译者:weakish@LeanCloud
他们将如前所述 RealWorld 实例应用领域对照后端架构。RealWorld 实例应用领域的特征:
RealWorld 应用领域
比巨集事宜类应用领域更繁杂。一般来说巨集事宜类应用领域足以传递足够多多的科学知识看法构筑前述应用领域。
控制技术标准
工程项目遵从某一准则。提供更多后端 API、动态记号词汇、艺术风格、API 规范化。
从业者编写、校对
平庸情况下,会是高连续性、高精确性的工程项目,由采用该控制技术的从业者编写或校对。
较为的库和架构
编写责任编辑时,RealWorld 实例应用领域库房共主要包括 18 个 Conduit (Medium.com 布季夫应用领域)实现。
责任编辑不考量架构的盛行某种程度,RealWorld 库房中列举的后端架构皆列入对照覆盖范围。
点击图片可放大查看
测度
性能
应用领域显示内容、可以采用需要花多久?
尺寸
应用领域有多大?他们只较为编译后的 JavaScript 文件大小。所有应用领域采用同样的 CSS 样式文件,CSS 文件加载自 CDN。所有应用领域采用的 HTML 也是一样的。这些架构都支持编译或转换为 JavaScript,所以他们仅仅测量 JavaScript 文件大小。
代码行数
根据规范化创建 RealWorld 应用领域需要多少行代码?公平地说,某些同时实现的功能要略微多一点,但这应该没有什么显著的影响。他们仅仅测量每个应用领域的 src/ 目录。
性能
他们将采用 Chrome 的 Lighthouse Audit 测试性能。Lighthouse 返回 0 至 100 间的评分。0 为最低分。
配置
所有测试均采用如下配置:
性能评分如前所述以下测度得出:
First Contentful Paint (页面中内容元素首次渲染时间)
First Meaningful Paint (页面中有意义的内容元素首次渲染时间)
Speed Index (页面加载过程视觉上的变化速度)
First CPU Idle (到 CPU 首次空闲的时间)
Time to Interactive (到页面可交互的时间)
Estimated Input Latency (预计输入延迟)
详见 Lighthouse 评分指南(https://url.leanapp.cn/3JE8dVF)。
TL;DR
首次渲染越快,到可以进行操作的时间越短,应用领域的用户体验就越好。
点击图片可放大查看
注意:他们跳过了 PureScript,因为它没有 Demo 应用领域。
结论
大部分应用领域的评分超过 90。所以,用户大概感觉不到这些架构的性能有什么大差别。
尺寸
传输尺寸根据 Chrome 开发者工具的网络标签页统计,主要包括服务器送达的响应头和响应体(经过 GZIP 压缩)。
这取决于架构的尺寸以及额外依赖的尺寸,还有构筑工具精简未采用代码的效率。
TL;DR
文件越小,下载越快,需要解析的内容越少。(下图中的单位为 KB。)
点击图片可放大查看
结论
这方面有不少惊人的结果。Svelte,魔法消失 UI 架构,无愧其名。Stencil 是一个较为新的架构,表现优异。这两个架构相对而言都较为新,将尺寸推向了新的极限。
代码行数
他们采用 cloc 计算每个库房的 src 目录的代码行数,不计空行和注释。为什么要较为代码行数?这是因为:
如果说调试是移除软件 bug 的过程,那么编程一定是植入 bug 的过程。
Edsger Dijkstra
TL;DR
下面的图表显示了给定的库/架构/词汇有多凝练。根据规范化同时实现几乎完全一样的应用领域(某些应用领域功能略多一点)需要多少行代码。
点击图片可放大查看
注意:他们跳过了 Imba,因为 cloc 无法处理 .imba 文件。Elm 开发者写代码喜欢分行,所以行数较多(至少别人是这么告诉我的)。Angular+ngrx 只计算了 libs 目录中的 .ts 和 .html 文件,如果你认为这么算不对,请告诉我正确的数字及其计算方法。责任编辑刚发表时 Hyperapp 的代码行数计算有误,感谢 Mateusz Kwasniewski 指出正确的代码行数。
结论
就代码行数而言,采用 ClojureScript 的 re-frame 给出了炸裂的结果。Clojure 以异常高的表达力而闻名。如果你在乎代码行数,应该了解下 ClojureScript、AppRun、Svelte。
总结
别忘了这并不是一个精确公平的对照。有些同时实现分离了代码,有些没有。有些部署在 GitHub 上,有些部署在 Now 上,有些部署在 Netlify 上。如果你仍然要问哪个最好?我只能说,最好的架构是最符合你需求的那个。
Q: 偏爱强类型检查?A: 了解下 Elm、PureScript、TypeScript —— Angular、AppRun、Dojo.
Q: 想要一个非常轻量的架构?A: 了解下 Svelte、Stencil、AppRun.
Q: 想维护尽可能少的代码?A: 了解下 re-frame(采用 ClojureScript)、AppRun、Svelte.
Q: 想要学点新的?A: 选择你不了解的架构!
FAQ
1. 为什么不对照架构 X、Y、Z?
因为 RealWorld 库房 中的同时实现不完整。考量下贡献代码!用你最喜欢的库/架构同时实现一下,他们会在下次对照中包含它们!
2. 为什么称它为 RealWorld?
因为它的功能要比 To-Do 应用领域繁杂。RealWorld 并不意味着他们会对照薪资水平、维护水平、生产率、学习曲线等要素,有其他调研回答了这些问题中的一部分。RealWorld 的意思是这个应用领域会像真实世界工程项目一样,连接一个服务器,认证用户,允许用户增删改查。
3. 你为什么没列入我最喜欢的架构?
请回过头去看看上文的第一问。不过我这里还是想强调下:因为 RealWorld 库房 中的同时实现不完整。这些同时实现是社区共同努力的结果,而非我一人所为。如果你想在对照中看到自己最喜欢的架构,考量下贡献代码。
4. 对照的是哪个版本的库/架构?
责任编辑编写时(2019 年 3 月)可用的版本。详见 RealWorld 库房。
5. 为什么没有对照某个盛行得多的架构?
再一次,看看前面的问题。很简单,RealWorld 库房 中的同时实现不完整。
感谢 Rich Harris 和 Richard Feldman 在发表前校对责任编辑。
如果你喜欢这篇文
译者注:同时实现上的种种差异(比如 Vue 是否搭配 Vuex)及其他因素对结果会有很大影响,因此图表仅供参考,并不能准确地体现架构的高下。况且,架构的选型涉及众多因素,大多数场景下,有许多因素的权重远高于性能、尺寸、代码行数。所以,正如书名所说,最好的架构是最符合需求的那个。
end
LeanCloud,领先的 BaaS 提供更多商,为移动开发