每个开发者在打造视觉内容或模板构建器时，都面临着同样艰难的抉择： 我们是从零开始构建核心编辑器基础设施，还是站在巨人的肩膀上？ 在构建 Composeit这款专为高精度PDF生成设计的下一代模板构建器时，我们选择了后者。通过将我们的堆栈锚定在 grapesjs-shadcn，我们绕过了数月繁琐的基线开发。
以下是我们跳过的具体内容，以及我们重新投入工程时间的地方，以及这些方法如何带来更快、更高效的应用。
我们不必建造的东西（开箱即用的赢了）
我们没有花数周时间进行线框设计和调试基础UI组件，而是 grapesjs-shadcn 在第一天就交付了一个强大且已准备好生产的核心。我们完全跳过了以下内容的实现：
核心编辑器界面： 富文本编辑器（RTE）用于文本操作、资产管理模态和图层树。
风格与属性机制： CSS 类、特征、属性和全局样式规则的复杂管理器。
结构与可重复使用性： 内置支持块、可重复使用符号和多页路由。
通过减轻这些繁重的建筑任务，我们无需重新发明轮子。相反，我们将100%的精力投入到解决PDF模板生成中独特且高价值的挑战。
我们重新投入时间的地方
在基础架构问题解决后，我们将重点转向完善Composeit的核心价值主张： 绝对的布局精度和强大的数据集成。
1. 像素完美画布实时编辑
PDF以难以预测——你在网页画布上看到的内容很少能完美地转化成印刷页面大小。我们利用额外的开发时间，使现场画布与最终输出引擎更为准确。
全局与分区页面控制： 我们构建了一个架构布局系统，用户可以定义项目范围的页面设置，同时允许同一文档内独立的部分拥有不同的页面大小和方向。
2. 高性能数据源与令牌映射
从零开始构建模式可视化器和用于条件格式化的抽象语法树（AST）是个著名的时间消耗，尤其是在集成多个库时。 grapesjs-shadcn 内置了模式和条件逻辑管理界面，基于已有的 grapesjs API，完全消除了管理多个库和在它们之间传递数据的负担。
更重要的是，它带来了巨大的性能提升：
事件驱动优势： 我们没有依赖繁重的 React
useEffect钩子来监听全局模式的变化（这会随着模式和模板的增长而降低性能），而是直接连接到 GrapesJS 的原生事件发射器。我们直接监听特定代币事件，只有在特定代币发生变化时才触发轻量级、孤立的实时更新。这种架构也让将复杂的后端数据直接绑定到UI特征和样式变得非常简单。
EJS的超充复逻辑
为了让用户对文档有企业级的控制，我们需要支持高度嵌套的循环和先进的数据格式化。我们选择使用 EJS（嵌入式JavaScript模板） 作为底层语法引擎。
虽然将集合、条件和变量的数据解析器转换为EJS听起来复杂，但数据解析器的结构化设计 grapesjs 使其极具可预测性。由于数据形状是固定的，映射到EJS模板非常无缝。
这一集成使我们能够开箱即用地提供高级数据操作功能：
对于变量： 内置数据聚合和自定义格式。
对于环路： 可视化构建器内直接支持高级排序和细分过滤机制。
更智能的建筑，更快的交付
选择合适的基金会不仅节省了时间——还让我们能够创新创新。凭借我们核心基础设施的稳固，我们甚至有能力设计和实施AI 辅助建筑 功能，帮助用户即时生成布局。（你可以在我们专门的深度 博客文章中阅读关于我们人工智能整合的所有内容！）
我们为Composeit变得精简、高效且强大感到无比自豪，也希望你能亲身体验。
开始使用 Composeit
观看实际操作： 看看我们在 composeit.app 正在打造什么。
获取预设： 准备好自己动手了吗？ 点击这里购买预设。
需要定制吗？ 如果您需要帮助根据具体工作流程定制此配置，欢迎 今天联系我们——我们乐意帮助您定制。