Estructurando una Tienda Masiva de Vuex

Rate this content
Bookmark

Sumérgete en la arquitectura de nuestra tienda masiva de Vuex. Esta solución siempre será fácil de escalar, leer y mantener, sin importar cuán grande sea tu aplicación.

This talk has been presented at Vue.js London Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

Orbital Witness es una startup tecnológica ubicada en Londres que trabaja en la intersección de prop tech y legal tech.

El enfoque principal de la presentación es hablar sobre la estructuración de una gran tienda UX, cómo crear una arquitectura escalable, flexible y mantenible.

Orbital Witness utiliza una arquitectura basada en módulos para manejar su tienda UX, lo que permite separar preocupaciones e aislar diferentes partes de la tienda.

Para evitar que el archivo de la tienda crezca demasiado, se utiliza la característica de módulos con el atributo 'namespaced' en true, lo que permite registrar propiedades en un espacio de nombres local y evitar referencias cruzadas accidentales.

Se recomienda utilizar ayudantes de UX como mapMutations y extraer las cadenas codificadas creando constantes que se exportan y luego se utilizan como nombres de mutación, para mantener el código limpio y fácil de mantener.

Para aplicaciones masivas, se sugiere refactorizar la estructura de carpetas dividiendo los módulos en carpetas separadas dentro de una carpeta de módulos, cada una conteniendo sus propias acciones, getters, mutaciones y tipos.

Usar el espacio de nombres en los módulos UX permite aislar y proteger las propiedades de estado y las mutaciones dentro de un módulo específico, evitando conflictos y accesos no intencionados entre diferentes partes de la tienda.

En módulos grandes, se recomienda crear archivos separados para acciones, getters y mutaciones, importando constantes de tipos para mantener el código organizado y facilitar la gestibilidad del mismo.

Domagoj Vidovic
Domagoj Vidovic
21 min
20 Oct, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La charla discute el proceso de estructurar una tienda masiva de UX utilizando módulos en Vue.js. Cubre temas como espacios de nombres, desencadenar mutaciones y mejorar el uso de la tienda con map mutations. Se destaca la importancia de refactorizar la estructura de carpetas y utilizar archivos separados para acciones, getters y mutaciones. La charla concluye mencionando la posibilidad de agregar capas adicionales para dividir mutaciones y proporcionar información de contacto para consultas adicionales.
Available in English: Structuring A Massive Vuex Store

1. Introducción a la estructuración de una gran tienda UX

Short description:

Hola, Vue.js London. Hoy hablaré sobre la estructuración de una gran tienda UX. Comenzaremos con un ejemplo de una tienda simple y la expandiremos paso a paso para resolver los desafíos de escalabilidad y mantenibilidad. Utilizaremos módulos para separar las preocupaciones y crear mini tiendas dentro de la tienda principal.

Hola, Vue.js London. Estoy muy contento de hablar aquí hoy. Mi nombre es Doma Gawidowic. Siéntanse libres de llamarme Dom porque es mucho más fácil de pronunciar. Trabajo en Orbital Witness, una startup tecnológica genial de Londres, en algún lugar entre prop tech y legal tech, y también vivo en Londres.

Hoy hablaré sobre la estructuración de una gran tienda UX. Cómo crear una architecture escalable, flexible y mantenible. Actualmente, estamos utilizando esta architecture en Orbital Witness. No tenemos ningún problema con ella. Vamos a sumergirnos.

Comenzaré con un ejemplo de una tienda simple. La iré expandiendo en cada paso y les presentaré los desafíos que necesitamos resolver y, obviamente, resolverlos. Comenzaremos con la tienda más simple posible. Estamos utilizando create store de UX y estamos creando una tienda vacía con acciones, mutaciones y getters vacíos. No los explicaré, asumo que ya los conocen. Me enfocaré en cómo crear una tienda y hacerla escalable, adecuada para su uso en aplicaciones enormes.

