Introduccion al Stack Go + Templ + HTMX

El problema: fatiga de JavaScript

El desarrollo web moderno se ha vuelto complejo. Para construir una aplicacion “simple” necesitas:

• Un framework frontend (React, Vue, Svelte)
• Un meta-framework (Next.js, Nuxt, SvelteKit)
• Un bundler (Webpack, Vite, Turbopack)
• State management (Redux, Zustand, Pinia)
• Un runtime de servidor (Node.js, Deno, Bun)
• Cientos de dependencias en node_modules

Para muchas aplicaciones esto es excesivo. No todo necesita ser una SPA con hidratacion parcial y server components.

La alternativa: HTML sobre HTTP

El stack Go + Templ + HTMX propone una arquitectura mas simple:

1. El servidor (Go) procesa la logica y devuelve HTML
2. Los templates (Templ) generan ese HTML de forma tipada y composable
3. El cliente (HTMX) agrega interactividad intercambiando fragmentos de HTML con el servidor

No hay JSON APIs, no hay serializacion/deserializacion, no hay estado duplicado entre cliente y servidor.

Go: el backend

Go es un lenguaje compilado creado por Google que destaca por:

• net/http en la stdlib: no necesitas Express ni frameworks externos para crear un servidor HTTP completo
• Compilacion a binario unico: tu aplicacion entera es un solo archivo ejecutable
• Rendimiento: maneja miles de conexiones concurrentes con goroutines
• Simplicidad: 25 palabras clave, sin magia, codigo explicito

http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
    fmt.Fprint(w, "<h1>Hola mundo</h1>")
})
http.ListenAndServe(":3000", nil)

Con 4 lineas tienes un servidor HTTP funcional.

Templ: templates tipados

Templ es un lenguaje de templates para Go que se compila a codigo Go nativo. A diferencia de html/template de la stdlib:

• Type-safe: el compilador detecta errores en tus templates
• Composable: puedes crear componentes reutilizables como en React
• Autocompletado: soporte completo en el editor con LSP
• Rendimiento: se compila a Go, sin parsing en runtime

// saludo.templ
templ Saludo(nombre string) {
    <div class="saludo">
        <h1>Hola, { nombre }</h1>
        <p>Bienvenido a la aplicacion</p>
    </div>
}

Esto genera una funcion Go que puedes llamar desde tu handler:

func handleSaludo(w http.ResponseWriter, r *http.Request) {
    componente := Saludo("Artiko")
    componente.Render(r.Context(), w)
}

HTMX: interactividad sin JavaScript

HTMX permite que cualquier elemento HTML haga peticiones HTTP y actualice el DOM. Se usa con atributos HTML:

<button hx-get="/api/tareas" hx-target="#lista" hx-swap="innerHTML">
    Cargar tareas
</button>
<div id="lista">
    <!-- aqui aparecen las tareas -->
</div>

Al hacer clic, HTMX:

1. Hace un GET a /api/tareas
2. Recibe HTML del servidor
3. Reemplaza el contenido de #lista con la respuesta

No escribiste JavaScript. El servidor devuelve HTML renderizado, no JSON.

Comparativa con otros stacks

Aspecto	Go+Templ+HTMX	React/Next.js	Go+html/template	Laravel/Rails
Lenguaje servidor	Go	JavaScript/TS	Go	PHP/Ruby
Templates tipados	Si (Templ)	Si (JSX/TSX)	No	No
JavaScript necesario	Minimo (HTMX)	Mucho	Manual	jQuery/Turbo
Binario final	Si	No (Node)	Si	No
Dependencias	Pocas	Cientos	Pocas	Muchas
Curva de aprendizaje	Media	Alta	Media	Media
Interactividad	Fragmentos HTML	Virtual DOM	Manual	Turbo/Livewire

Que vamos a construir

A lo largo de este tutorial construiremos una Todo List completa con:

• Listado de tareas con estado (pendiente/completada)
• Crear nuevas tareas sin recargar la pagina
• Editar tareas inline
• Eliminar con confirmacion
• Filtrar por estado (todas, pendientes, completadas)
• Busqueda en tiempo real
• Estilos con CSS puro (sin Tailwind)

Todo esto con un binario Go unico que puedes desplegar en cualquier servidor o contenedor Docker.

Prerequisitos

• Go basico: si nunca has usado Go, te recomendamos el tutorial de Go de este sitio
• HTML/CSS: conocimiento basico de etiquetas y selectores
• Terminal: comodidad ejecutando comandos
• Un editor: VS Code con las extensiones de Go y Templ, o cualquier editor con soporte LSP

Si sabes programar en cualquier lenguaje, puedes seguir este tutorial. Los conceptos de Go se explican en el siguiente capitulo.

Navegacion