La Arquitectura que me funcionó en Vue.js. * Componentes * Estados * Eventos * View Model Plática impartida en el evento Eventloop de Ciudad de México

1. LA ARQUITECTURA QUE ME
FUNCIONÓ EN VUE
@edernegrete_

2. TEMAS
▸COMPONENTES
▸PÁGINAS COMO MODELOS
▸STORE

3. COMPONENTES,
NO NAVAJAS SUIZAS

4. COMPONENTES
LISTA DE REGLAS AL MOMENTO DE HACER UN COMPONENTE
▸ Debe de ser ‘dummy’
▸ No debe de interactuar con el exterior (directamente)
▸ Deben de ser independientes
▸ Deben de ser reusables
▸ Deben de poder ser ‘estilables’ desde fuera
▸ Deben de tener sólo la lógica necesaria
▸ Deben tener tres estados: loading, success, error

5. REGLA DE ORO

6. ¿Y LA COMUNICACIÓN
ENTRE COMPONENTES,
APÁ?

8. Página
CComponente 1
Componente 2

10. PÁGINAS COMO MODELOS

12. PÁGINAS COMO MODELOS
¿DE QUÉ SE ENCARGA?
▸Proveer datos
▸Hacer llamadas a el store
▸Transformación de datos
▸Llamadas al servidor

13. STORE

15. STORE
¿QUÉ TOMAR EN CUENTA AL HACER EL STORE?
▸Single Source of Truth
▸Data is Read-only
▸¿Peticiones desde el store?
▸Dividir store por páginas

16. STORE
SINGLE SOURCE OF TRUTH
Los datos que no son compartidos
entre componentes (datos de la
aplicación), deben de estar en un sólo
lugar, separados de los componentes
que los usan. Este lugar es el store. Las
páginas deben de leer los datos de
aquí y sin mantener su propia copia de
ellos para evitar conflictos a lo largo de
la aplicación.

17. STORE
DATA IS READ ONLY

18. STORE
¿PETICIONES DESDE EL STORE?

19. STORE
¿PERO POR QUÉ NO?
▸El store se vuelve muy grande
▸Poco legible
▸Rompe el concepto de responsabilidad
única
▸Se vuelve difícil de mantener

20. STORE
¿QUÉ SÍ VA EN EL STORE?
▸Datos mostrados en nuestra vista actual
▸Los estados de la vista actual
▸Concepto de “is”
▸Datos compartidos

21. STORE
DIVIDIR STORE POR PÁGINAS
DIVIDE Y VENCERÁS

22. ¡GRACIAS!
ederng
ederyairr
ederyairr