清晰的前端架构

原文链接: Clean Frontend Architecture - 原文作者: Robert Maier-Silldorff
本文采用的是意译的方式

这个话题将涉及到很多的原则:

SOLID, KISS(Keep It Short and Simple), DRY(Don't Repeat Yourself), DDD(Domain-Driven-Design) 等等

我们为什么需要前端架构?

功能性和非功能性需求不仅需要应用到后端,也需要应用于前端。因此,前端架构能够满足商业的需求。而且,我们可以更好理解项目的复杂性,从而减少项目的风险、时间和成本。然而,在我看来,前端架构最有价值的原因是任何项目的可维护性和可扩展性。

前端架构应该是什么样子的?

根据我的经验,大多数情况下,Layered Architecture(分层架构)被使用到。然而,我必须承认我也遇到过一些应用了 Hexagonal Architecture(六边形架构)的项目。

下图,是一个简单的旅行社项目为例子说明。

哪层被用到?

  • API :通过 Open-API 生成器生成 DTOsServices
  • Service :包含 MappersDTO 和 前端模型相互转换),使用 RESTAPI 进行通信服务
  • Store :存储从 Service 层获取的数据
  • Booking :包括模型 Models 和组件 Components 的区域。

DTO - Data Transfer Object,即数据传输对象

这种架构会出现哪些问题?

嗯~如果没有定义规则,那么开发者可能会在他们的组件直接使用 DTOs 或者与服务层进行通信而不使用存储层。或者说糟糕的是,组件直接与服务层通信,这是多愚蠢。

我们怎么预防这些错误呢?

预防这事情的发生,我们简单定义一些规则。其中最常见的方法之一是在项目中引入 Bit 或者 Nx。那么,Bit 是什么?Nx 又是什么?

BitNx 是很强大的开源系统,提供了增强开发者生产力、优化持续集成性能和保持代码质量的工具。

所以,BitNx 二选其一应用。因此,在使用错误的层时,开发者会被提示错误。

那是很有效的方法,但是我们怎么确保领域 Domain 自身(例如上面订阅领域)保持可维护呢?

我们可以应用一些 DDD(Domain Driven Design) 概念到我们的 Booking Domain。因此,我们将 Booking Domain 切分为多个子领域 Sub-Domains。每个子领域有自己的边界上下文和共享语言。正如下图所示。

每一个子领域都是用分层架构,然后通过子领域的 APIs 相互通信。特性 Feature 包括智能的组件和服务,UI 包括亚组件, Domain 包括模型,而 Util 包括这个边界上下文中使用的实用函数。

现在,一定程度上我们有了清晰的架构,不是吗?我们已经很接近(成功了),但是还是没到那里。拥有一个架构不够,底层组件和和业务逻辑必须使用 Clean Code principle 干净代码原则。因此,让我们深入探讨 FeatureUI 层。

哪些原则应该被使用到组件上?

首先,也是最重要的该属 SOLID 原则。每个组件必须是单一原则(Single Responsibility Principle)。使用组合而非继承,开放封闭原则(Open-Closed Principle)。不要强制组件实现不适合它的接口,意思是并非所有的方法都有意义,接口隔离原则(Interface Segregation)。还有要记住的是,组件不应该直接依赖低级别的服务,依赖反转(Dependency inversion)。

SOLID 中还有一个原则 -> 里氏替换原则(Liskov Substitution Principle):子类应该能够替换掉父类而不导致程序的错误行为。

第二,当将业务逻辑应用到组件 Component,服务 Service 或者工具 Util 时,我们应该记住 KISS (Keep it short and simple) 原则。为什么我们要这么做?因为越简单的代码越好维护。

第三,尽量避免重复的代码(DRY, 即 Don't repeat yourself 原则)。将公共的业务逻辑移动到 Utils 或者 Services 中。

💡笔记:这些原则可以通过使用 Bit 很容易实现。在 Bit Workspace 中,我们可以独立构建,测试,版本控制和文档化重用的组件(函数、UI 元素或者数据模型),然后将它们发布到 Bitcomponent-sharing platform,在那你或者他人能够轻松导入多个项目。

这听起来很合理。然而,一个人如何知道哪些是应该避免的呢?简而言之,什么是反模式(Anti-Patterns)。

Anti-Patterns

曾经,我也犯了一些同样的错误。有哪些同样的事情呢?

  • 引入不必要的库,使得构建包膨胀
  • 使用嵌套订阅 nested subscriptions
  • 在模版文件 template 中添加了业务逻辑
  • 没对业务逻辑进行测试

这些就是反模式 Anti-Patterns。但是一个人如何确保代码可维护性呢?因为众所周知,业务逻辑随着时间的推移而增长。简而言之,我经常听到下面说法。

代码在历史中逐渐增长。起初,它是干净的,现在,我们有了一些代码,不像以前那么容易维护了。

是的,这是个通病。然而,下面这些简单的规则可能帮到某人去很好维护代码。

  • 定义 eslint 规则
  • 使用 stylelint
  • 测试 Buisness-Logic
  • 构建可复用且小巧的组件
  • 使用 ES6Typescript-Features

总结

我通过举例介绍了 Clean Architecture,并且介绍了使用到的一些原则。此外,我已经将领域驱动设计(DDD)应用于前端架构中。最后,但是同样重要的是,我还阐述了有关创建组件和添加业务逻辑的规则,以便代码能够保持可维护性。

然而,开发团队在 Code-Reviews 和添加 new Features 时候应该有更高的标准,否则 Clean Architecture 可能无法保持可维护性。

希望本文能帮到你构建一个清晰的前端架构(cleaner Frontend Architectures)。

链接

[1] medium.com/bitsrc/a-cl...

[2] bit.dev/docs/quick-...

[3] nx.dev/getting-sta...

相关推荐
半开半落几秒前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
customer0816 分钟前
【开源免费】基于SpringBoot+Vue.JS医院管理系统(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·开源·intellij-idea
2402_8575893626 分钟前
SpringBoot框架:作业管理技术新解
java·spring boot·后端
理想不理想v28 分钟前
vue经典前端面试题
前端·javascript·vue.js
不收藏找不到我29 分钟前
浏览器交互事件汇总
前端·交互
小阮的学习笔记42 分钟前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜43 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=43 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
一只爱打拳的程序猿44 分钟前
【Spring】更加简单的将对象存入Spring中并使用
java·后端·spring
minDuck1 小时前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js