ScopeJS
v2.0.8
El Framework que Hace Magia ✨
ScopeJS es ese amigo desarrollador que siempre quisiste tener: confiable, ligero y que nunca te complica la vida. Perfecto para cuando quieres crear algo genial sin dramas.
Instalación Súper Fácil
No necesitas ser un ninja del desarrollo. Con ScopeJS, en 2 minutos ya estás creando maravillas 🎯
El Clásico (Copy & Paste)
Para los que prefieren lo sencillo: copia, pega y a volar 🚀
___PROTECTED_BLOCK_7___
El Moderno (Para los cool kids)
Para los que les gusta presumir con ES6 modules y bundlers 😎
___PROTECTED_BLOCK_8___
Más Formas de Conseguirlo
🌐 CDN (El Rápido)
Directo desde la nube, más rápido que tu café matutino:
📦 NPM (El Profesional)
Para los proyectos serios que merecen lo mejor:
Estructura HTML Básica
Aquí tienes un ejemplo completo de cómo estructurar tu página HTML:
___PROTECTED_BLOCK_9___
💡 Consejos de la Casa
- • ¿Eres nuevo? Empieza con el método clásico, no te compliques la vida
- • ¿Ya tienes experiencia? Dale caña a los ES6 modules
- • ¿Va a producción? Minifica el archivo para que vuele
- • Compatibilidad: Funciona en todos los navegadores modernos (si tienes IE6, tenemos que hablar)
- • Tamaño: Solo ~15KB minificado (más pequeño que una foto de Instagram)
Componentes Inteligentes
Crea piezas de código que funcionan como un reloj suizo: precisas, elegantes y reutilizables. Porque la vida es muy corta para escribir código repetitivo 🕰️
¿Qué Magia Tienen los Componentes?
Los componentes en ScopeJS son como ladrillos LEGO inteligentes que encapsulan todo lo que necesitas:
- Cerebro: Controladores con lógica que realmente funciona
- Cara bonita: Templates HTML que enamoran
- Estilo: CSS que no se pelea con el resto
- Personalidad: Eventos que responden como deben
- Memoria: Estado que se actualiza automágicamente
Para Qué Sirven (Spoiler: Para Todo)
Widgets Chulos
Botones, tarjetas, formularios... Todo lo que necesitas para impresionar.
Dashboards Épicos
Gráficos, métricas y paneles que hacen que los datos cobren vida.
Interfaces de Lujo
Layouts complejos que se comunican entre sí como por arte de magia.
Ejemplo Básico: Contador
Código del Componente
___PROTECTED_BLOCK_10___
Vista Previa
Contador: 0
Ejemplo Avanzado: Lista de Tareas
Lista Interactiva
___PROTECTED_BLOCK_11___
Demo Interactivo
Lista de Tareas
Lo Que Te Va a Volar la Cabeza
⚡ Renderizado Quirúrgico (Sí, es tan genial como suena)
ScopeJS no es de esos frameworks pesados que actualizan toda la página cada vez que cambias una coma. Nosotros somos más listos: solo tocamos lo que realmente ha cambiado. Como un cirujano del DOM.
Precisión ninja: Si cambias un texto, solo se actualiza ese texto. Nada más.
Eficiencia máxima: Si cambias una clase CSS, solo se modifica esa clase. Punto.
✨ Resultado: Animaciones fluidas, formularios que no se resetean y una experiencia de usuario que enamora
Data Binding Automático
Con el atributo model los datos se sincronizan solos. ¡Magia pura!
Eventos Inteligentes
Manejo de eventos que funciona como esperas, con parámetros y todo
CSS Encapsulado
Estilos que se portan bien y no molestan al resto
Súper Reactivo
Re-renderizado eficiente solo cuando hace falta. Ni más, ni menos
Modales con Estilo
Crea ventanas emergentes que no molestan, sino que encantan. Porque un modal feo es como una cita a ciegas mal planificada 💫
Ejemplo de Modal
Código del Modal
___PROTECTED_BLOCK_13___
Demo Interactivo
Prueba los diferentes tipos de modales: normal (con overlay), redimensionable, ventanas arrastrables y múltiples ventanas simultáneas
Por Qué Nuestros Modales Son Especiales
Animaciones Sexys
Entrada y salida con estilo, nada de aparecer a lo bruto
Configurable al Máximo
Control total sobre todo: posición, comportamiento, estilo... Tú mandas
Mobile-First
Se adaptan a cualquier pantalla como un camaleón digital
Redimensionables
Modales que crecen y se adaptan como tú quieras
Arrastrables
Ventanas que se mueven por la pantalla como quieras
Múltiples Ventanas
Abre varias ventanas simultáneamente como un escritorio
Router que No Te Decepciona
Sistema de navegación para SPAs que funciona como debe: sin dramas, sin bugs raros y con todas las funciones que necesitas. El router que siempre quisiste 🗺️
Configuración del Router
Configuración Básica
___PROTECTED_BLOCK_14___
Navegación Programática
Selecciona una ruta para ver la navegación
Por Qué Este Router Mola
URLs Dinámicas
Parámetros en las rutas que funcionan de verdad
Middleware Inteligente
Control de acceso y validación sin complicaciones
SPA de Verdad
Navegación fluida sin recargas molestas
Transiciones Smooth
Cambios de vista que enamoran
Rutas Anidadas 🏗️
Crea aplicaciones complejas con layouts compartidos y navegación jerárquica. Las rutas hijas heredan automáticamente el path del padre.
Panel de Administración con Rutas Anidadas
Configuración Jerárquica
___PROTECTED_BLOCK_15___
Demostración Interactiva
1. Navegar al layout padre:
2. Navegar a rutas hijas (se renderizan dentro del layout):
Haz clic en los botones para ver las rutas anidadas en acción
Herencia de Paths
Las rutas hijas heredan automáticamente el path del padre
Router Outlet
Usa <router-outlet> para renderizar componentes hijos
Layouts Compartidos
Mantén navegación y estilos consistentes
Navegación Fluida
Cambia solo el contenido, no todo el layout
La Biblia de la API
Todo lo que necesitas saber para dominar ScopeJS como un ninja del código. Aquí está la documentación que realmente vas a leer 📚
Component API
| Propiedad | Tipo | Descripción |
|---|---|---|
| controller | Class | Clase controladora del componente |
| render | Function | Función que retorna el HTML del componente |
| style | String | CSS scoped para el componente |
| tagName | String | Nombre del elemento personalizado |
| postRender | Function | Callback ejecutado después del render |
Modal API
| Propiedad | Tipo | Descripción |
|---|---|---|
| controller | Class | Controlador del modal |
| render | Function | Función de renderizado |
| hideWhenClickOverlay | Boolean | Cerrar al hacer clic fuera |
| className | String | Clase CSS adicional |
| referrer | Element | Elemento de referencia para posición |
| resizable | Boolean | Permite redimensionar arrastrando (solo desktop) |
| draggable | Boolean | Permite mover el modal arrastrando desde título |
| windowMode | Boolean | Modo ventana: sin overlay, múltiples permitidos |
| title | String | Título mostrado en la barra superior (windowMode) |
| position | Object | Posición inicial {x, y} para windowMode |
Router API
| Método | Parámetros | Descripción |
|---|---|---|
| navigate | path, body | Navegar a una ruta específica |
| render | container | Renderizar el router en un contenedor |
| listen | callback | Escuchar cambios de ruta |
| unlisten | uuid | Remover listener de cambios |
Utilidades
| Función | Parámetros | Descripción |
|---|---|---|
| enableDebugger | boolean | Activar/desactivar modo debug |
| apply | - | Re-renderizar componente |
| close | ...args | Cerrar modal (disponible en modales) |
Playground de los Dioses
Tu sandbox personal para experimentar con ScopeJS. Aquí puedes romper cosas, crear maravillas y aprender sin miedo. ¡Es tu momento de brillar! ⚡
Tu Editor Personal
Aquí Pasa la Magia
¡Vamos! Escribe algo genial y verás cómo cobra vida aquí ✨
💡 Trucos de Pro:
- • Usa
this.apply()después de cambiar datos - • El atributo
modeles tu mejor amigo para formularios - • Los eventos son tan fáciles como
onclick="miMetodo()" - • Los estilos CSS se aplican automágicamente (sí, es magia)
Sobre el Autor
Pablo Martínez
Desarrollador Full Stack con un poquito de locura 🤪 por crear herramientas que hagan que los usuarios digan "¡WOW!" Creé ScopeJS porque estaba cansado de frameworks pesados que convierten proyectos simples en monstruos complicados 🐉
Si este proyecto te ha robado el corazón ❤️ (y algunos cafés ☕), considera invitarme a una pizza 🍕 para seguir creando cositas geniales
Tu apoyo me ayuda a seguir desarrollando herramientas útiles y gratuitas para la comunidad