Menu

Arquitectura de Apps escalables en Angular

angulararchitecture - April 30, 2018 por Carlos Rojas | Edita este Post.

A medida que tu aplicacion va creciendo y vas creando más y más componentes cada vez es mas dificil saber quien cambia el estado de los datos. En esta ocasión quiero mostrar una arquitectura mantenible para Apps que superen los 100 componentes.

Para ilustrar este escenario consideremos lo siguiente:

Tenemos una taberna la cual sirve a sus clientes basado en su inventario, esta taberna tiene también personal el cual se encarga de atender a los comensales cada dia.

Para mantener el ejemplo simple vamos a enfocarnos en una simple parte del sistema la cual es la interacción entre el personal y el inventario y a partir de esto diseñar algo que pueda ser aplicado al resto del sistema.

Personal

Empecemos por analizar el personal. El personal que atiende la taberna esta divido en 2 roles principales:

Un administrador el cual es quien esta pendiente del inventarioy se lo comunica al resto del staff igualmente si se esta agotando lo comunica a los proveedores.

Adicionalmente, en nuestro personal tenemos otros roles los cuales son los meseros y el resto del staff que no interactuan directamente con el inventario sino que lo hacen a través del administrador.

y en perspectiva podriamos ver algo asi.

Inventario

En cuanto al inventario podemos identificar varios procesos los cuales debemos tener en cuenta:

  • Administrador inicia un pedido.
  • Alerta a los proveedores del pedido.
  • Proveedores confirman recibido.
  • Proveedores llenan la orden de existencia.
  • Proveedores envían nueva existencia.
  • El administrador es notificado cuando llega el pedido.

y en perspectiva tendriamos algo como esto.

Escalabilidad

Nuestro sistema debe estar diseñado para escalar, es decir ahora basicamente es un solo restaurante.

Pero se ha obtenido una inversión y se va a aumentar el numero de restaurantes dentro de la ciudad y posiblemente en el pais.

Por eso debemos tener en mente.

  • Modelo escalable con pasos claros.
  • No sorpresas. Sin problemas en el proceso.
  • Separación de responsabilidades es clave.
  • Mantenible, Eficiente, Predictivo.
  • Crecimiento sea fácil.
  • Un proceso fácil de revision.

Ahora miremos algunos conceptos de Angular y como vamos a cambiar una pequeña parte de su arquitectura para darle paso a un State Management mas escalable REDUX.

Aca podemos observar 3 grandes bloques en la Arquitectura de Apps construidas con Angular. Los modulos que es la manera en que agrupamos caracteristicas de nuestras aplicaciones (Dashboard, Usuarios, Reportes, etc). Los componentes que son los ladrillos que combinamos en nuestra App. y un tercero que normalmente no tenemos en cuenta por que Angular se encarga de esto por nosotros, el state management. Lo importante en notar aca es que en los componentes estamos manejando dos clases presentational y container los cuales nos van a ayudar a mantener una fuente global de todo.

y con esto en mente podemos decir que podemos convertir…

en esto.

Recuerda que si quieres aprender más sobre esto debes empezar a aprender sobre NgRX

Espero este Post sea de utilidad :)

¡Compártelo!