如何构建更简洁的前端架构?

目录

为什么需要前端架构?

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

使用了哪些层?

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

我们应该如何避免这些错误?

哪些原则应适用于组件?

Anti-Patterns 反模式

总结

介绍一款Java+Springboot+Vue的前端框架

 

干净的前端架构,围绕这个话题有很多原则:

SOLID、KISS(保持简单明了)、DRY(不要重复自己)、DDD(领域驱动设计)等等。

为什么需要前端架构?

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

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

根据作者的经验,大多数时候都使用分层架构。但是,也会有一些项目采用了六边形架构。

下图简单地描绘了一个TripAgency项目。

使用了哪些层?

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

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

那么,如果没有定义规则,开发人员就可能直接在其组件中使用 DTO,或者在没有存储的情况下与服务层通信。或者更糟糕的是,哑组件会与服务层对话。

我们应该如何避免这些错误?

只需定义一些规则来防止这种情况发生即可。最常见的方法之一就是在项目中引入 Bit 或 Nx。

什么是 Bit?什么是 Nx?

Bit 和 Nx 是功能强大的开源构建系统,可提供用于提高开发人员工作效率、优化 CI 性能和维护代码质量的工具和技术

因此,在使用 Bit 或 Nx 时,我们可能会应用依赖规则。因此,如果使用了错误的层,开发人员就会出错。

我们可以将一些 DDD(域驱动设计)概念应用到我们的 Booking 域中。因此,我们将预订域划分为一些子域。每个子域都有自己的边界上下文和泛在语言。如下图所示。

每个子域使用分层架构,这些子域之间的交互使用 API。功能包括智能组件和服务、用户界面(UI)、哑组件、域模型和 Util 所有实用功能,这些功能都在此边界上下文中使用。我们已经很接近了,但还没到那一步。仅有架构是不够的,底层组件和业务逻辑也必须使用清洁代码原则。因此,让我们放大功能层和用户界面层。

哪些原则应适用于组件?

首先是 SOLID 原则。每个组件必须只有一个责任(单一责任原则)。使用组合而非继承(开放-封闭原则)。不要强迫组件实现不合适的接口,这意味着并非所有方法都有意义(接口隔离)。

其次,在将业务逻辑应用到组件、服务或 Util 时,不要忘记 KISS 原则。代码要尽可能简短。为什么要这样做呢?更简单的代码更容易维护。

第三,尽量不要重复(DRY 原则)。将常用逻辑移至实用工具或服务中。

注:这些原则可以通过使用 Bit 轻松实现。在 Bit 工作区内,我们可以独立构建、测试、版本控制和记录可重复使用的组件(函数、用户界面元素或数据模型),然后将其发布到 Bit 的组件共享平台,在该平台上,你(或其他人)可以轻松地将其导入到多个项目中。

听起来很有道理。然而,如何才能知道哪些是应该避免的呢?简而言之,什么是反模式?

Anti-Patterns 反模式

有一些比较常见的错误?

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

所以,这些都是反模式。但如何确保代码的可维护性呢?大家可能都知道,业务逻辑会随着时间的推移而增长。简而言之,经常会听到以下说法。

代码有了历史性的发展。起初,它是 "干净代码"(Clean Code),但现在我们的代码已经无法像以前那样容易维护了。

是的,这是一个非常常见的问题。不过,以下简单的规则可以帮助我们保持可维护性。

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

总结

本文介绍了一个简洁架构的例子,并概述了一些可以应用的原则。此外,还将 DDD 引入了前端架构。最后,介绍了创建组件和添加业务逻辑时的一些规则,希望这些代码能够保持可维护性。

不过,开发人员团队在进行代码审查和添加新功能时必须具备较高的标准,否则清洁架构可能不足以保持可维护性。

希望这能帮助大家构建更简洁的前端架构。

介绍一款Java+Springboot+Vue的前端框架

这是一款基于SpringBoot+Vue的前后端分离的项目,麻雀虽小,五脏俱全,开箱即用!

JNPF开发平台的前端采用Vue.js,这是一种流行的前端JavaScript框架,用于构建用户界面。Vue.js具有轻量级、可扩展性强和生态系统丰富等特点,被广泛应用于构建单页面应用程序。

