HTMX: ¿Es el futuro de HTML?

[@bluuweb]

Para los que quieran profundizar más aquí un libro gratis del autor de HTMX: hypermedia.systems/book/contents/ Es una lectura genial y se aprende mucho de html y sus inicios ❤ para que le den una oportunidad. PD: aún pienso en json pero poco a poco me estoy transformando jajajaja

[@hba6018]

Muy buen video. El tr se debe renderizar con un motor de plantillas, por lo que el foreach estaria, pero en el servidor, esa es la idea. El foreach como si fuese consultando data en json ya rompe con la filosofia hypermedia. Tampoco es pesado para el backend agregar los , mas pesado es serializar objetos en el lenguaje del servidor (Python, Go, etc) a json por cada request. La idea de usar json vino mas porque en los inicios del internet el ancho de banda que teniamos lo ameritaba, y se uso como alternativa pero en un principio se pensaba en consumir xml (html), de ahi que el objeto cliente Ajax en los navegadores se llamase XmlHttpRequest. Bajo la filosofia inicial de la web realmente no interesa ver la respuesta json porque no vamos a procesarla, ya viene procesada (asi funciona el SSR), mas bien es un tema de costumbre que te guste json, antes lo feo era recibir json como respuesta. Bajo la filosofia Hypermedia, la idea por la que se adopto json en sus inicios hoy en dia es innecesaria, considerando que vemos videos en 4K por IP y con un gesto de un dedo cargamos otro instantaneamente. En general fue muy buen video. Yo adotare htmx + webcomponents con lit.js (cambiándo props desde el server) para proyectos en lo adelante.

[@bluuweb]

@hb6018 amé tu explicación, lo entendí mejor que en la documentación oficial 😊, yo aún soy novato en esto y como han comentado varios, tengo json en el ADN, pero eso es bueno, ya que no soy el único pero esta nueva forma de pensar me está encantando... creo que tanto framework de js me está quemando.

[@CristianMolina]

Hola! gracias por mostrar htmx. Estuvo muy bien como intro y concuerdo que debería formar parte de HTML desde aprox. la v3 (en v2 se agregó el ). Creo que por haber trabajado tanto con "APIs REST"(que no lo son) no puedes ver que no tiene el menor sentido pedir una etiqueta de "for" o "each" en la librería. Eso es proceso que se realiza en el backend. Tienes que olvidarte de manejar "state" con JS en el frontend y comprender que la respuesta es HTML, o sea, HTML-OVER-THE-WIRE es lo más normal que debería esperar el Browser, que es un cliente de hypermedia, en este caso HTML. El autor de htmx e intercooler.js(su predecesor) tiene muchos blog posts explicando esto. Increíble como a las personas que trabajaron siempre con JS en el frontend no pueden ver esto. Si usaste HTML generado en el server desde los 90s o 2000s esto es super básico y obvio. Ah, htmx soporta "extensions" como por ej extensions/client-side-templates/ por si necesitas aún parsear un JSON con un template. Saludos!

[@bluuweb]

Tengo json en el ADN jajajaja si es un cambio de mentalidad como mencionas y se me ocurre combinar htmx con hbs (motor de plantillas) quizás por ahí va el asunto o no? o quizás todavía estoy muy perdido jajajaja de todas formas lo único que me faltaría es el tema de que con la comunicación en json puedo ocupar el backend para distintas plataformas no solo web y además de la escalabilidad y mantenimiento. Pero como vuelvo a repetir todavía hay algo que no veo y quiero descubrirlo... a todo esto... donde están los artículos del autor, para comenzar a leer. Muchas gracias Cristian!!

[@guillermonarvay8247]

Justamente me preguntaba eso, ¿qué pasa si mi aplicación tiene que hacer un request a una api que me devuelve un JSON, como lo soluciono, tenés algún ejemplo para chequear? El concepto “html over the wire” me encanta, pero a veces no tenemos control sobre el backend y debemos acomodarnos a lo que venga desde el server.

[@enriquemarin8842]

