停止过度设计中等规模的前端应用程序

微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势,学习途径等等。 本文 GitHub github.com/qq449245884... 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

快来免费体验ChatGpt plus版本的,我们出的钱 体验地址:chat.waixingyun.cn 可以加入网站底部技术群,一起找bug,另外新版作图神器已上线 cube.waixingyun.cn/home

开发一个小型应用程序很简单。另一方面,开发大规模应用程序极其困难,但至少有大量可用的资源可以指导你。

然而,大多数实际应用存在的中间地带,却鲜少受到关注。在软件开发领域,不陷入过度工程化的陷阱,写出可维护的代码的做法,已经越来越少见了。

让我们探索哪些流行的成分可能对中型应用有益,并评估它们是否会帮助你管理复杂性,或者是否会制造出比解决的问题更多的问题。

Typescript

YES ✅

首先,我们来解决这个问题。现在是2023年,对于不在你的开发流程中使用TypeScript,实在没有任何借口。所有顶级的前端框架都推荐使用它,而且它们的构建过程使得开始使用变得非常容易。

Typescript是JavaScript的超集,它增加了类型注解、接口以及其他功能,使编写可维护和可扩展的代码变得更加容易。它可以帮助在开发过程的早期捕捉错误,并且可以使得随着应用程序的增长,重构代码变得更加容易。

状态管理

YES ✅

状态管理是任何中等规模前端应用的另一个重要考虑因素。随着你的应用复杂度的增长,管理状态变得越来越困难。有许多库和框架可以帮助解决这个问题,例如Redux,MobX,Vuex和Pinia。这些工具可以帮助你维护一个一致的应用状态,并使添加新的功能和特性变得更容易。然而,要注意全局状态会产生耦合,你应该强烈考虑将你的存储分割成多个模块。另外,避免滥用它来处理那些不应全局可用的事物,如组件状态。

功能标志

YES ✅

功能标志,也被称为功能切换,允许我们在运行时和无需新的部署中切换代码库中的特定功能。这是一种强大的技术,有助于发布新功能,进行A/B测试,并有效管理开发和部署过程。它们可以带来更大的灵活性,更快的发布,以及与部署新功能相关的风险降低。有各种库和工具可用于在不同的语言和框架中实现功能标志。

测试

YES & NO ❓

测试是任何应用程序开发过程的重要部分。单元测试、集成测试和端到端测试是一些常用的测试方法,它们可以提高代码质量,并在长期内节省时间。可测试的代码通常是更好的代码,而在开发早期创建测试用例可以确保应用程序会有更少的错误,并且在新人加入时会更容易。

另一方面,在大规模应用中,你可能会遇到许多在较小代码库中可能并不必要的测试类型。其中包括变异测试、负载测试、压力测试、性能测试、视觉测试、快照测试等等。

在处理中等规模的应用程序时,找到在编写足够的测试以确保稳定性和不过度工程化测试过程之间的平衡非常重要。我们应该专注于创建一个坚实的单元测试和集成测试基础来覆盖应用程序。

CI/CD

YES ✅

现代软件开发的另一个重要部分是持续集成和交付。通过CI/CD,我们可以自动化构建、测试和部署过程,节省时间并减少错误。使用一个好的CI/CD工具可以使我们的开发过程更高效,并确保我们的应用程序始终准备好进行部署。

领域驱动设计

NO ⛔️

领域驱动设计是一种软件开发方法,强调对核心业务领域的建模,构建开发人员和利益相关者共享的普遍语言,并根据领域的复杂性设计软件组件。虽然在具有复杂业务逻辑和多个团队协作的大型应用程序中,DDD可能非常有用,但对于中型应用程序来说,可能会过度。

对于中等规模的应用程序,简洁的架构和注重清晰、模块化代码的重点往往足以确保可维护性和可扩展性。DDD可能会增加不必要的开销和复杂性,这可能不会为项目带来显著的好处。相反,考虑采用更简单的架构模式和实践,以促进代码组织、关注点分离和可重用性。

Hexagonal Architecture 六边形架构

NO ⛔️

