【前端架构】清洁前端架构

探索前端架构:概述与干净的前端架构相关的一些原则(SOLID、KISS、DRY、DDD等)。

在我之前的一篇帖子中,我谈到了Signals和仍然缺少的内容[1]。现在,我想谈谈一个更通用的主题,即Clean Frontend Architecture。围绕这个主题有很多原则:

SOLID、KISS(保持简洁)、DRY(不要重复)、DDD(领域驱动设计)等等。

在这篇文章中,我将讨论其中的一些概念。但首先,我为什么要谈论前端架构?对我来说,这是一个非常私人的话题。为什么?因为每天,我都要努力说服管理层和开发团队,让他们相信前端架构和后端架构一样重要。

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

功能性和非功能性需求不仅必须应用于后端,还必须应用于前端。因此,通过前端架构,我们能够满足业务需求。此外,我们能够更好地了解项目的复杂性,从而降低任何项目的风险、时间和成本。然而,在我看来,前端架构最有价值的原因是任何项目的可维护性和可扩展性。

那么,前端架构是什么样子的呢?

根据我的经验,大多数时候都使用分层体系结构。然而,我不得不承认,我也遇到过一些应用六边形架构的项目。

下图展示了一个简单的TripAgency项目。

clean architecture

Layered Frontend Architecture

使用了哪些层?

  • API:由Open-API生成器生成的DTO和服务
  • 服务:包括映射器(DTO到前端模型,反之亦然)和通过REST端点与API通信的服务
  • 存储:包含从服务层检索到的所有数据的全局存储
  • 预订:包括模型和组件的域。智能组件直接与商店交互,而哑组件只是可以在多个上下文中应用的组件,因此它们要简单得多。

那么,这种架构会出什么问题呢?

好吧,如果没有定义规则,那么开发人员可以在他们的组件中直接使用DTO,或者在没有存储的情况下与服务层通信。或者更糟的是,愚蠢的组件与服务层进行对话。

我们应该做些什么来防止这些错误?

只需定义一些规则即可防止这种情况发生。最常见的方法之一是将Bit或Nx引入到您的项目中。Bit是什么?Nx是什么?

Bit和Nx是强大的开源构建系统,提供了提高开发人员生产力、优化CI性能和保持代码质量的工具和技术[2][3]

因此,使用Bit或Nx可以应用依赖性规则。因此,如果使用了错误的层,开发人员将得到一个错误。

这是一种有效的方法,但我们如何确保域本身,在上面的预订域示例中,保持可维护性?

我们可以将一些DDD(域驱动设计)概念应用于我们的预订域。因此,我们将预订域划分为一些子域。每个子域都有自己的有界上下文和普遍语言。这可能看起来像下面提供的图片。

Applied DDD concepts

每个子域都使用分层体系结构,并且这些子域之间的交互使用API。该功能包括智能组件和服务、UI Dumb组件、Domain the Models和Util所有实用程序功能,这些功能都在该Bounded上下文中使用。

现在我们有了一个干净的架构,不是吗?我们很接近,但我们还没有达到目标。仅仅拥有一个体系结构是不够的,而且底层组件和业务逻辑必须使用干净代码原则。因此,让我们放大Feature和UI层。

Also watch:

哪些原则应该应用于组件?

  • 首先是SOLID原则。每个组件必须只有一个责任(单一责任原则)。使用组合而不是继承(开闭原则)。不要强迫组件实现不合适的接口,这意味着并非所有方法都有意义(接口分离)。请记住,组件不应该直接依赖于低级服务(依赖反转)。
  • 其次,当将业务逻辑应用于组件、服务或Util时,可能不会忘记KISS原则。保持代码尽可能简短。我们为什么要这么做?更简单的代码可以更容易地维护。
  • 第三,尽量不要重复自己(DRY原则)。将通用逻辑移动到Utils或Services。

💡注意:使用Bit可以很容易地实现这些原理。在Bit Workspace中,您可以独立地构建、测试、版本和文档可重用组件(功能、UI元素或数据模型),然后将这些组件发布到Bit的组件共享平台,您(或其他人)可以在那里轻松地将它们导入多个项目。

了解更多信息:

  • Sharing JavaScript Utility Functions Across Projects

  • How to create reusable JavaScript utility components and share code across frontend and backend projects in a managed…

听起来很合理。然而,人们应该如何知道应该避免什么呢?简而言之,什么是反模式?

反模式

随着时间的推移,我遇到了一些常见的错误。最常见的是什么?

  • 导入不必要的库会扩大捆绑包的大小
  • 使用嵌套订阅
  • 在模板中添加业务逻辑
  • 未测试的业务逻辑

所以,这些是反模式。但是,如何才能确保代码保持可维护性呢?正如人们可能知道的那样,业务逻辑会随着时间的推移而增长。简而言之,我经常听到以下发言。

