search

webreactiva-devs / tormenta-codigo-apuesta-al-clic

Crea una web con algo que no hayas usado nunca
4 stars 6 forks source link

Sergi - versión "minimal" #1

Open sergioedo opened 1 year ago

sergioedo commented 1 year ago

Pues me he lanzado al pique rápido....y con los comentarios de Dani he probado HTMX + Hyperscript, para ver cómo funciona y además hacerlo con el mínimo código posible:

https://tormenta-codigo-apuesta-al-clic-git-minimal-sergioedo.vercel.app/

De requisitos extra creo que ninguno, lo único el de la pantalla de premio, como es la misma no puedes ver el premio si no aciertas.

El código por aquí:

https://github.com/sergioedo/tormenta-codigo-apuesta-al-clic/blob/minimal/index.html

Muy interesante HTMX para trabajar todo basado en los estandares que te da HTML y el navegador, con muchas convenciones...imagino que si lo combinas bien con el backend puedes hacer cosas chulas (liga con la arquitectura de islas, ya que puedes ir mutando partes del DOM, prácticamente solo con tags). Y es todo como muy semántico y declarativo...eso sí, hay que "aprenderse" todas las convenciones, tags, etc...es otro paradigma.

Ah! y lo importante del reto, si no he contado mal....295 carácteres! (no he hecho versión vanilla JS, imagino que saldrán más...a ver si alguien más se anima)

Aquí el código, en hyperscript: https://github.com/sergioedo/tormenta-codigo-apuesta-al-clic/blob/55da1afa7794879bf62267296a65ed28017819c3/index.html#L78 https://github.com/sergioedo/tormenta-codigo-apuesta-al-clic/blob/55da1afa7794879bf62267296a65ed28017819c3/index.html#L88

sergioedo commented 1 year ago

Como llevo una semana leyendo sobre React Server Components y derivados, me he animado a probar con NextJS, para ver lo que implicaría, y eso me ha llevado a las server actions...y la sesión de usuario, mantener el estado en server...madrreeeee...(me volveré a nodejs + express con @algiodev)...cuanta salsa para tan poco...Y al final es cómo mezclar cliente y servidor, enlazar con el patrón clásico de hacer un POST a otro endpoint, que te carga otra página...o no... lo que tu quieras...pero son muchas opciones y patrones donde elegir...

App: https://tormenta-codigo-apuesta-al-clic-git-nextjs-sergioedo.vercel.app/winner Código: https://github.com/sergioedo/tormenta-codigo-apuesta-al-clic/tree/nextjs

Como se complica la cosa...no queda complejo el código, pero la de vueltas que he dado, que si un middleware, un route handler, una server action.... me queda Astro y Qwik, para valorar quien lo hace más simple...

En positivo, el ejemplo puede parecer sencillo, pero me ha hecho indagar en muchas partes de NextJs que aun no habia ni visto...Además esta versión si que acaba manteniedno el estado, y tiene la página del ganador, que sólo puedes acceder a ella cuando aciertas :)

sergioedo commented 1 year ago

Acabo la semanita y creo que lo dejo aquí...la versión minimal solo con htmx...me quedé con el gusanillo de ponerle backend, para poder dejar el htmx más limpio (solo la parte cliente). Así que como es la semana de Bun...que mejor momento para probarlo...junto con Elysia haciendo de Express.

Código del servidor: https://github.com/sergioedo/tormenta-codigo-apuesta-al-clic/blob/minimal/src/index.ts Deploy: https://apuesta-al-clic.zeabur.app/

La parte de Bun como herramienta, muy sencillo arrancar con ella. Con el framework de Elysia, algunos conceptos muy chulos (estado, derivar datos...), aunque se nota que aún le faltan cosas (la parte de la sesión la hice más o menos a mano). Pero el resultado creo que bastante sencillo conectarlo y hacer que HTMX se luzca un poco más (un poquito de hyperscript para la parte cliente, y un post con algo de azucar...)