Muchas gracias por esta overview. Es evidente que esto pide un cursito. Estoy muy de acuerdo con algo que se ha dicho en los comentarios: htmx le viene muy bien a los backend para hacer frontend de una manera fácil y rápida. A propósito de algo que dijiste hacia el final del vídeo, sobre que echas de menos un foreach, eso queda solucionado con cualquier motor de plantillas de lenguaje backend en combinación con el htmx. En fin, excelente video y gracias por tu trabajo.👏👏

[@bluuweb]

Waaaa cierto, se me había olvida hbs por ejemplo! esto me huele cada vez más hermoso. Vamos a jugar en directo con esta potente combinación. Saludos!!

[@MarioAlejandroFacal]

Excelente la libreria, y mas excelente la didatica que le imprime bluu. Ahora habra que ahondar un poco mas!!

[@ecavero1]

46:52 Efectivamente. Esto es resposabilidad de los motores de plantillas de los servidores. La idea es que el servidor se encargue de devolver todo el html y css y que el xtmx se encargue de enviar y colocar la información del servidor.

[@bluuweb]

Excelente! muchas gracias por la aclaración 😊

[@lobobogard9236]

hola maestro con usted me actualice no sabia nada de spa y aprendi vue hace 4 años mas o menos y actualmente trabajo con el framework quasar y typescript, laravel a vece golang tambien y mysql pero el inicio fue dificil para mi por eso me ayudo mucho sus tutoriales solo le escribo para agradecerle que siga dando estos tutoriales y quiero ver ahora lo nuevo de htmx a ver que tal saludos.

[@hazlosipuedes]

Es una librería para programadores back qué quieren trabajar el front sin tener que aprender todo un framework... Olvidate de manipular datos en el front.. Olvidate de json... Sería como PHP, manejar todo en el back...

[@xxUnd3rtoWxx]

Simplemente hermoso xd

[@hazlosipuedes]

​@@xxUnd3rtoWxxsi madura htmx y si madura también Bun con su promesa de velocidad, adiós framework como angular qué son monoliticos... (bueno.... Solo un quizá)... Ser full stack sería más fácil ya qué te centras en aprender backend y pintar el dom sería más fácil... Estilo php laravel, django phyton...

[@bluuweb]

Lo veo pero no lo creo jajaja yo aún tengo el marketing de react metido en mi cerebro pero quiero comenzar a visualizar más alternativas, esto de htmx me está gustando jijiji

[@Deus-lo-Vuilt]

Volviste Bluu que grande , se te echa de menos 🙌🙌

[@bluuweb]

así es... se vienen la maratón de twitch jijiji

[@Deus-lo-Vuilt]

@@bluuweb lo estaré esperando ajajjaja 👑

[@ssj17dark]

Gracias brother estaba buscando un tutorial sobre HTMX gracias en verdad, saludos desde Venezuela

[@bluuweb]

Gracias a ti por estar aquí ❤️

[@mark62726]

Saludos amigo, buen video. La parte del forEach que comentaste, no es implementacion de htmx ni lo va a ser. Se puede hacer un endpoint que haga el forEach en el backend y con un get, traerte por ejemplo la lista ya construida. También se pudiese hacer una plantilla html con un template engine, reemplazar valores de la plantilla y hacer lógica ahí y retornar el html ya renderizado y construido

[@arnel_glez]

La trabaje hace par de años en un proyecto de django... muy buena librería

[@luiseliasrodriguez4327]

Como siempre, gracias por otro video con excelente didáctica, lo mejor de lo mejor.

[@flexsoluciones4833]

Es una belleza htmx me ha salvado de montones de cosas

[@carlozgrafic1276]

Muchas gracias! sin embargo en el minuto 3:08 mencionas que un form en HTML solo tiene method GET y POST, sin embargo tengo un proyecto donde un form tiene el método DELETE y funciona correctamente, cabe destacar que la respuesta no esta siendo manejada por fetch.

[@bluuweb]

Queeee pero esto como es posible? jijiji developer.mozilla.org/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data

[@DGoxAn]

Esto, en mi opinión, tiene el potencial de para replantear el fullstack y hacerlo mucho más sencillo.