代码在历史上一直在增长。首先,它是Clean Code,但现在我们有了一些无法像以前那样容易维护的东西。

是的,这是一个很常见的问题。但是,以下简单的规则可能有助于保持可维护性。

  • 定义esint规则
  • 使用stylelint
  • 测试业务逻辑
  • 构建可重复使用的小型组件
  • 使用ES6-和Typescript功能

总结

我介绍了一个Clean Architecture的例子,并概述了一些可以应用的原则。此外,我还将DDD应用到前端架构中。最后但并非最不重要的是,我介绍了一些创建组件和添加业务逻辑的规则,这样代码就有望保持可维护性。

然而,当涉及到代码评审和添加新特性时,开发团队必须有一个高标准,否则一个干净的体系结构可能不足以保持可维护性。

希望这将帮助您构建更清洁的前端架构。

链接

  • [1] https://medium.com/bitsrc/a-closer-look-on-signals-and-whats-still-missing-ba816b963a78
  • [2] Quickstart | Bit
  • [3] Intro to Nx | Nx

使用可重复使用的组件构建一个干净的前端,就像乐高一样

Bit是一个用于开发可组合软件的开源工具链。

使用Bit,您可以将任何软件——现代web应用程序、UI组件、后端服务或CLI脚本——作为一个独立、可重复使用和可组合的软件单元进行开发。在应用程序中共享任何组件,使协作更容易,构建速度更快。

本文:【前端架构】清洁前端架构 | 程序员云开发,云时代的程序员.

欢迎收藏【架构师酒馆】和【开发者开聊】

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/205055.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mysql综合案例练习<1>

MySql综合案例练习<1> 题目一题目二题目三题目四题目五题目六题目七题目八题目九题目十题目十一题目十二题目十三题目十四题目十五题目十六题目十七题目十八题目十九 题目一 创建数据库test01_library 创建表 books&#xff0c;表结构如下&#xff1a; CREATE DATABASE …

【js】连续相同请求时,如何中断还未返回的请求

需求 前端页面&#xff0c;用户连续翻页&#xff0c;或是连续筛选这样的连续请求&#xff0c;如果保证发起一次请求时&#xff0c;去中断掉上一次还未返回的请求&#xff1f; 代码 使用axios实现 import axios from axios; import requistDuplicateBlacklist from ./requis…

量子纠缠通讯:未来通讯技术的革命性突破

量子纠缠通讯:未来通讯技术的革命性突破 引言 随着科学技术的不断发展,量子纠缠通讯已成为当今最热门的研究领域之一。作为一种革新性的通讯技术,量子纠缠通讯有望为我们的信息安全和传输速度带来前所未有的提升。那么,究竟什么是量子纠缠通讯,它的原理又是如何的呢?本…

【Hadoop-Distcp】通过Distcp的方式进行两个HDFS集群间的数据迁移

【Hadoop-Distcp】通过Distcp的方式进行两个HDFS集群间的数据迁移 1&#xff09;Distcp 工具简介及参数说明2&#xff09;Shell 脚本 1&#xff09;Distcp 工具简介及参数说明 【Hadoop-Distcp】工具简介及参数说明 2&#xff09;Shell 脚本 应用场景&#xff1a; 两个实时集…

HWL-2511-SS 路由器命令执行漏洞复现 [附POC]

文章目录 HWL-2511-SS 路由器命令执行漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现0x06 修复建议HWL-2511-SS 路由器命令执行漏洞复现 [附POC] 0x01 前言 免责声明:请勿利用文章内的相关技术从事非法测试,…

股市复苏中的明懿金汇:抓住新机遇

2023年对于明懿金汇来说是充满挑战与机遇的一年。面对复杂多变的市场环境&#xff0c;明懿金汇展现了其对市场趋势的敏锐洞察和卓越的策略适应能力。以下是该公司在2023年的主要投资策略和市场适应方式的详细分析。 随着2023年中国股市迎来反弹&#xff0c;明懿金汇迅速调整了…

Linux Docker 安装Nginx

1.21、查看可用的Nginx版本 访问Nginx镜像库地址&#xff1a;https://hub.docker.com/_/nginx 2、拉取指定版本的Nginx镜像 docker pull nginx:latest #安装最新版 docker pull nginx:1.25.3 #安装指定版本的Nginx 3、查看本地镜像 docker images 4、根据镜像创建并运行…

Shopify 开源 WebAssembly 工具链 Ruvy

最近,Spotify 开源了Ruvy,一个 WebAssembly 工具链,能够将 Ruby 代码转换为 Wasm 模块。Ruvy 基于ruby.wasm, 用 Rust 实现,提升了性能并简化了 Wasm 模块的执行。 Ruvy 利用了ruby.wasm提供的 Ruby 解释器模块,并使用wasi-vfs (WASI 虚拟文件系统)将其与所有指定的 Rub…

