后台类项目如何挖掘前端技术亮点

前言

后台管理类项目是最普遍,最常见的项目,但也是技术上限最高的项目。大多数人对这些项目的描述,仅是做了xx模块/功能,封装了xx组件,有些微技术方案概念的可能会写双token认证,RBAC权限等。但这些描述,完全没有切中这类项目的要点,对业务的理解几乎没有。

正确的认识后台类项目

后台类项目,从层级上可以划分为平台,系统,应用(包括微应用)。其中平台级项目的技术难度无上限。

应用

这类项目大多数都是由页签/表格/表单/报表组成,表面上就是写写增删改查,没有技术难度。(也有部分应用天生自带极高的技术挑战,尤其是可视化项目)。但其中可以深挖的技术细节是最多的:

  1. 可定制的布局(常见于报表页)
  2. 配置型表格/表单组件。不仅仅包括问卷这种特殊的场景,通用的表格/表单组件也可以配置化。这其实是对前后端CURD引往标准化和低代码方向。
  3. 编辑器,包括富文本/代码/公式编辑器。不同编辑器的侧重点不一样,富文本侧重操作设计和扩展,代码编辑器侧重代码的编译/运行。
  4. 跨组件通信方案。重点在通信而不是状态管理,很多人将状态管理当成跨组件通信的手段,很多时候确实可以这么做,但这个理解是不对的。
  5. 跨页面通信BroadcastChannel
  6. 性能优化,可以是打包升级,如webpack/vite/rspack,也可以是运行性能如worker,采样,虚拟列表,甚至wasm(这个场景很少)
  7. 新技术的落地(重点是技术落地而不是引入)。比如tailwind落地,一定是包括了培训、项目规范、开发范式、应用中的问题等。
  8. 技术设计和架构,比如设计模式,mv*架构,领域模型,面向对象,AOP,IOC等
  9. 基础工具的封装,如request,hooks库,命令式弹窗等

系统

系统一般由应用发展而来,并由多个应用组成。比如财务系统,最初可能只是一个发票上报和报销审批的应用,只有三五个功能模块。随着业务发展,又扩展了退费,薪酬,分红等业务模块,形成了一个多功能多应用的系统。

系统最显著的特征是聚合性和分裂性。聚合就是将多个应用聚合到一个系统,并且这一过程是不断持续的,分裂就是一个系统可能会随业务发展分裂出多个系统。这个特征具有很强的技术导向,比如:

  1. 微前端。微前端的技术重点在微前端平台上,通过菜单关联与子应用的注册/发布实现系统的组装和拆分。
  2. monorepo。这里的重点在增量打包上,可以借助turbo,git diff等手段。
  3. 系统主题配置,包括logo/主题色/布局样式等
  4. 统一登录(SAML以及OAuth2)

公司整体业务从应用系统发展的过程,也是前端基建大展身手的最佳时机,这时候可以:

  1. 脚手架与统一技术栈
  2. 流水线
  3. 日志与监控
  4. 组件库与文档
  5. 自动化测试(端测)

平台

平台是多系统的集合,平台的重点在于约定而不是技术。比如云服务控制台,低代码平台。这一层面并不关注技术细节,而是机制、架构等,大多数人(包括很多前端面试官)并不能接触到,因此不过多阐述了。

总结

以上总结了不同类型的后台类项目中的技术亮点,可以看出即使是简单的后台类项目,也能挖掘出不少技术亮点。最后要说明的是,这些技术的应用,并不是过度设计(没苦硬吃)和生搬硬套(为醋包饺子),而是结合了业务理解的技术预判与技术实践。

相关推荐
wangbing11252 小时前
layui窗口标题
前端·javascript·layui
qq_398586543 小时前
Utools插件实现Web Bluetooth
前端·javascript·electron·node·web·web bluetooth
李剑一3 小时前
mitt和bus有什么区别
前端·javascript·vue.js
VisuperviReborn3 小时前
React Native 与 iOS 原生通信:从理论到实践
前端·react native·前端框架
hashiqimiya3 小时前
html的input的required
java·前端·html
Mapmost3 小时前
WebGL三维模型标准(二)模型加载常见问题解决方案
前端
Mapmost3 小时前
Web端三维模型标准(一):单位与比例、多边形优化
前端
www_stdio3 小时前
JavaScript 执行机制详解:从 V8 引擎到执行上下文
前端·javascript
我命由我123454 小时前
HTML - 换行标签的 3 种写法(<br>、<br/>、<br />)
前端·javascript·css·html·css3·html5·js