Arquitectura del Frontend de los MarketPlace

Este frontend está desarrollado utilizando Angularjs versión 1.4.9 Conceptos Básicos de Angular

El frontend es una aplicación Angular compuesta por tantos módulos (module en Angular) como conceptos maneja el marketplace. En nuestro ejemplo tenemos 5 módulos:

  • Book: Encargado de la gestión de libros.
  • CartItem: Encargado de la gestión de los carritos de compra y sus items.
  • Client: Encargado de la gestión de clientes.
  • Product: Encargado de la gestión de los productos a vender. Los productos son propiedad de cada proveedor, y relacionan un libro con el precio al que lo vende dicho proveedor.
  • Provider: Encargado de la gestión de proveedores.

Componentes

Estructura interna de los módulos

Cada uno de los módulos mencionados consta de cinco elementos importantes.

  • Context: Define la URI a la cual se realizarán las peticiones RESTful.
  • Model: Define la estructura de los datos a desplegar, al igual que la manera de desplegarlos.
  • Service: Encapsula las operaciones CRUD en funciones haciendo uso de Restangular y definiendo la URI a contactar en el backend, correspondiente a la entidad del módulo.
  • Controller: Define el comportamiento que tendrá la vista. Hace uso de Service para enlazar el comportamiento de la vista con las operaciones CRUD.
  • Template: Define la vista para el módulo, los estilos visuales, la estructura de los elementos visuales y conecta dichos elementos con el comportamiento definido en el controlador.

Por ejemplo, la vista funcional del módulo BookModule tiene la siguiente estructura:

Para entender la secuencia de interacciones, los pasos que se ejecutan cuando se desea consultar un libro son:

  1. El usuario hace clic en guardar un libro.
  2. El template llama la función del controller que tiene asociado para manejar ese evento.
  3. El controller invoca el API del servicio para realizar la petición HTTP REST.
  4. El servicio hace la petición HTTP REST a la URI de Context enviando los datos del libro nuevo en el cuerpo del mensaje.

Como ilustra la imagen, el template hace uso del controller para definir el comportamiento de la vista. Así mismo, el controlador hace uso del modelo para establecer la estructura de los datos (y compartir dicha estructura con la vista), y del servicio para realizar las peticiones RESTful.

Reutilización de componentes

Gracias a la separación de las responsabilidades, es posible reutilizar partes de un módulo en otro que los necesite a través de la inyección de dependencias de AngularJS (con la única excepción de que los controladores no pueden ser inyectados). Por ejemplo, la entidad Product tiene una referencia a Book, y es posible que el Controller de Product solicite al Service de Book los registros existentes para desplegarlos en una lista de valores, cuyo valor será después asignado a la referencia.