{"id":21406453,"url":"https://github.com/arturoeanton/go-echo-live-view","last_synced_at":"2025-07-29T07:03:55.322Z","repository":{"id":57617509,"uuid":"383858439","full_name":"arturoeanton/go-echo-live-view","owner":"arturoeanton","description":"POC for test the idea  of Phoenix LiveView in Go and Echo  ","archived":false,"fork":false,"pushed_at":"2025-06-27T19:02:59.000Z","size":3781,"stargazers_count":21,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-27T20:19:30.576Z","etag":null,"topics":["client-server","echo","echo-framework","go","golang","live-view","liveview","phoenix","websocket"],"latest_commit_sha":null,"homepage":"","language":"Go","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arturoeanton.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2021-07-07T16:18:14.000Z","updated_at":"2025-06-27T19:03:03.000Z","dependencies_parsed_at":"2023-10-20T17:47:29.398Z","dependency_job_id":null,"html_url":"https://github.com/arturoeanton/go-echo-live-view","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/arturoeanton/go-echo-live-view","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arturoeanton%2Fgo-echo-live-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arturoeanton%2Fgo-echo-live-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arturoeanton%2Fgo-echo-live-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arturoeanton%2Fgo-echo-live-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arturoeanton","download_url":"https://codeload.github.com/arturoeanton/go-echo-live-view/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arturoeanton%2Fgo-echo-live-view/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265227898,"owners_count":23731059,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["client-server","echo","echo-framework","go","golang","live-view","liveview","phoenix","websocket"],"created_at":"2024-11-22T16:40:00.299Z","updated_at":"2025-07-14T00:32:31.192Z","avatar_url":"https://github.com/arturoeanton.png","language":"Go","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Go Echo LiveView\n\n**Una implementación de Phoenix LiveView en Go usando Echo Framework**\n\nGo Echo LiveView es una biblioteca que permite crear aplicaciones web interactivas y reactivas sin escribir JavaScript del lado cliente. Inspirado en Phoenix LiveView de Elixir, este proyecto utiliza WebSockets para mantener una conexión persistente entre el servidor y el navegador, permitiendo actualizaciones del DOM en tiempo real.\n\n## 🚀 Características Principales\n\n- **Interactividad sin JavaScript**: Escribe toda la lógica en Go, las actualizaciones del DOM se manejan automáticamente\n- **Comunicación en Tiempo Real**: WebSockets para actualizaciones bidireccionales instantáneas\n- **Sistema de Componentes**: Arquitectura modular con componentes reutilizables\n- **Plantillas Dinámicas**: Sistema de templates integrado con Go templates\n- **Integración con WASM**: Soporte opcional para WebAssembly para funcionalidades avanzadas\n\n## 📋 Requisitos\n\n- **Go 1.20+**\n- **Navegador web moderno** con soporte para WebSockets\n- **gomon** (opcional, para desarrollo con auto-reload)\n\n## 🛠️ Instalación\n\n### 1. Clonar el repositorio\n```bash\ngit clone https://github.com/arturoeanton/go-echo-live-view.git\ncd go-echo-live-view\n```\n\n### 2. Instalar dependencias\n```bash\ngo mod tidy\n```\n\n### 3. (Opcional) Instalar gomon para desarrollo\n```bash\ngo install github.com/c9s/gomon@latest\n```\n\n## 🏃‍♂️ Ejecución Rápida\n\n### Método 1: Script automático\n```bash\n./build_and_run.sh\n```\n\n### Método 2: Ejecutar ejemplos individuales\n```bash\n# Ejemplo básico de contador\ngo run example/example1/example1.go\n\n# Ejemplo con input de texto\ngo run example/example2/example2.go\n\n# Ejemplo de todo list\ngo run example/example_todo/example_todo.go\n```\n\n### Método 3: Desarrollo con auto-reload\n```bash\ngomon\n```\n\nVisita `http://localhost:1323` en tu navegador.\n\n## 📖 Uso Básico\n\n### Ejemplo Simple: Contador con Botón\n\n```go\npackage main\n\nimport (\n    \"fmt\"\n    \"github.com/arturoeanton/go-echo-live-view/components\"\n    \"github.com/arturoeanton/go-echo-live-view/liveview\"\n    \"github.com/labstack/echo/v4\"\n    \"github.com/labstack/echo/v4/middleware\"\n)\n\nfunc main() {\n    e := echo.New()\n    e.Use(middleware.Logger())\n    e.Use(middleware.Recover())\n\n    // Configurar página principal\n    home := liveview.PageControl{\n        Title:  \"Mi App LiveView\",\n        Lang:   \"es\",\n        Path:   \"/\",\n        Router: e,\n    }\n\n    // Registrar lógica de la página\n    home.Register(func() *liveview.ComponentDriver {\n        // Crear componentes\n        button1 := liveview.NewDriver(\"contador\", \u0026components.Button{Caption: \"Incrementar\"})\n        contador := 0\n\n        // Definir evento del botón\n        button1.Events[\"Click\"] = func(data interface{}) {\n            contador++\n            button1.FillValue(\"resultado\", fmt.Sprintf(\"Contador: %d\", contador))\n        }\n\n        // Crear layout con template\n        return components.NewLayout(\"home\", `\n            \u003cdiv\u003e\n                \u003ch1\u003eContador LiveView\u003c/h1\u003e\n                {{mount \"contador\"}}\n                \u003cdiv id=\"resultado\"\u003eContador: 0\u003c/div\u003e\n            \u003c/div\u003e\n        `).Mount(button1)\n    })\n\n    e.Logger.Fatal(e.Start(\":1323\"))\n}\n```\n\n## 🏗️ Arquitectura del Sistema\n\n### Componentes Principales\n\n1. **PageControl**: Maneja las rutas HTTP y WebSocket\n2. **ComponentDriver**: Proxy entre componentes Go y el DOM del navegador\n3. **Component Interface**: Interface que deben implementar todos los componentes\n4. **Live.js**: Cliente JavaScript que maneja la comunicación WebSocket\n\n### Flujo de Comunicación\n\n```\nNavegador ←→ WebSocket ←→ Echo Server ←→ ComponentDriver ←→ Component Go\n    ↑                                                           ↓\nJavaScript Client                                      Go Templates + Lógica\n```\n\n## 🧩 Componentes Disponibles\n\n### Componentes Base\n- **Button**: Botón interactivo con eventos click\n- **InputText**: Campo de texto con eventos de teclado\n- **Clock**: Reloj que se actualiza automáticamente\n\n### Crear un Componente Personalizado\n\n```go\ntype MiComponente struct {\n    *liveview.ComponentDriver[*MiComponente]\n    Valor string\n}\n\nfunc (c *MiComponente) GetTemplate() string {\n    return `\u003cdiv id=\"{{.IdComponent}}\"\u003e{{.Valor}}\u003c/div\u003e`\n}\n\nfunc (c *MiComponente) Start() {\n    c.Commit() // Renderizar el componente\n}\n\nfunc (c *MiComponente) GetDriver() liveview.LiveDriver {\n    return c\n}\n\n// Evento personalizado\nfunc (c *MiComponente) Click(data interface{}) {\n    c.Valor = \"¡Clickeado!\"\n    c.Commit()\n}\n```\n\n## 📁 Estructura del Proyecto\n\n```\n├── liveview/           # Core del framework\n│   ├── model.go        # Sistema de componentes y drivers\n│   ├── page_content.go # Manejo de páginas y WebSocket\n│   ├── layout.go       # Sistema de layouts\n│   └── utils.go        # Utilidades\n├── components/         # Componentes reutilizables\n│   ├── button.go\n│   ├── input.go\n│   └── clock.go\n├── example/           # Ejemplos de uso\n│   ├── example1/      # Contador básico\n│   ├── example_todo/  # Lista de tareas\n│   └── pedidos_board/ # Tablero de pedidos\n├── assets/            # Archivos estáticos\n│   ├── json.wasm      # Módulo WebAssembly\n│   └── wasm_exec.js   # Ejecutor WASM\n└── cmd/wasm/          # Código fuente WASM\n```\n\n## 🔧 Desarrollo\n\n### Comandos Útiles\n\n```bash\n# Compilar módulo WASM\ncd cmd/wasm/\nGOOS=js GOARCH=wasm go build -o ../../assets/json.wasm\n\n# Ejecutar con auto-reload (requiere gomon.yaml)\ngomon\n\n# Ejecutar ejemplo específico\ngo run example/[nombre_ejemplo]/[nombre_ejemplo].go\n```\n\n### Configuración de gomon\n\nEl archivo `gomon.yaml` configura el auto-reload:\n\n```yaml\nname: example\ninclude: \n  - ./example\nexclude:\n  - txt\n  - md\ncommands:\n  command: sh ./build_and_run.sh\n  terminate: killall example\nextensions:\n  - go\n  - html\nlog: true\n```\n\n## 🤝 Contribuir al Proyecto\n\n### Estilo de Código\n\n1. **Seguir convenciones de Go**: `gofmt`, `golint`, `go vet`\n2. **Documentar funciones públicas**: Usar comentarios Go estándar\n3. **Manejo de errores**: Siempre manejar errores explícitamente\n4. **Naming**: Usar nombres descriptivos en inglés para APIs públicas\n\n### Estructura de Pull Requests\n\n1. **Fork** del repositorio\n2. **Crear rama** descriptiva: `feature/nueva-funcionalidad` o `fix/corregir-bug`\n3. **Commits atómicos** con mensajes descriptivos\n4. **Incluir ejemplos** si se añaden nuevas funcionalidades\n5. **Tests**: Añadir tests para nuevas funcionalidades (cuando el framework de testing esté disponible)\n\n### Áreas de Contribución Prioritarias\n\n- **Seguridad**: Mejoras en validación y sanitización\n- **Componentes**: Nuevos componentes reutilizables\n- **Documentación**: Ejemplos y guías\n- **Testing**: Framework de testing para componentes\n- **Performance**: Optimizaciones en comunicación WebSocket\n\n## ⚠️ Advertencias de Seguridad\n\n**IMPORTANTE**: Este proyecto es un POC (Proof of Concept) y NO debe usarse en producción sin revisiones de seguridad significativas.\n\n### Vulnerabilidades Conocidas\n- Ejecución de JavaScript arbitrario via `EvalScript()`\n- Sin validación de entrada en WebSocket\n- Sin autenticación/autorización\n- Posibles XSS en templates\n\n## 📚 Ejemplos Incluidos\n\n### example1 - Reloj Simple\nReloj que se actualiza cada segundo mostrando la hora actual.\n\n### example2 - Input Interactivo  \nCampo de texto que actualiza el contenido en tiempo real mientras escribes.\n\n### example_todo - Lista de Tareas\nCRUD completo de tareas con persistencia en archivo JSON.\n\n### pedidos_board - Tablero de Pedidos\nSistema más complejo con múltiples estados y navegación por tabs.\n\n## 🐛 Reportar Bugs\n\nCrea un issue en GitHub incluyendo:\n- **Descripción del problema**\n- **Pasos para reproducir**\n- **Comportamiento esperado vs actual**\n- **Versión de Go y sistema operativo**\n- **Código mínimo que reproduce el error**\n\n## 📄 Licencia\n\nVer archivo `LICENSE` para detalles.\n\n## 🙏 Créditos\n\nProyecto inspirado en [golive](https://github.com/brendonmatos/golive) y en Phoenix LiveView de Elixir.\n\n---\n\n**¿Preguntas?** Abre un issue o revisa los ejemplos en la carpeta `example/`.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farturoeanton%2Fgo-echo-live-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farturoeanton%2Fgo-echo-live-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farturoeanton%2Fgo-echo-live-view/lists"}