Gestión de Dependencias de Snippets
Filosofía de Dependencias
Elemental CMS sigue un enfoque directo y eficiente para la gestión de dependencias:
- Cargar dependencias solo cuando y donde se necesitan
- Mantener archivos separados y enfocados - sin necesidad de empaquetado o minificación
- Inclusión directa de archivos CSS y JavaScript
- Código fuente limpio y legible para fácil mantenimiento
Esta filosofía prioriza:
- Claridad sobre optimización artificial
- Mantenibilidad sobre complejidad de construcción
- Gestión directa de archivos sobre empaquetado
- Carga específica sobre inclusión genérica
Niveles de Dependencias
El sistema utiliza tres niveles distintos de dependencias, cada uno con un propósito específico:
1. Dependencias Globales
├── Compartidas en todas las páginas
├── Funcionalidad core (ej., jQuery, Bootstrap)
└── Gestionadas via comandos global-deps
2. Dependencias de Páginas
├── Específicas para páginas individuales
├── Recursos específicos por idioma
└── Cargadas con contenido de página
3. Dependencias de Snippets
├── Cargadas solo cuando se usa el snippet
├── Autocontenidas en spec del snippet
└── Inyectadas durante renderizado
Dependencias Globales
Las dependencias globales se organizan por tipo en carpetas separadas:
GLOBAL_DEPS_FOLDER/
├── text_css/
│ ├── bootstrap.json # Estilos core
│ └── custom-theme.json # Tema del sitio
├── application_javascript/
│ ├── jquery.json # Funcionalidad core
│ └── bootstrap.json # Componentes UI
└── module/
└── app-module.json # Lógica de aplicación
Cada dependencia global tiene su propio archivo de especificación:
{
"_id": ObjectId("..."),
"order": 1,
"name": "jquery",
"type": "application/javascript",
"url": "js/jquery.js",
"meta": {
"crossorigin": "anonymous"
}
}
Dependencias de Páginas
Las páginas pueden incluir sus propias dependencias específicas:
{
"name": "about",
"language": "es",
"cssDeps": [
{
"name": "about-styles",
"type": "text/css",
"url": "css/about.css"
}
],
"jsDeps": [
{
"name": "about-interactions",
"type": "application/javascript",
"url": "js/about.js"
}
]
}
Dependencias de Snippets
Los snippets incluyen solo las dependencias que necesitan:
{
"name": "product-gallery",
"cssDeps": [
{
"name": "gallery-styles",
"type": "text/css",
"url": "css/gallery.css"
}
],
"jsDeps": [
{
"name": "gallery-behavior",
"type": "application/javascript",
"url": "js/gallery.js"
}
]
}
Trabajando con Dependencias
Creando Dependencias
Crear dependencias de forma directa y clara:
# Dependencia global
elemental-cms global-deps create -d datepicker application/javascript
# Snippet con dependencias
elemental-cms snippets create -s contact-form
# Editar contact-form.json
{
"name": "contact-form",
"cssDeps": [
{
"name": "form-styles",
"type": "text/css",
"url": "css/contact-form.css"
}
],
"jsDeps": [
{
"name": "form-validation",
"type": "application/javascript",
"url": "js/contact-form.js"
}
]
}
Gestionando Dependencias
Gestión de dependencias simple y directa:
# Listar todas las dependencias globales
elemental-cms global-deps list
# Enviar snippet con dependencias
elemental-cms snippets push -s contact-form
# Obtener snippet con dependencias
elemental-cms snippets pull -s contact-form
Mejores Prácticas
Sigue estas pautas para una gestión limpia de dependencias:
1. Mantener Dependencias Enfocadas
├── Un archivo = un propósito
├── Nombres claros y descriptivos
└── Referencias directas a archivos
2. Cargar Solo lo Necesario
├── Deps globales para recursos verdaderamente compartidos
├── Deps de página para características específicas
└── Deps de snippet para funcionalidad del snippet
3. Mantener Legibilidad
├── Usar nombres de archivo descriptivos
├── Mantener archivos fuente limpios y comentados
└── Organizar archivos lógicamente
4. Simple es Mejor
├── Evitar pasos de construcción innecesarios
├── Mantener archivos separados y enfocados
└── Inclusión directa de archivos
Ejemplos y Casos de Uso
Snippet de Navegación
# nav-bar.json
{
"name": "nav-bar",
"cssDeps": [
{
"name": "nav-styles",
"type": "text/css",
"url": "css/nav-bar.css"
}
],
"jsDeps": [
{
"name": "nav-behavior",
"type": "application/javascript",
"url": "js/nav-bar.js"
}
]
}
# nav-bar.html
<nav class="site-nav">
<ul class="nav-list">
<li><a href="/">nav.home</a></li>
<li><a href="/about">nav.about</a></li>
</ul>
</nav>
Snippet de Formulario con Validación
# contact-form.json
{
"name": "contact-form",
"cssDeps": [
{
"name": "form-styles",
"type": "text/css",
"url": "css/contact-form.css"
}
],
"jsDeps": [
{
"name": "form-validation",
"type": "application/javascript",
"url": "js/contact-form.js"
}
]
}
# contact-form.html
<form class="contact-form" id="contactForm">
<div class="form-group">
<label>form.name</label>
<input type="text" name="name" required>
</div>
<button type="submit">form.submit</button>
</form>
Usando Snippets en Páginas
{# Cada snippet carga solo sus dependencias requeridas #}
{{ render_snippet('nav-bar', page, inject_inline_deps=True) }}
{{ render_snippet('contact-form', page, inject_inline_deps=True) }}
Este enfoque asegura que cada componente carga exactamente lo que necesita, cuando lo necesita, sin complejidad ni sobrecarga innecesaria.