六边形架构,也被称为端口和适配器,是另一种旨在在应用程序的核心业务逻辑和其外部依赖(如数据库、API和用户界面)之间创建清晰分离的架构模式。这种分离允许更大的灵活性、可测试性和可维护性。

与DDD类似,实施六边形架构对于具有复杂业务逻辑和众多外部依赖的大型应用程序可能是有益的,但对于中型应用程序来说,这绝对是过度设计。

微前端

NO ⛔️

微前端是一种流行的架构模式,它将大型应用程序分割成基于特性或领域的较小、独立的应用程序。这些较小的应用程序可以独立开发、测试和部署,从而实现更大的可扩展性和灵活性。

然而,对于中等规模的应用程序,引入微前端可能并不必要,反而可能增加复杂性和开销,超过其带来的好处。更传统的单体架构,结合良好组织的代码库和适当的组件使用,可能更适合大多数中等规模的应用程序。如果将来有需要,可以重新考虑过渡到微前端的决定。

CDN

YES ✅

使用CDN是一种快速、简单且成本效益高的方法,通过缓存内容并从离终端用户更近的服务器提供服务,可以提高您的应用程序的性能和可靠性。

Linting

YES ✅

Linting是一种分析代码以检测潜在错误、不一致性和偏离已建立编码标准的过程。这是一种维护代码质量、提前捕获问题以及提高整体可读性和可维护性的简单快速的方法。

Observability 可观察性

YES ✅

中等规模的应用程序是观察性开始变得至关重要,并可能节省大量时间和金钱的时候。通过在您的应用程序中设置观察性,我们可以轻松监控、理解并排除系统性能和整体健康状况的问题。

有多种工具和技术可用于在你的应用程序中构建可观察性,例如日志记录、度量收集和分布式追踪。目标是快速识别并解决问题,保持应用程序的性能,并尽量减少停机时间。

Accessibility 无障碍性

YES ✅

无障碍并不仅仅是一个选项,它更是一项责任!确保你的应用程序对所有用户,包括那些有残疾的用户,都是可访问的,这不仅是正确的做法,而且在某些国家,这也是法律要求。作为前端工程师,我们有责任创建无障碍的网站,并且我们应该将其作为我们工作流程的一部分,纳入我们的完成定义中。

Design system 设计系统

NO ⛔️

设计系统是一套可复用的组件、指南和设计原则的集合,用于在多个应用程序或平台上设计一致的用户界面。虽然对于拥有多个产品和团队的大型组织来说,实施设计系统可能非常有益,但对于中等规模的应用程序来说,这可能是不必要的。

而不是投入时间和资源去创建一个全面的设计系统,你应该专注于根据你的需求配置现有的组件库,并在你的应用程序中建立一套指南和可重复使用的组件,以保持一致性并提高开发者的效率。

总结

过度工程化是所有恶的根源。当涉及到中等规模的应用开发时,我们大多数人都有罪。有些工具和技术是至关重要的,而有些则不值得投入,但重要的是要设定并维持一种通用的编码风格,利用自动化防止错误进入生产环节,并保持技术债务的低水平。

交流

有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub github.com/qq449245884... 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

相关推荐
Dread_lxy10 分钟前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与1 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
前端郭德纲2 小时前
浏览器是加载ES6模块的?
javascript·算法
JerryXZR2 小时前
JavaScript核心编程 - 原型链 作用域 与 执行上下文
开发语言·javascript·原型模式
帅帅哥的兜兜2 小时前
CSS:导航栏三角箭头
javascript·css3
渗透测试老鸟-九青2 小时前
通过投毒Bingbot索引挖掘必应中的存储型XSS
服务器·前端·javascript·安全·web安全·缓存·xss
龙猫蓝图2 小时前
vue el-date-picker 日期选择器禁用失效问题
前端·javascript·vue.js
夜色呦2 小时前
掌握ECMAScript模块化:构建高效JavaScript应用
前端·javascript·ecmascript
peachSoda72 小时前
随手记:简单实现纯前端文件导出(XLSX)
前端·javascript·vue.js