Visualizador de naves de Star Wars con JavaScript

Hace unos años tuve la mala fortuna de quedarme sin trabajo durante unos meses.
Afortunadamente, no fueron muchos, pero tengo que decir que lo cierto es que me fueron muy productivos.

Cuando estamos metidos en el día a día del trabajo, mal que nos pese, no nos queda demasiado tiempo para aprender cosas nuevas. Y si tenemos ese tiempo, el propio día a día del trabajo hace que no tengamos ganas de estudiar cuando terminamos la jornada.

Como os digo, hace unos años pasé unos pocos meses desempleado y los aproveché para aprender cosas nuevas y actualizar conocimientos.
De las cosas que aprendí ya os hablaré en futuras entradas. Hoy me voy a centrar en lo que actualicé: Mis conocimientos de JavaScript

Si bien es cierto que JavaScript es un lenguaje que siempre me ha gustado mucho, es cierto que su variante vanilla llevaba muchísimo sin utilizarla.
En el mundo de jQuery y los frameworks de JavaScript, es fácil olvidar que desde hace unos cuantos años, ya no es necesario utilizar librerías complejas para realizar la gran parte de las tareas que pueden hacerse con JavaScript, ya que el propio lenguaje ha ido evolucionando. Sobre todo desde 2015, el uso de librerías como jQuery se ha ido volviendo totalmente prescindible (afortunadamente).

Así que ahí estaba yo. Con ese conocimiento al alcance de la mano y tiempo libre para meterlo dentro de mi cabeza.

Tras un par de semanas de estudio y toma de contacto con nuevos conceptos y formas de hacer las cosas, me decidí a poner en practica lo aprendido y creé este visualizador de datos de las naves de La Guerra de las Galaxias.

En Internet existen multitud de APIs de datos gratuítas que se pueden emplear en proyectos de práctica y yo me decanté por usar la API de SWAPI, la cual nos ofrece muchísima información sobre las naves de Star Wars.

Como no usaba jQuery, si no sólo JavaScript Vanilla, el primer reto importante al que me enfrenté fue prescindir de Select2, un plug-in para jQuery que nos permite tener un componente de tipo SELECT con buscador integrado.
Conociendo su funcionalidad, lo que hice fue replicarla, pero usando sólo JavaScript puro.

No os voy a engañar, me costó bastante poder sacar adelante el componente, pero es cierto que fue muy gratificante el poder replicar todo su comportamiento sin usar nada más que JavaScript Vanilla.

No había demasiada cantidad de naves realmente así que pude olvidarme de paginar los resultados. El rendimiento de la página era bastante óptimo mostrando el resumen de todas ellas en la misma pantalla, por lo que pude centrarme en el detalle de cada una.

Para ello utilicé el componente template de HTML5 y una buena dósis de JS para crear todas las card necesarias para mostrar el resumen de las naves, empleando muy poco código.

El no usar un framework con routes, me llevó a pensar cual sería la mejor manera de crear una modal en la que pudiera mostrar el detalle ampliado de las naves. Finalmente me decanté por usar el atributo data, el cual me permitía pasar a la modal el endpoint de la API que me retornaba los datos de cada nave concreta.

De esta manera, terminé con un visualizador bastante funcional en poco más de 300 líneas de código entre HTML y Javacript, en el que puse en práctica muchas de las bondades del "nuevo" JavaScript.

Os invito a echarle un vistazo (El código está sin minificar) y a contarme qué os ha parecido, dejándome un mensaje en LinkedIn 😉