Angular Week

Abril 24 - 28, 2018

Carlos Rojas

Web UI en Globant

@carlosrojas_o

HTML + CSS + JS

Arquitectura de Apps Escalables en Angular

Angular Week

Abril 24 - 28, 2018

Shameless Self Promotion

Angular Week

Abril 24 - 28, 2018

Shameless Self Promotion

Angular Week

Abril 24 - 28, 2018

Todd Motto

@toddmotto

Arquitectura de Apps Escalables en Angular

Minko Gechev

@mgechev

Angular Week

Cosas importantes.

Angular Week

• Responsabilidades definidas.
• Separación de Preocupaciones.
• Predictabilidad.
• Consistencia.

Perspectiva

Angular Week

Perspectiva

Angular Week

Taberna

Perspectiva

Angular Week

Taberna

Personal

Inventario

Perspectiva

Angular Week

Personal

• Recibe los pedidos.
• Comunica peticiones a otros del Personal.
• Procesos y Responsabilidades.
• Presenta opciones de la Reserva.

Perspectiva

Angular Week

• Reacciona a los Pedidos.
• Administrado por el Personal.
• Debe ser bien organizado, rapido, eficiente.
• La reserva viene de los Proveedores.

Inventario

Perspectiva

Angular Week

Taberna

• Encapsula Personal y inventario.
• Administra Proveedores.
• Mesas y Sillas.
• Gestiona a los comensales.

Perspectiva

Angular Week

Personal

Personal

Angular Week

• Responsable por inventario.
• Ordena nuevo inventario.
• Informa de nuevo inventario al resto del personal.

Administrador

Personal

Angular Week

• No gestiona existencia.
• Informa a administradores.
• Los administradores brindan información.

Meseros / Staff

Personal

Angular Week

Personal

Angular Week

• Clara comunicación.
• Fácilmente extensible.
• Roles definidos y procesos.

Perspectiva

Angular Week

Inventario

Perspectiva

Angular Week

• 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.

Personal

Angular Week

• Clara comunicación.
• Fácilmente extensible.
• Roles definidos y procesos.

Inventario

Personal

Angular Week

Ordenes

Procesos

Inventario

Administrador

Text

Perspectiva

Angular Week

Escalable

Personal

Angular Week

Taberna

Personal

Angular Week

Taberna

Angular Week

Taberna

Angular Week

Taberna

Taberna

Taberna

Taberna

Angular Week

• 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.

Angular Week

Ordenes

Procesos

Inventario

Administrador

Angular Week

Angular

Angular Week

Action

Reducer

State

Container

UI Components

Angular Week

Modulos

Componentes

State Management

Root

Feature

Shared

Lazily loaded

Eagerly loaded

Container/Stateful

Presentational/Stateless

@Input()

@Output()

One-Way Dataflow

State Tree

Reducer

Selectors

Router State

Using Entities

State Composition

Source of Truth

Angular Week

Arquitectura del Componente

Personal

Angular Week

Administrador

Personal

Responsable del Inventario.

Ordenar nuevo inventario.

Envia el inventario al Personal

No ordena inventario.

Informan al administrador.

Administrador les da información.

Personal

Angular Week

Contenedor

Presentacional

Atento al Store.

Envía acciones.

Lee información del Store.

No esta atento al Store.

Invoca la información via @Output

Lee la información via @Inputs

Personal

Angular Week

Action

Reducer

S

C

Presentación

C

C

Contenedor

Personal

Angular Week

Action

Reducer

S

C

Presentación

C

C

Contenedor

@Output

@Input

Dispatch

Select

Angular Week

Arquitectura del State Management

Personal

Angular Week

Procesos

Administrador inicia el pedido.

Alerta proveedores que se necesita inventario.

Proveedores confirman recibido.

Proveedores llenan orden de pedido.

Proveedores envían nuevo inventario.

Administrador es notificado cuando pedido llegue.

Personal

Angular Week

Procesos

• Comunicación fuera de la arquitectura del componente

• Enviar información según la intención.

• Usar operaciones inmutables con los Reducers.

• Obtener el estado para los componentes con selectores.

• Enfocarse en la inmutabilidad. onPush es rapido.

Personal

Angular Week

Action

Reducer

State

Administrador

Componente

Store

Dispatch

Render

Send to

New State

Conclusiones.

Angular Week

- REDUX no es la unica opción pero es la recomendada.

- Asegurate de tener pruebas en todas las partes para asegurar mantenibilidad.

- Usando este acercamiento el Component Tree solo consumira estados no los creara.

-No te olvides de usar onPush Strategy en tus componentes.

Gracias y Sigán Programando...

Creditos.

Angular Week

Créditos de imágenes: https://toggl.com/blog/