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

目录

为什么需要前端架构?

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

使用了哪些层?

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

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

哪些原则应适用于组件?

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

HCIA-实验命令基础学习:

视频学习: 第一部分:基础学习。 19——子网掩码。 27——防火墙配置: 32——企业级路由器配置: 基础实验完成:(完成以下目录对应的实验,第一部分基础实验就完成。) 方法&#xff…

儿童家居服 I 童年很短,请尽情打扮吧

厚实细腻的双面北极绒面料 软糯亲肤,上身效果极佳 经典宽松版型,对身材的包容性很强 帽子上的小熊刺绣精致又可爱 袖口处还有小熊掌的刺绣哦 满满的少女心,也太适合女宝宝了 松紧裤腰和束脚设计,防风保暖做到实处 这么好看…

【数据结构&C++】超详细一文带小白轻松全面理解 [ 二叉平衡搜索树-AVL树 ]—— [从零实现&逐过程分析&代码演示简练易懂]

前言 大家好吖,欢迎来到 YY 滴C系列 ,热烈欢迎! 本章主要内容面向接触过C的老铁 主要内容含: 欢迎订阅 YY滴C专栏!更多干货持续更新!以下是传送门! 目录 一.AVL树的概念二.AVL树节点的定义(代码…

Python开源自动化工具Playwright安装及介绍

一个非常强大的自动化项目叫 playwright-python 它支持主流的浏览器,包含:Chrome、Firefox、Safari、Microsoft Edge 等,同时支持以无头模式、有头模式运行,并提供了同步、异步的 API,可以结合 Pytest 测试框架 使用&…

IPO解读丨高处不胜寒,澜沧古茶低头取暖?

自A股注册制改革不断深化并全面落地后,不少意欲登陆资本市场的企业转战港股。这个过程中,诞生了很多以“港股”为前缀的“第一股”——“白酒第一股”珍酒李渡、“水果零售第一股”百果园、“智能驾驶第一股”知行汽车、“运动科技第一股”Keep…… 由A…

STM32与ADXL345加速度计的无线传输与监测应用

ADXL345是一款三轴数字输出加速度计,能够测量出物体在三个方向上的加速度。本文将介绍如何将ADXL345加速度计与STM32微控制器结合使用,通过无线通信技术实现加速度数据的传输与监测。 一、ADXL345与STM32概述 1. ADXL345加速度计 ADXL345是一款低功耗…

VB.net读写S50/F08IC卡,修改卡片密码控制位源码

本示例使用设备:Android Linux RFID读写器NFC发卡器WEB可编程NDEF文本/智能海报/-淘宝网 (taobao.com) 函数声明 Module Module1读卡函数声明Public Declare Function piccreadex Lib "OUR_MIFARE.dll" (ByVal ctrlword As Byte, ByRef serial As Byte, …

servlet乱码问题

问题:中文乱码 解决:加框的部分

给折腿的罗技G512键盘换键帽

文章目录 1\. 引言2\. 操作2.1. 用打火机烤2.2. 用钳子拔出来2.2.1. 拔出成功2.2.2. 放大细看2.3. 更换键帽 1. 引言 G512的轴采用的是塑料连接,特别容易腿折在里面,换着的时候,得先把这个卡在里面的塑料腿拿出来才行 放大效果图 2. 操作 可…

用js切割文字,超出省略

因为项目需要,当人员超过两个事则进行超出省略,如将一个 “张三,李四,王五”,这样的字串切割成"张三,李四…" 效果: 主要用的是基础的切割法 isOutlier(text) {if (!text || text "") return;const parts text.split(","); // 使用逗号将字…

电力感知边缘计算网关产品设计方案-业务流程设计

1.工业数据通信流程 工业数据是由仪器仪表、PLC、DCS等工业生产加工设备提供的,通过以太网连接工业边缘计算网关实现实时数据采集。按照现有的通信组网方案,在理想通信状态下可以保证有效获取工业数据的真实性和有效性。 边缘计算数据通信框架图: 2.边缘计算数据处理方案 …

Zeet构建多云战略充分发挥云的优势

大型企业通常拥有基础设施和应用团队,有能力围绕自己的业务需求构建所需平台。但对于技术团队精简、预算紧张的小企业来说,定制平台往往不现实而且难以扩展,是负担不起的“奢侈品”。 这一情况催生了平台即服务(PaaS)…

Azure Machine Learning - 什么是 Azure AI 搜索?

Azure AI 搜索(以前称为“Azure 认知搜索”)在传统和对话式搜索应用程序中针对用户拥有的内容提供大规模的安全信息检索。 关注TechLead,分享AI全维度知识。作者拥有10年互联网服务架构、AI产品研发经验、团队管理经验,同济本复旦…

如何进行手动脱壳

脱壳的目的就是找到被隐藏起来的OEP(入口点) 这里我一共总结了三种方法,都是些自己的理解希望对你们有用 单步跟踪法 一个程序加了壳后,我们需要找到真正的OEP入口点,先运行,找到假的OEP入口点后&#x…

【2023云栖】大模型驱动DataWorks数据开发治理平台智能化升级

随着大模型掀起AI技术革新浪潮,大数据也进入了与AI深度结合的创新时期。2023年云栖大会上,阿里云DataWorks产品负责人田奇铣发布了DataWorks Copilot、DataWorks AI增强分析、DataWorks湖仓融合数据管理等众多新产品能力,让DataWorks这款已经…

文档明明在桌面上却不显示?5个方法轻松解决!

“我之前保存文档的时候明明选择保存在桌面,上次看的时候文件还在,但是今天打开电脑后发现我保存在桌面的文档不见了,这是为什么呢?还有机会找回我的文件吗?” 在日常使用电脑时,有些用户为了方便&#xff…

SAP权限设计简介

介绍 小技巧 -ERP 权限控制 繁中求简 , 闲聊一下 SAP 复杂权限设计的基本思想。 特别是适合大集团业务的 ERP 系统 , 应该提供一个非常完善的权限控制机制 , 甚至允许将权限控制字段细到字段级别,如果权限控制都做不到这点,估计产品销售就够呛&#x…

来聊聊阿里1688 /拼多多API接口接入| 让需求回到产品端

昨儿办公室讨论起了1688。 对,就是阿里搞批发的那个网站。 在上面,你可以买到各种各样价格低廉的产品,比如,办公用具、女孩子的皮筋、小孩子的玩具等等。 在小批量上,它和拼多多定价类似,但二者的赛道却不同…

物流实时数仓:采集通道搭建

系列文章目录 物流实时数仓:环境搭建 文章目录 系列文章目录前言一、环境准备1.前置环境2.hbase安装1.上传并解压2.配置环境变量3.拷贝jar包4.编写配置文件5.分发配置文件 3.Redis安装1.安装需要的编译环境2.上传并解压文件3.编译安装4.后台访问 4.ClickHouse安装5…

抽象类和接口

抽象类和接口 文章目录 抽象类和接口抽象类抽象类概念抽象类语法抽象类特性抽象类的作用 接口接口的概念语法规则接口使用接口特性接口类型是一种引用类型,但是不能直接new接口的对象接口中每一个方法都是public的抽象方法.接口中的方法是不能在接口中实现的&#x…