后端采用SpringBoot,这是一种基于Java的开源框架,用于简化Spring应用的初始搭建以及开发过程。SpringBoot通过自动配置和约定大于配置的原则,简化了Spring应用的配置和开发。此外,JNPF还采用MyBatis-Plus作为持久层框架,它是一个功能强大的MyBatis扩展,可以大大简化数据库操作的开发。

核心功能:表单引擎、可视化引擎、BI引擎、流程引擎、权限引擎、门户引擎、大屏引擎、接口中心、物联平台。

如果你现在对软件开发感兴趣,JNPF 可以提供了一个相当优秀的土壤。它是一个适合所有水平的用户的低代码学习平台,无论是有经验的开发者还是编程新手,都可以在这里找到适合自己的学习路径。

尝试自己开发一个应用!应用地址:https://www.jnpfsoft.com/?csdn

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

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

相关文章

小程序存在优惠卷遍历,但是歪了

进入小程序,因为是一个小商城,所以照例先查看收货地址是否存在越权,以及能否未授权访问,但是发现不存在这些问题,所以去查看优惠卷 进入领券中心,点击领取优惠券时抓包 发现数据包,存在敏感参数…

数据库的级联删除

级联删除是指在数据库中删除一个对象时,与该对象有关的其他对象也被自动删除。在 Django 中,级联删除通常通过在模型中定义外键时使用 on_delete 参数来实现。以下是一些常见的 on_delete 选项: 1.models.CASCADE: 当关联的对象被删除时&…

CentOS 7 使用Fmt库

安装 fmt Git下载地址:https://github.com/fmtlib/fmt 步骤1:首先,你需要下载fmt的源代码。你可以从https://github.com/fmtlib/fmt或者源代码官方网站下载。并上传至/usr/local/source_code/ ​ 步骤2:下载完成后&#xff…

【Docker】Docker安装Nginx配置静态资源

1.下载镜像 2.创建nginx配置文件 3.创建nginx容器运行 4.配置nginx静态资源 1.下载镜像 Dockerhub官网:Docker docker pull nginx docker pull nginx下载最新版本 默认latest 下载指定版本docker pull nginx:xxx 2.创建nginx配置文件 启动容器之前要创建nginx…

怎么使用sentinel,以及所有的知识点

Sentinel是一个开源的流量控制和实时监控系统,主要用于保护企业级应用程序免受不良的请求。下面是使用Sentinel需要了解的知识点: 1. 什么是流量控制? 流量控制指的是限制应用程序的请求流量,防止过多的请求超出系统的承受范围。…

基于单片机停车场环境监测系统仿真设计

**单片机设计介绍, 基于单片机停车场环境监测系统仿真设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的停车场环境监测系统是一种利用单片机技术实现环境监测和数据处理的系统。它可以感知停车场的温湿…

Python (十一) 迭代器与生成器

