Testlify 由四个相互独立的应用组成,而每个应用都各自重新实现着相同的按钮、表单、弹窗和表格。这意味着同样的工作要做四遍,产品之间的 UI 也逐渐失去一致。我主张用一套共享的组件库来取代各应用各自为政的重复实现,然后把它构建并发布了出来。
我做了什么
- 这个决定: 我主张把 UI 收拢到一个库里,而不是让每个应用各留一份副本——权衡了前期投入,以及我们当时已经在承受的 UI 漂移和重复劳动。方案定下来后,构建工作由我负责。
- 无状态设计: 我把组件保持为无状态、纯展示型,因此它们不携带任何与具体应用相关的逻辑,能干净利落地嵌入四个产品中的任意一个。每个应用接入自己的数据和行为;库只负责外观与交互质感。
- 作为私有 npm 包发布: 我把它发布为带版本号的私有 npm 包,这样每个应用都通过普通依赖引入同一套组件,只需升一次版本号就能拿到修复和改进——不用复制粘贴,也不用维护分叉。
为什么这很重要
UI 只做一次、在四个应用间复用,把功能交付时间缩短了约 30%——各团队不再反复重建同样的基础组件,而是从一套共享的集合中拼装。它也让整个产品套件有了一致的观感,因为库里的一处改动会一次性落到所有地方,而不必在四处手动重新应用。