Todo desarrollador que crea un creador de contenido visual o plantillas se enfrenta a la misma encrucijada abrumadora: ¿Construimos la infraestructura central del editor desde cero, o apoyamos gigantes? Al crear Composeit, un creador de plantillas de nueva generación diseñado para la generación precisa de PDFs, elegimos lo segundo. Al anclar nuestra pila a grapesjs-shadcn, evitamos meses de tedioso desarrollo de la línea base.
Aquí tienes un vistazo entre bastidores a lo que nos saltamos, dónde reinvertimos nuestras horas de ingeniería y cómo resultó en una aplicación más rápida y eficiente.
Lo que no tuvimos que construir (los ganadores de forma original)
En lugar de pasar semanas haciendo wireframes y depurando componentes grapesjs-shadcn fundamentales de la interfaz, nos entregó un núcleo robusto y listo para producción desde el primer día. Omitimos completamente la implementación de:
Interfaz de Editor Núcleo: Editores de texto enriquecido (RTE) para manipulación de texto, modales de gestión de activos y árboles de capas.
Estilo y mecánicas de atributos: Gestores complejos para clases, rasgos, atributos y reglas de estilo globales de CSS.
Estructura y reutilización: Soporte integrado para bloques, símbolos reutilizables y enrutamiento multipágina.
Al quitar estos pesados impulsos arquitectónicos de nuestra agenda, no tuvimos que reinventar la rueda. En cambio, dirigimos el 100% de nuestra energía a resolver los desafíos únicos y de alto valor de la generación de plantillas PDF.
Donde reinvertimos nuestro tiempo
Con la arquitectura base resuelta, centramos nuestro enfoque en perfeccionar la propuesta de valor central de Composeit: precisión absoluta en el diseño y potente integración de datos.
1. Edición en vivo de Pixel-Perfect Canvas
Los PDFs son notoriamente delicados: lo que ves en un lienzo web rara vez se traduce perfectamente en tamaño de página impresa. Aprovechamos el tiempo extra de desarrollo para que el lienzo en vivo fuera fiel al motor de salida final.
Controles globales y seccionales de página: Construimos un sistema de maquetación arquitectónica donde los usuarios pueden definir configuraciones de página a nivel de proyecto, permitiendo que secciones independientes tengan tamaños y orientaciones de página variables dentro del mismo documento.
2. Mapeo de Fuentes de Datos y Tokens de Alto Rendimiento
Construir un visualizador de esquema y un Árbol de Sintaxis Abstracta (AST) para formatear condicional desde cero es un consumidor de tiempo notorio, especialmente al integrar múltiples librerías. grapesjs-shadcn cuenta con una interfaz integrada para la gestión de esquemas y lógica condicional, construida sobre las APIs ya proporcionadas al grapesjs eliminar por completo la carga de gestionar múltiples bibliotecas e intentar pasar datos entre ellas.
Más importante aún, proporciona un enorme aumento de rendimiento:
La ventaja impulsada por eventos: En lugar de depender de ganchos pesados de React
useEffectpara escuchar cambios globales de esquema (lo que reduce el rendimiento a medida que crecen tanto el esquema como la plantilla), nos conectamos directamente al emisor nativo de eventos de GrapesJS.Escuchamos directamente los eventos específicos de cada token, activando actualizaciones en vivo ligeras y aisladas solo cuando cambia un token preciso. Esta arquitectura también hizo que vincular datos complejos del backend directamente a rasgos y estilos de interfaz de usuario fuera increíblemente sencillo.
Supercargando lógica compleja con EJS
Para dar a nuestros usuarios control de nivel empresarial sobre sus documentos, necesitábamos soportar bucles fuertemente anidados y formato avanzado de datos. Optamos por usar EJS (plantillas JavaScript embedidas) como nuestro motor sintáctico subyacente.
Aunque convertir resolvers de datos para colecciones, condiciones y variables en EJS parece complejo, el diseño estructurado de los grapesjs resolvers de datos lo hacía notablemente predecible. Como las formas de los datos son fijas, mapearlas a plantillas EJS fue fluido.
Esta integración nos permitió lanzar funciones premium de manipulación de datos de fábrica:
Para variables: Agregación de datos incorporada y formato personalizado.
Para los bucles: Mecanismos avanzados de clasificación y filtrado granular directamente dentro del constructor visual.
Construcción más inteligente, entrega más rápida
Elegir la base adecuada no solo nos ahorró tiempo, sino que nos permitió innovar. Con nuestra infraestructura central sólida, incluso teníamos el ancho de banda para diseñar e implementar funciones de construcción asistidas por IA que ayudaran a los usuarios a generar diseños al instante. (¡Puedes leer todo sobre nuestra integración de IA en nuestra entrada de blog dedicada a la profundización!)
Estamos increíblemente orgullosos de lo ágil, eficiente y potente que se ha vuelto Composeit, y queremos que lo experimentes de primera mano.
Empieza con Composeit
Míralo en acción: Echa un vistazo a lo que estamos construyendo en composeit.app.
Descarga el preset: ¿Listo para construir el tuyo propio? Compra el preset aquí.
¿Necesitas personalización? Si necesitas ayuda para adaptar esta configuración a tu flujo de trabajo específico, contáctanos hoy mismo; estaremos encantados de ayudarte a personalizarla.