业务组件库开发流程

简介: 业务组件库可以帮助我们加速开发流程,提高工作效率,提升代码复用率

业务组件库必要性

项目经过长期维护之后往往会沉淀出很多公共组件,当一个组件编写完成之后,其他维护者想要使用这个组件,了解这个组件是做什么的,应该怎么用,必须再去翻看源码,或者没有压根儿注意到这个组件导致重发开发。这个时候一个完善的组件库就很有必要了,可以保障开发者之间进行良好的协作。

组件库可以帮我们解决以下问题:

  • 业务组件跨项目复用,提升开发效率
  • 统一代码实现,统一代码质量保障
  • 组件库文档提供清晰的使用方式和直观的展示效果

组件库的组成

业务组件构成

业务组件库是基于基础组件库进行编写的,基础组件库是使用公司的antd。我们会对基础组件针对不同需求进行封装,达到可以直接引用无需二次开发的目的(比如:产线下拉选择组件,我们会将接口请求数据、选项模糊查询、多语言等封装到组件内部,无需二次开发,接口请求也不需要再散落到各个页面中)。

目标

  1. 引⼊即可使⽤,⽆需⼆次开发
  2. 完善的文档和组件效果演示,支持代码一键拷贝
  3. 良好的代码质量:使用Jest进行单元测试,保障代码质量
  4. 良好的编码规范和代码提交规范:ESLint、Husky、commit-lint等工具进行校验和拦截
  5. 根据代码提交自动生成ChangeLog
  6. 组件效果演示支持编辑实时渲染(在文档中编辑组件,实时变更展示效果)

开发计划

组件库开发周期

  1. 准备

    • 组件库文档选型评审
    • 首批组件梳理
  2. 开发

    • 基础架构设计

      • 目录结构规范
      • 本地开发环境构建
      • 代码规范校验
      • 代码提交规范校验
      • CR和发布规范
      • TypeScript支持
    • 单元测试

      • Jest + @testing-library
    • 组件开发
    • 组件库文档生成

      • 本地预览调试
      • 本地构建
  3. 初次发布

    • 发布和使用初次版本
  4. 迭代升级

    • 业务组件新增
    • 业务组件迭代
    • 组件库文档托管

      • 在线访问
  5. 可视化构建页面区块和页面

业务组件库完成之后,就可以尝试低代码了,可以使用拖拽或者图像识别自动生成业务代码

混沌前端

相关文章
|
3月前
|
人工智能 弹性计算 数据库
阿里云首购特惠活动解析:新用户可参与轻量应用服务器抢购,老用户同享特惠云服务器
2026年阿里云新老用户首购特惠活动解析:新用户可享轻量应用服务器抢购价,2核2G/200M/40G ESSD仅38元/年,2核4G配置9.9元/月起,支持OpenClaw镜像一键部署AI助理。老用户同享99计划长效特惠:e实例99元/年、u1实例199元/年,新购续费同价至2027年3月。此外,u2i实例享3折、九代实例6.4折等首购优惠。
|
8月前
|
微服务 监控
认识Seata
Seata是阿里巴巴开源的分布式事务解决方案,通过事务协调者(TC)、事务管理器(TM)和资源管理器(RM)协同工作,实现全局事务一致性。支持XA、AT、TCC、SAGA四种模式,其中AT为默认模式,具备最终一致性与低侵入性,广泛应用于微服务架构中。
认识Seata
|
8月前
|
人工智能 搜索推荐 知识图谱
GEO 优化的三大原则——结构化内容 / 语义权威 / 意图匹配
GEO(生成式增强优化)是适配生成式搜索引擎的核心战略,以结构化内容、语义权威、意图匹配为三大支柱。本文详解三原则内涵与逻辑,提供中小企业可直接落地的实操方法,含内容架构、主题深耕、用户需求匹配路径,助力内容被 AI 引擎优先推荐、提升转化。
|
10月前
|
Web App开发 前端开发 数据可视化
小白零代码模板建站:从选模板到上线的完整攻略
小白无需代码,借模板和工具可搭政务门户、博客等网站。先按需求选适配模板,再换基础信息与核心内容、微调布局,适配留言等功能并测试,最后申请服务器与域名、备案绑定,即可上线,全程无技术门槛。
686 1
|
数据采集 人工智能 数据处理
如何画关系代数的连接图?关系代数中的连接操作:从理论到实践
三桥君认为,关系代数中的连接是一个重要而且容易混乱的知识点,三桥君通过查阅很多资料总结了与连接有关的知识点,并发现了他们之间的关系。本文产品专家三桥君通过理论知识先了解连接相关的重要名词意思,然后通过画图来理解画连接的思路以及他们之间的关系
423 0
|
搜索推荐 SEO
关键词选择有什么技巧?
关键词选择是SEO的重要环节,直接影响网站流量与排名。要有效选词,需了解目标受众需求、善用关键词工具、分析竞争对手,并关注搜索意图。同时,结合长尾关键词、地域性词汇,评估搜索量与竞争度,实现多元化布局。此外,定期优化策略,融入语义相关性,可提升内容深度与用户匹配度,增强搜索引擎可见性,为网站带来更高价值的流量。
663 4
|
自然语言处理 前端开发 JavaScript
🔥3.4K star!阿里出品对话式UI神器,轻松打造专业级聊天界面!
ChatUI 是阿里巴巴团队开源的对话式 UI 设计语言与 React 组件库,专为构建智能对话界面而生。它凝聚了阿里在智能客服领域的最佳实践,提供“最新、最全、最优质”的开源项目和高效工作学习方法。核心功能亮点包括智能消息流处理、无障碍访问认证、企业级主题定制、多端自适应布局、国际化双引擎和智能输入辅助。技术架构基于 React 17 + TypeScript 4,支持 Less + CSS Variables 样式方案,Rollup + Babel 构建工具,以及 Jest + React Testing Library 测试体系。
3780 5
|
Web App开发 编解码 弹性计算
实时云渲染技术布道 | 像素流送技术与商业化实时云渲染产品的指标对比
随着虚幻引擎(UE)在高品质应用开发中的广泛应用,大内容与轻终端的矛盾日益突出。实时云渲染技术应运而生,成为解决这一矛盾的关键。本文以LarkXR实时云渲染平台为例,对比UE自带的像素流送插件,探讨云渲染技术的革新。LarkXR提供完整的实时云渲染PaaS服务,涵盖云端算力管理、网络传输优化和异构终端接入全流程,支持2K-8K分辨率、30-120FPS帧率,具备强大的集群并发能力和多引擎兼容性,整体性价比远高于像素流送,为开发者提供了更高效、专业可靠的解决方案。
|
JavaScript 前端开发 索引
如何快速实现一个无缝轮播效果
【8月更文挑战第24天】如何快速实现一个无缝轮播效果
343 2
如何快速实现一个无缝轮播效果
|
消息中间件 Java 网络架构
在Spring Boot中实现微服务间的通信策略
在Spring Boot中实现微服务间的通信策略