Ahora agreguemos algunas propiedades aquí. Por lo general, en sus aplicaciones enormes, tendrán miles de propiedades diferentes. En este momento, solo dos son suficientes, nombre de usuario y nombre de organización, y obviamente algunas mutaciones para establecer ambos. ¿Qué pasaría si este archivo tuviera miles de propiedades? Pueden imaginarlo, simplemente agregando, agregando, agregando cosas aquí, y el archivo solo se volverá más y más grande. No queremos hacer eso. Si vamos a hacer eso, ¿por qué no mantenemos todo nuestro código en app.vue y olvidamos los componentes? Bromas aparte.

Veamos cómo podemos solucionar este problema. Para hacerlo, vamos a utilizar una característica nativa de UX llamada modules. Los modules nos permiten separar las preocupaciones, aislar diferentes partes de la tienda y crear mini tiendas dentro de nuestra gran tienda. Echen un vistazo al módulo de usuario, por ejemplo, aquí tomamos todo lo relacionado con el usuario, como el nombre y su mutación para establecer ese nombre. También estamos pasando acciones y getters como un objeto vacío porque no tenemos ninguno en este momento. Y lo que es realmente importante aquí es el atributo namespaced que se establece en true. El atributo namespaced nos permite registrar esas propiedades para esa mini tienda en un espacio de nombres local, en el espacio de nombres local de ese módulo.

2. Usando Espacios de Nombres y Desencadenando Mutaciones

Short description:

En esta parte, aprendemos sobre cómo acceder a propiedades desde cualquier módulo, prevenir accesos accidentales, usar espacios de nombres y exportar módulos. También discutimos la importancia de evitar cadenas codificadas y las dos formas de desencadenar mutaciones.

De esta manera, podemos acceder a esas propiedades desde cualquier otro módulo, lo cual es bueno porque el espacio de nombres establecido en true nos impide acceder accidentalmente a algunas de las propiedades locales del modules. Podrías pensar que eso es una limitación, ¿verdad? Porque a veces realmente necesitas desencadenar algunos métodos de los diferentes modules, pero no puedes hacerlo ahora mismo. Bueno, puedes, pero necesitas tener la intención de hacerlo. Así que es posible, pero solo necesitas tener la intención. Pero esto es definitivamente bueno porque estamos evitando esos desencadenamientos accidentales. Puedes tener propiedades de estado iguales, con el mismo nombre o mutaciones, acciones, recolectores con el mismo nombre, el espacio de nombres establecido en true nos lo permite. Y su valor predeterminado es false.

De esta manera, todas las propiedades se registrarán en el espacio de nombres global. Tal vez quieras hacer eso, pero ten cuidado. El módulo de organización es literalmente lo mismo. Entonces tomamos todo lo relacionado con la organización, establecemos el espacio de nombres en true, y exportamos por defecto ese objeto. Si echamos un vistazo al archivo index.js, las cosas han cambiado un poco. Ahora tenemos el módulo de usuario y el módulo de organización. Necesitamos importarlos. Y luego necesitamos pasarlos al objeto modules. Estamos mapeando esos modules importantes a un nombre específico. Ahora mismo es usuario y organización. Esto es genial. Así que ya hemos separado nuestra tienda en diferentes modules. Están aislados. No podemos acceder a ellos por accidente, pero aún hay algo que necesitamos resolver.

Veamos, ¿cómo podemos usar estas mutaciones ahora mismo? Como desarrolladores, odiamos las cadenas codificadas. No son mantenibles. No son escalables. Si necesitas cambiar algo en tu proyecto, literalmente tienes que buscar en todo el código y reemplazarlo. Puedes hacer una búsqueda y reemplazo en todo el código y luego hacer un desastre. Es una receta para los errores. No uses cadenas codificadas. Ahora mismo, no tenemos otras opciones porque podemos desencadenar mutaciones de dos formas. La primera, accediendo directamente al objeto de la tienda y desencadenando, por ejemplo, la acción enviar mutaciones.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Bienvenido a Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Bienvenido a Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
Un Año en Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
Un Año en Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
Utilizando Rust desde Vue con WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilizando Rust desde Vue con WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Vue: Actualizaciones de Características
Vue.js London 2023Vue.js London 2023
44 min
Vue: Actualizaciones de Características
Top Content
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Vue.js London Live 2021Vue.js London Live 2021
24 min
Estado Local y Caché del Servidor: Encontrando un Equilibrio
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.

