追光几何前端可复用内容体系简介

背景

用过追光几何产品的朋友们应该知道，追光几何主打图纸管理和在线看图。

也许大家还没注意，我们基于核心功能，默默地做了一些衍生应用，在越来越多的企业落地。如用于图纸审批流转场景的审批应用：

由于衍生应用是基于核心功能开发的，随着衍生应用的增多，必然会在不同应用间出现相似的内容，如文件标注评论、文件列表、图纸预览等，既出现在了上述审批应用场景，也出现在了追光几何主应用。

而相似内容的复用问题，不仅会影响研发的开发效率，更会影响用户的一致性体验。

一种办法是复制粘贴，但这会导致代码的可维护性变差，当后续产生需求变更，有多少地方使用就得改多少地方，也产生了较大的测试回归和体验一致性的风险。

另一种解法，对研发同学其实十分自然：把内容抽成一个可引用的包（package）。

制作一个包，往往会涉及到一些研发流程，比如开发、测试、demo 撰写、构建、发布等，需要一套技术工具链的支撑。

如果仅仅制作一个包还好，但是前面也提到，有不少内容是跨应用间共用的，甚至在网页端和桌面端，也存在许多共用内容，比如项目列表、分支视图等。若每个包都要维护一套单独的技术工具链，其维护成本是可想而知的。因此，如何将技术工具链统一起来，是一个问题。

你可能会说，咱可以把不同内容放到同一个仓库里，再把工具链放进去共用不就行了？这样会存在一些问题，放进去的内容只是一个没有版本记录的文件，出问题时无法快速回滚。并且外部依赖的时候，也无法做到有效的按需依赖，会导致依赖体积过大。

因此我们需要一种既能把内容放在一起管理，又能针对某个内容进行独立发包的技术：monorepo。

简介

追光几何基于 pnpm workspace（一种 monorepo 技术），在此基础上搭建了统一的内容研发工具链，开发了一系列用于各类场景的 基础内容 及 业务内容，进而优化了研发、测试效率，并提升了交互视觉的一致性。

我们先通过一张架构图，来对内容复用体系建立一个整体的认知。其中上层的 基础 和 业务 聚焦内容部分，最底层是研发工具链：

底层研发工具链

为什么需要研发工具链支撑呢？前文也提到过，一方面是因为内容的研发本身有一定的流程，需要技术工具支撑；另一方面因为内容涉及到协同开发，需要一些技术支撑让整个研发协同链路更加顺畅和高效。

这里简单介绍一下追光几何可复用内容研发流程以及对应的底层技术支撑：

可复用内容

可复用内容是指：可以被多处使用的同一份视图、逻辑或两者的结合（组件）。为了方便理解，以下主要以组件展开。

一般来说，依赖越少，职责越单一，则越便于复用。拿现实世界举例，金属可以被用在海量场景，生产为剪刀后可以用于剪纸、拆快递等少量场景，组装为火箭后则只能用于航天这一场景。

同样，组件也可以按照复用性的程度来划分，分为基础组件（可复用度高）和业务组件（可复用度低）。

一个页面就是由若干基础组件+业务组件组成的，基础组件和业务组件之间有单向依赖性：业务组件 依赖 基础组件。这种依赖关系原则，本质是因为基础组件具有更好的可复用性，如果倒过来依赖业务组件，业务是易变的，就会使其丧失易复用的特性。

为了平衡研发成本和设计体验，追光几何基于 ant design 定制了一套风格及组件。

与追光几何产品调性相辅相成，秉承清晰、一致、多元、高效的设计价值观。一个有效的组件库，有利于提高设计师和开发人员的工作效率以及团队协作效率，提升设计专业度的同时让产品本身的体验更加一致、易学、易用，它具备一致的、高效的、灵活的特征。

而业务组件则基于基础组件，结合追光几何的特色业务场景，做了深度定制开发。例如分享弹窗，就在云端、审批、知识库多处场景出现，共用同一个业务组件，提升了代码的可维护性，并稳固了一致的交互体验：

总结

可以看到，通过可复用内容体系，在研发层面大大提升了效率和可维护性，在应用层面也提升了体验一致性和功能稳定性，为追光几何的稳步发展保驾护航。

未来，我们会继续迭代优化该系统，补充更多的优质内容，给研发和用户带来更好的体验。敬请期待！

“核”心升级，“稳”定体验，【追光几何】CLI 版正式发布

追光的2022

如何让多人项目协作时的图纸管理变得高效？