Home
La aplicación web está creada usando React server rendering. Esta SPA esta basada 100% en Javascript. La idea es utilizar todo el potencial que brinda ReactJs.
En la imagen se puede apreciar la estructura de componentes de la SPA.
Como se puede observar en esta aplicación los datos van de arriba hacia abajo ya que lo que se busca es que todos los componentes puedan llegar a tener acceso a los datos, para cumplir su tarea.
Main:
Este es el componente principal de la aplicación, desde acá se crean los métodos que pasan como propiedades a los demás componentes.
searchSuper() Encargado de hacer la busqueda por palabras clave.
paginationNumber() Encargado de hacer la busqueda por segun paginación.
clickComic() Encargado de enviar los datos del comic donde se hizo click.
deleteFavorite() Encargado de eliminar comics favoritos.
addFavorite() Encargado de añadir nuevos comics favoritos.
resetComponentComic() Encargado de resetear el componente que muestra el comic seleccionado.
En Main se inicializan las busquedas a traves de componenDidUpdate y se van actualizando por medio de los métodos. La conexión con la API es a traves de promesas, las cuales nos brindan una gran ventaja para ir interactuando con los datos.
Header:
En este componente se añade la interfaz para la parte superior de la página. No tiene métodos ni componentos hijos.
Footer:
En este componente se añade el footer de la página. No tiene hijos que hereden propiedades.
Body:
Este componente es basicamente el medio por donde se conecta Main con los componentes que renderizan la información. Body distribuye los datos según los hijos que posee.
Characters:
Lo escencial de este componente es que se puede hacer un recorrido de todos los props que llegan al componente para despues distribuirlos en Character individuales. Encargado principalmente de actuar como contenedor de cada componente que renderiza cada personaje.
Favorites:
En este componente se pueden recorrer los comics que llegan desde Main y renderizarlos en Favorite. SelectComic: Encargado de renderizar el valor del popup donde se muestra la información del comic.
Cómo se había mencionado previamente los datos van desde Main hasta el último de los componentes que los necesite. Se escogió esta forma ya que así se tiene control sobre los métodos. La información baja por los componentes y luego regresa al método de Main, esto para mantener actualizada la información en otros componentes que no fueran hermanos de los más inferiores.
Comentarios de código:
Lo primero que noto son los comentarios de código que no se está ejecutando tanto como console.log o comentarios en varias líneas. Esos comentarios es prudente borrarlos cuando se manda a producción la aplicación ya que no aportan nada al producto final. Lo que hacen es confundir a quien lee el código.
Condicionales con objetos nulos:
Esto muchas veces no tiene mucho sentido es decir, una expresión if(servicio != NULL) podría ser más legible con algo como if( servicio ). Es decir solo se está poniendo la condicional cuando servicio exista.
Condicionales con numeros como strings:
Una buena práctica es mantener al los números como números y no como caracteres, ya que noto que se compara un id que en teoría debe ser tipo numérico con un string, lo cual no tiene mucho sentido, a menos que se necesite hacer.
En el desarrollo de software el Principio de Responsabilidad Única (siglas en inglés SRP) establece que cuando se creen los módulos o componentes de la aplicación, cada módulo o componente debe ser responsable por una sola tarea. Esto ayuda a que el código esté más organizado, legible y lo más importante, pueda ser escalable. Este principio es muy aplicado en el desarrollo de software. Librerias como Angular o React se enfocan en que se puedan componentes que cumplan una tarea específica y que además sean reusables. En Javascript en general este principio se ve aplicado cuando se desarrolla un tipo de Programación Funcional.
En mi opinión “buen” código es por ejemplo cuando el código basado en módulos o componentes reusables y que cumplen una tarea específica. Esto ya que lo hace más entendible, legible y que ocupe menos bytes en memoria.