Workshops on related topic

Vue3: Desarrollo Moderno de Aplicaciones Frontend
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Top Content
Featured WorkshopFree
Mikhail Kuznetsov
Mikhail Kuznetsov
Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo usar la API de Composición de manera eficiente.

Además de las características principales de Vue3, explicaremos ejemplos de cómo usar bibliotecas populares con Vue3.

Tabla de contenidos:
- Introducción a Vue3
- API de Composición
- Bibliotecas principales
- Ecosistema Vue3

Requisitos previos:
IDE de elección (Inellij o VSC) instalado
Nodejs + NPM
Monitoreo 101 para Desarrolladores de React
React Summit US 2023React Summit US 2023
107 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Nivel de la masterclass: Intermedio
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Vue.js London Live 2021Vue.js London Live 2021
117 min
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Top Content
Workshop
Daniel Roe
Daniel Roe
Construiremos un proyecto Nuxt juntos desde cero usando Nitro, el nuevo motor de renderizado de Nuxt, y Nuxt Bridge. Exploraremos algunas de las formas en que puedes usar y desplegar Nitro, mientras construimos una aplicación juntos con algunas de las restricciones del mundo real que enfrentarías al desplegar una aplicación para tu empresa. En el camino, dispara tus preguntas hacia mí y haré lo mejor para responderlas.
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Vue.js London 2023Vue.js London 2023
137 min
TresJS crea experiencias 3D de forma declarativa con componentes Vue
Workshop
Alvaro Saburido
Alvaro Saburido
- Introducción a 3D- Introducción a WebGL- ThreeJS- Por qué TresJS- Instalación o configuración de Stackblitz- Conceptos básicos- Configuración del lienzo- Escena- Cámara- Agregar un objeto- Geometrías- Argumentos- Props- Slots- El bucle- Composable UseRenderLoop- Callbacks antes y después de la renderización- Animaciones básicas- Materiales- Material básico- Material normal- Material Toon- Material Lambert- Material estándar y físico- Metalness, roughness- Luces- Luz ambiental- Luz direccional- Luces puntuales- Sombras- Texturas- Cargar texturas con useTextures- Consejos y trucos- Misceláneo- Controles de órbita- Cargar modelos con Cientos- Depuración de tu escena- Rendimiento
Construyendo formularios Vue con VeeValidate
Vue.js London Live 2021Vue.js London Live 2021
176 min
Construyendo formularios Vue con VeeValidate
Workshop
Abdelrahman Awad
Abdelrahman Awad
En este masterclass, aprenderás cómo usar vee-validate para manejar la validación de formularios, gestionar los valores de los formularios y manejar las presentaciones de manera efectiva. Comenzaremos desde lo básico con un formulario de inicio de sesión simple hasta el uso de la API de composición y la construcción de formularios repetibles y de múltiples pasos.

Tabla de contenidos:
- Introducción a vee-validate
- Construcción de un formulario básico con componentes vee-validate
- Manejo de validación y presentaciones de formularios
- Construcción de componentes de entrada validables con la API de composición
- Arrays de campos e inputs repetibles
- Construcción de un formulario de múltiples pasos
Prerrequisitos:
Configuración de VSCode y un proyecto Vite + Vue vacío.
Construyendo Pinia desde cero
Vue.js Live 2024Vue.js Live 2024
70 min
Construyendo Pinia desde cero
Workshop
Eduardo San Martin Morote
Eduardo San Martin Morote
Sumergámonos en cómo funciona Pinia bajo el capó construyendo nuestro propio `defineStore()`. Durante este masterclass cubriremos algunos conceptos avanzados de Vue como la inyección de dependencias y los scopes de efectos. Esto te dará una mejor comprensión de la API de Composición de Vue.js y Pinia. Requisitos: experiencia en la construcción de aplicaciones con Vue y su API de Composición.