汽水瓶

某商店规定&#xff1a;三个空汽水瓶可以换一瓶汽水&#xff0c;允许向老板借空汽水瓶&#xff08;但是必须要归还&#xff09;。小张手上有n个空汽水瓶&#xff0c;她想知道自己最多可以喝到多少瓶汽水。 数据范围&#xff1a;输入的正整数满足 1≤n≤100 注意&#xff1a;本…

java.lang.UnsupportedOperationException解决方法

问题描述 在实际开发中经常会有类似的这种代码&#xff0c;想要按类的某一个属性对列表中的元素分组。 例如&#xff1a; 有一些学生&#xff0c;然后根绝他们的年龄对他们进行分组。可以写出如下代码。 public class UnsupportedOperationExceptionDemo {DataNoArgsConstru…

ARM Cortex-M安全之MPU介绍

ARM Cortex-M处理器系列中的存储保护单元&#xff08;Memory Protection Unit&#xff0c;简称MPU&#xff09;是一种硬件机制&#xff0c;可用于在嵌入式系统中实现存储保护和访问权限控制。MPU允许开发人员对不同的内存区域分配不同的权限&#xff0c;从而提供对系统代码和数…

关键字volatile作用和用法

目录 一、多线程编程中的volatile关键字 二、嵌入式编程中的volatile关键字 三、 优化编译器优化 四、 指针类型转换 一个定义为volatile的变量是说这变量可能会被意想不到地改变&#xff0c;这样&#xff0c;编译器就不会去假设这个变量的值了。 精确地说就是&#xff0c;…

动态规划求解完全背包问题(c++实现)

首先是朴素版代码&#xff0c;三层for循环第一层是第几个物品&#xff0c;第二层是体积&#xff0c;第三层是第几个物品的个数&#xff1b;朴素版代码时间复杂度较高&#xff0c;效率低&#xff0c;容易超时。 #include<iostream> using namespace std; const int N1010…

【Docker】Swarm的ingress网络

Docker Swarm Ingress网络是Docker集群中的一种网络模式&#xff0c;它允许在Swarm集群中运行的服务通过一个公共的入口点进行访问。Ingress网络将外部流量路由到Swarm集群中的适当服务&#xff0c;并提供负载均衡和服务发现功能。 在Docker Swarm中&#xff0c;Ingress网络使…

RTL编码(2)——模块优化

一、顶层模块的划分 在RTL编码中&#xff0c;我们是以模块为单位进行设计的&#xff0c;模块之间的连接和嵌套关系对于电路结构有着很大的影响。一个好的系统设计中&#xff0c;我们应该使得模块尽量满足以下两个标准&#xff1a; 顶层模块扁平化内部模块层次化 1.1 顶层模块扁…

系列学习前端之第 3 章:一文精通 css

全套学习 HTMLCSSJavaScript 代码和笔记请下载网盘的资料&#xff1a; 链接: 百度网盘 请输入提取码 提取码: 6666 一、CSS基础 1. CSS简介 CSS 的全称为&#xff1a;层叠样式表 ( Cascading Style Sheets ) 。 CSS 也是一种标记语言&#xff0c;用于给 HTML 结构设…

使用arcpy移除遥感影像云层

先讲思路&#xff0c;然后上代码&#xff1a; 去除云层 思路1&#xff1a; 如果同一地理区域的多个图像&#xff0c;其中一些部分有丰富的云&#xff0c;而另一些部分没有云&#xff0c;则可以将它们组合起来&#xff0c;以便无云的部分替代多云的部分。这种方法很简单&…

编写高质量Python (第29条) 用赋值表达式消除推导中的重复代码

第 29 条 用赋值表达式消除推导中的重复代码 ​ 推导 list、dict 与 set 等变体结构时&#xff0c;经常要在多个地方用到同一个计算结果。例如&#xff0c;我们要给制作紧固件等公司编写程序来管理订单。顾客下单后&#xff0c;我们要判断当前的库存能否满足这份订单&#xff…

C++ vector基本操作

目录 一、介绍 二、定义 三、迭代器 四、容量操作 1、size 2、capacity 3、empty 4、resize 5、reserve 总结&#xff08;扩容机制&#xff09; 五、增删查改 1、push_back & pop_back 2、find 3、insert 4、erase 5、swap 6、operator[] 一、介绍 vector…

前端CSS(层叠样式表)总结

CSS2总结 一、CSS基础 1. CSS简介 CSS 的全称为&#xff1a;层叠样式表 ( Cascading Style Sheets ) 。CSS 也是一种标记语言&#xff0c;用于给 HTML 结构设置样式&#xff0c;例如&#xff1a;文字大小、颜色、元素宽高等等。 简单理解&#xff1a; CSS 可以美化…