Directorio Espacial de la Guerra de las Galaxias: Integrando API's en JavaScript Frameworks

Los frameworks de JavaScript son muy populares y muchas personas no pueden vivir sin ellos. Los frameworks son códigos preconstruidos que manejan gran parte del código tedioso, como trabajar con el DOM o convertir sitios web en aplicaciones de una sola página. Quería aprender más sobre estos frameworks, así que hice una aplicación simple de una sola página usando React.JS y Vue.JS. También integré una API para el contenido de la aplicación. Ambos frameworks funcionan de manera diferente bajo el capó pero logran los mismos resultados.

Herramientas Web React/Redux & Vue/Vuex

Hice exactamente la misma aplicación de una sola página usando React.JS y Vue.JS. Usé Redux con React y Vuex con Vue. Esto ayudó a administrar el estado de toda la aplicación. En general, disfruté usando Vue más que React. Con React, pasé la mayor parte de mi tiempo configurándolo y uniendo todo, por otro lado, Vue hizo la configuración automáticamente y pasé la mayor parte del tiempo codificando. Esto tiene sentido ya que React no es un framework real. React es una biblioteca de JavaScript, lo que significa que es una herramienta útil para trabajar con aplicaciones de una sola página, pero carece de muchas características, como el enrutamiento.

Herramientas Web Star Wars API

Aprendí sobre la API de Guerra de las Galaxias hace un tiempo. Esto pareció una buena oportunidad para usar la API con React y Vue, ya que la API de Guerra de las Galaxias es una API de solo lectura, lo que significa que solo puedo recuperar datos de la API. La API proporcionó todo el contenido de la aplicación. Usando la administración de estado, cargué los datos una vez que se cargó la aplicación. Los datos fueron almacenados como un objeto. Esto me permitiría usar los datos sin hacer solicitudes adicionales. El contenido que necesitaba no era mucho, así que parecía un buen enfoque. Para una aplicación más grande, probablemente solo cargaría los datos que necesito en este momento o los cargaría en fragmentos.

Proceso Crear Páginas y Enrutador

Para que la aplicación se sintiera como un sitio web de varias páginas, tuve que usar un enrutador. Vue ya tiene un sistema de enrutador incorporado; sin embargo, React no lo hace y tuve que obtener un enrutador para React de otro lugar. La aplicación tiene algunas páginas. La página de inicio muestra las categorías de Guerra de las Galaxias: naves espaciales, planetas y películas. Hay una página para cada categoría. La página muestra una lista de todos los elementos de esa categoría. Al hacer clic en un elemento, se muestran más detalles sobre el elemento sin solicitar otra página del servidor.

Proceso Vinculación del contenido

Crear las páginas y trabajar con la API fue más fácil de lo que pensaba. Ahora puedo ver por qué muchos desarrolladores están usando React o Vue. Decidí dar otro paso y desafiarme. Todas las páginas eran independientes. Encontré una manera de vincular el contenido. Al principio no sabía cómo hacerlo. El proceso fue simple ya que ya tenía los datos que necesitaba y todo estaba almacenado en objetos. Al peinar los objetos pude vincular el contenido. Por ejemplo, al ver los detalles de una película, puede ver los planetas que aparecen en la película y ahora puede ver los detalles del planeta desde la página de la película.

Avanzando Nuevas Características

Esta es una aplicación simple. La aplicación no hace mucho, solo muestra datos. Se pueden agregar muchas funciones para mejorar la aplicación. Agregaría una función de autenticación que permite a los usuarios crear sus propias cuentas. Esto permitiría a los usuarios marcar varios elementos favoritos de cada categoría.

Conclusión Para Concluir

Este fue un proyecto paralelo divertido donde aprendí cómo funciona y se comporta cada marco. Aprendí cómo cada uno de los marcos maneja el estado. Disfruté trabajando con React y Vue, pero preferiría usar Vue porque tiene muchas características integradas. Pude crear la misma aplicación usando React y Vue. La aplicación se ve idéntica en ambos marcos. En mi opinión, uno no es mejor que el otro, es sobre todo preferencia. Ambos funcionan de manera diferente, pero los resultados son los mismos.