Fundamentos del Frontend
Esta sección cubre los fundamentos necesarios para desarrollar con el ecosistema frontend de OnSpot. Incluye tanto el framework principal como el sistema de componentes de UI.
Secciones
🏗️ Framework Principal
Fundamentos de desarrollo con Next.js y la arquitectura base de OnSpot.
Contenido principal:
- Frontend OnSpot - Arquitectura y configuración del proyecto
- App.tsx - Configuración global de la aplicación
- LayoutMenu - Sistema de navegación principal
- Estructura de Carpetas - Organización del proyecto
- Librerías Externas - Uso de dependencias específicas
🎨 OnSpot-UX
Sistema de diseño y librería de componentes UI reutilizables.
Contenido principal:
- Introducción - Conceptos básicos del sistema de diseño
- Componentes - Catálogo completo de componentes
- Storybook - Documentación interactiva
Stack Tecnológico
Framework Principal
- Next.js 13.5.1 - Framework de React con SSR/SSG
- React 18.2.0 - Librería de interfaz de usuario
- TypeScript 5 - Tipado estático para JavaScript
- Sass - Preprocesador CSS para estilos
- Apollo Client - Cliente GraphQL para comunicación con API
Sistema de Componentes
- @twlgroup/onspot-ux - Librería de componentes UI
- @twlgroup/onspot-connections-ui-beta - Hooks y utilidades de conexión
- Storybook - Herramienta de desarrollo de componentes
Herramientas de Desarrollo
- ESLint - Linter de calidad de código
- Prettier - Formateador de código
- Bun/npm - Gestores de paquetes
Flujo de Aprendizaje Recomendado
Para Desarrolladores Nuevos
Comienza con el Framework Principal
- Lee Frontend OnSpot para entender la arquitectura
- Revisa App.tsx para la configuración global
- Familiarízate con la Estructura de Carpetas
Explora OnSpot-UX
- Lee la Introducción a OnSpot-UX
- Explora el Catálogo de Componentes
- Experimenta con Storybook
Implementación Práctica
- Usa Librerías Externas para conexiones
- Implementa LayoutMenu para navegación
Para Desarrolladores Experimentados
- Revisa archivos de configuración específicos
- Explora componentes avanzados de OnSpot-UX
- Contribuye al sistema de diseño
Mejores Prácticas
- Usa componentes OnSpot-UX siempre que sea posible
- Sigue la estructura de carpetas establecida en Next.js
- Usa TypeScript para tipado fuerte
- Ejecuta linting y formateo antes de commits
- Documenta componentes en Storybook al crearlos
- Mantén consistencia con el sistema de diseño establecido