Ander San Miguel

Desarrollador Web

08/09/2021

Diario de desarrollo. Una aplicación "moderna" con vanilla JS. Volver a empezar

Bueno, sabía antes de empezar que este momento iba a llegar, estaba haciendo un prototipo y lo sabía, pero da pena cuando llevas bastantes horas de curro tener que tirar todo (no todo, pero casi) y empezar desde cero.

La cosa iba bien, estaba avanzando a un ritmo aceptable y tenía una primera versión muy básica de lo que queria funcionando, pero me iba dejando pequeñas cosas para arreglar que tenía muy claro que iban a volver a morderme el culo más tarde. En cualquier caso no ha sido la acumulación de estas pequeñas cosas, sino una refactorización relativamente grande para solventar un problema que no había previsto.

Al final, para meterme en esa refactorización grande casi es mejor empezar desde cero y resolver parte de los problemas que iba a arrastrando.

Voy a empezar a explicar todo desde el principio que creo que me estoy precipitando...

Quiero hacer una aplicación para reproducir mi colección de música, una especie de spotify pero self-hosted, sé que existen algunos, pero ninguno marcaba todas mis casillas, así que palante.

Esta aplicación tiene que estar hecha (para sorpresa de nadie) con tecnologías web, al fin y al cabo es de lo que entiendo un poco.

Mi idea es hacer un servidor que tenga un API que funcione con GraphQL porque las veces que lo he usado me parece maravilloso (sobre todo desde el punto de vista del frontender). La arquitectura de la aplicación básica es muy sencilla, tengo en una carpeta mi colección de música razonablemente bien etiquetada, un proceso que recorre esa carpeta y recrea la estructura en una base de datos, y otro proceso que hace de servidor propiamente dicho que tira de esa base de datos y sirve el API y los archivos estáticos (carátulas y los propios archivos de música).

En una segunda fase me gustaría explorar la idea de integrarla con Snapcast y poder hacer un sistema multi-room a la vez que un servidor para cuando estoy por ahí.

En la parte del front... Pues eso: custom elements, session media api, offline cache, y lo que se me vaya ocurriendo.

Entonces, ¿cómo voy de los objetivos que me había planteado?

Bueno, ni tan mal, he hecho un prototipo básico funcional (más o menos funcional quiero decir) y la he estado usando estos meses de paron del desarrollo, así que por ese lado bien.

He aprendido cosas también, la más importante es que la peor decisión que he tomado es hacer un framework propio, mi idea de hecho no era hacerlo, pero estaba empeñado en escirbir componentes copiando hasta cierto punto el API de Vue pero usando sólo cosas nativas (esto es: no jsx, no typescript) y sin parsear el DOM, este punto es el problemático de verdad, parseando el DOM es más fácil hacer magias por debajo pero aún así se puede hacer algo majo desde el punto de vista de la experiencia del desarrollador y que no necesite ningún proceso de build ni estas cosas.

Y si creo que se pueden hacer cosas majas, ¿por qué digo que es la peor decisión que he tomado? pues basicamente por el hecho de intentar replicar lo que hacen estos frameworks, ahora en retrospectiva creo que sería más productivo si tomara un enfoque más clásico y no hacer todo en el navegador.

Por otro lado, ese era uno de los objetivos que tenía, hacer que el servidor sirviera exclusivamente el API y un puñado de archivos estáticos.

¿Y cómo lo voy a hacer al final? Pues no lo he decidido, ya veré.

Pero eso sólo ha sido una parte, el problema que me hizo perder el ritmo y hacer que dejara esto un poco de lado ha sido el soporte offline. Porque con el mismo enfoque que el resto, lo que hice fue tener una primera versión básica funcional y metí un service worker que cada vez que pedía un archivo lo guardara en el almacenamiento interno y servirlo desde allí las veces siguientes. Ok, eso es lo fácil, ¿cuál es el problema? pues que en realidad no quería eso (que también lo quería) sino una manera de controlar que canciones descargar (o encolar para descargar) y luego poder tirar de esos archivos cuando estuviera fuera de casa. Y eso tal como tenía las cosas se me iba a complicar demasiado...

Pero vamos, espero poder dedicarle más tiempo ahora (aunque sea en sesiones de desarrollo más cortas) y poder publicar la primera versión en algún momento.

Desarrollo Web

Esto es a lo que me dedico, así que es lo que más vas a encontrar en esta página.

Contacto

Esta sección está clara, si quieres contactar conmigo, este es un buen sitio.