迭代器 迭代器是访问集合元素的一种方式,可以记住遍历的位置的对象 迭代器有两个基本的方法:iter() 和 next() 字符串,列表或元组对象都可用于创建迭代器 字符串迭代 str1 Python str_iter iter(str1) print(next(str_iter)) print(next(st…

zip4j压缩使用总结

一、引入依赖 <dependency><groupId>net.lingala.zip4j</groupId><artifactId>zip4j</artifactId><version>1.3.1</version></dependency>二、使用添加文件&#xff08;addFiles&#xff09;的方式生成压缩包 /*** Author wan…

蓝桥杯物联网_STM32L071_2_继电器控制

CubeMX配置&#xff1a; Function.c及Function.h&#xff1a; #include "Function.h" #include "gpio.h" void Function_LD5_ON(void){HAL_GPIO_WritePin(LD5_GPIO_Port, LD5_Pin, GPIO_PIN_RESET); }void Function_LD5_OFF(void){HAL_GPIO_WritePin(LD5_…

HarmonyOS应用开发者认证题目满分指南

为了帮助大家快速的上手HarmonyOS应用程序开发&#xff0c;官方制作了一些免费的课程&#xff1a;HarmonyOS第一课。每个课程后面都有一些练习题&#xff0c;下面就是这些题目的满分答案。 【习题】运行Hello World工程 判断题 1.DevEco Studio是开发HarmonyOS应用的一站式集…

定时器如何计算触发频率?

定时器触发频率的计算公式为&#xff1a;定时器时钟频率/&#xff08;预分频系数*计数周期1&#xff09;。其中&#xff0c;定时器时钟频率是指定时器所连接的总线频率&#xff0c;预分频系数和计数周期需要根据具体的需求进行设置。预分频系数用于将总线频率分频&#xff0c;计…

Power Apps-下拉列表控件

插入一个下拉列表控件 设置值的两种方式 1.通过属性items写数组设置 2.通过连接数据表&#xff0c;先在右侧操作面板中选择项目中的数据表 再从Value中选择其中一列&#xff0c;下拉就可以选择该列全部行的值 但是这样会导致有很多重复的字段&#xff0c;所以可以在items属性里…

好用的博客评论系统 Valine 使用及避坑指南

评论系统&#xff0c;即网站的一个小功能&#xff0c;展示评论内容和用户输入框。开源免费的评论系统可不多&#xff0c;原来很火的"多说"评论系统都关闭了&#xff0c;而Disqus又是国外的访问受限。无意间发现了Valine&#xff0c;挺不错的&#xff0c;分享给大家。…

如何用cmd命令快速搭建FTP服务

环境&#xff1a; Win10专业版 问题描述&#xff1a; 如何用cmd命令快速搭建FTP服务 解决方案&#xff1a; 1.输入以下命令来安装IIS&#xff08;Internet Information Services&#xff09;&#xff1a; dism /online /enable-feature /featurename:IIS-FTPServer /all …

IDEA集成Git

一、配置Git忽略文件 例如&#xff1a;用eclipse创建的项目有其特定的文件&#xff0c;例如&#xff1a;.classpath,.project文件&#xff0c;而用IDEA创建的项目也有其特定的文件&#xff1a;.xml,.iml,.target,我们需要最好忽略他们。 为什么要忽略他们&#xff1f; 与项目…

从Github登录的双因子验证到基于时间戳的一次性密码:2FA、OTP与TOTP

Github于2023-03-09推出一项提高软件安全标准的措施&#xff0c;所有在Github上贡献过代码的开发人员在年底前必须完成 2FA&#xff08;Two-factory authentication&#xff0c;双因子认证&#xff09;。初听此事之时&#xff0c;不以为意&#xff0c;因为自己之前就知道双因子…

关于2023年的裸辞对话

2023: 为什么要裸辞&#xff1f; 小苏&#xff1a;因为我疯了 2023&#xff1a;裸辞后悔吗&#xff1f; 小苏&#xff1a; 如果很快找到工作就不后悔&#xff0c;但是今年没有工作&#xff0c;后悔裸&#xff0c;不后悔辞。 2023&#xff1a;关于市场环境的敏感度&#xff…

操作系统(三)| 进程管理下 经典进程问题分析 线程 死锁

文章目录 6.经典进程同步问题6.1 生产者-消费者问题 (既有同步又有互斥)6.2 读者-写者问题6.3 哲学家进餐问题6.4理发师问题 7. 进程之间通信7.1 共享存储区7.2 消息传递7.3 管道 8.线程8.1 线程的实现机制 9 进程调度9.1 调度方式9.2 常见算法先来先服务 FCFS短进程优先 SPN最…

C++之常用的排序算法

C之常用的排序算法 sort #include<iostream> using namespace std; #include<vector> #include<algorithm> #include<functional> void Myptint(int val) {cout << val << " "; }void test() {vector<int> v;v.push_back(…

打破应用孤岛,低代码平台效力几何?

关于低代码开发平台&#xff0c;争论有很多。有人认为它是第四代编程语言&#xff0c;有人认为它是开发模式的颠覆&#xff0c;有人认为它是企业管理模式的变革&#xff0c;也有人认为它空有其表。 不过&#xff0c;至少在目前看来&#xff0c;低代码无疑是火爆的&#xff0c;…