[@DeybisMelendez]

lo del foreach por eso he visto que mezclan htmx con alpine js.

[@Mrlexmit]

que extensión usas para el autocompletado de código?

[@bluuweb]

github copilot 😊

[@S4MBENTZ]

Lo de la tabla en realidad el backend debe devolver las filas ya construidas ya que por ahora no parece procesar json

[@bluuweb]

en twitch me están enseñando htmx así podemos subir otro video con más detalles ❤️ Saludos

[@ElkinVillalobosgrupo-ingenios]

Esto se ve interesante, esperemos sea mágico también

[@elieje1390]

Se ve Interesant...

[@santosmarte]

Para mi esto tiene futuro.

[@RicRod]

Como desarrollador backend esta tecnología es la maravilla!!!

[@snithfferx]

Huele a HTML6 verdad.. jejejeje Yo también me fijé que no tiene metodos logicos o control de flujo. talves lo vean como logica del servidor.

[@bluuweb]

HTML6 ❤️

[@GusPm]

No tiene ningún sentido que HTMX agregue soporte para loops y esas cosas, si HTMX se renderiza del lado del servidor, practicamente todos los lenguajes y frameworks del backend tienen un motor de plantillas.

[@wilsonoporto]

Bluuweb soy wilson quiero hablar contigo si se puede, fuiste mi profesor en desafio latam, se agradece si puedes hablarme

Se puede hacer con Jinja

[@Alvaro-ne6rf]

Vamos que es un php

[@jaimeandres1041]

cuando vean liveview de elixir o hotwire de rails se les va a safar un tornillo xd

[@bluuweb]

jajajajaja lo vamos a revisar 😊

[@mabreumx]

Nunca jamás HTMX podría ser un standard de HTML, esto porque sus objetivos son totalmente diferente. HTML se usa para representación, estructura y semántica de sitios web, no para dar funcionalidades e interactividad (los formularios podrían ser hasta cierto punto una excepción, pero son casos muy puntuales)

[@hba6018]

Lee sobre Hypermedia, HTMX es como se penso el internet (Hyperlink, Hypertext, XHR, XmlHttpRequest etc). Realmente Htmx esta rescatando la H y la T de HTML. Solo debes leer sobre los origenes y los estandares de internet.

[@bluuweb]

Eso justamente es lo que habla el creador, y en mi opinión tiene muy buenos argumentos, todo el libro gratis aquí: hypermedia.systems/book/contents/ para que le des una oportunidad.

[@GusPm]

Totalmente desacuerdo, de hecho si hay elementos nativos de HTML que dan interactividad, como los forms o los anchor tags. De hecho se llaman Hypermedia controls y toda la web 1.0 se construyo usándolos, antes del boom de los frameworks del frontend. Básicamente lo que los forms y los anchor hacen es hacer peticiones GET o POST que se detonan por eventos, ya se click o submit, y una vez que tienen una respuesta del backend, reemplazan la pagina completa. Lo único que esta haciendo HTMX es tomar esa idea y maximizarla para que cualquier elemento HTML pueda ser un "hypermedia control". Una vez que entiendes esto, te vuela la cabeza lo simple que es y porque la web no evoluciono a esto desde antes.

[@mikehurtado4772]

No procesa JSON

[@GusPm]

Justamente esa es la idea bro

[@marcerocharodriguez]

falta suf bro

[@mikehurtado4772]

Que una api devuelva html es una locura

[@mariobanales5194]

Sí , por eso la idea es usar un motor de plantillas, en mi caso como Java dev se ajusta perfecto a thymeleaf

[@mikehurtado4772]

@mariobanales5194 Una locura

[@allanpinkerton007]

Me has mareado cabro...me voy a hacer el de Node y ya regreso para tratar de entenderlo...

[@bluuweb]

jijiji espero que con el curso de Node quede todo clarito. Saludos!!

[@mikehurtado4772]

Profesionalmente no tiene futuro

[@mikehurtado4772]

Astro es mucho mejor

[@GusPm]

No hacen lo mismo, de hecho Astro + HTMX es una excelente combinación.