SOP Frontend - Workspaces

Standar Operating Procedure

Procedimiento operativo estandarizado de implementaciones y estructura de espacios de trabajo Frontend.

Objetivo

• Lograr una mejor organización de los espacios de trabajo para las diferentes etapas de un proyecto, ya sea implementación o soporte y evolutivos.
• Establecer un acuerdo sobre los nombres y procedimientos en cada una de las etapas, incluyendo la configuración inicial, el control de calidad y la homologación de documentos.
• Permitir que el equipo pueda separar, simplificar y reconocer fácilmente cada uno de los puntos de manera independiente.

Alcance del documento

• Delivery
• Frontend
• Design

---

Nombramiento de Workspaces

Es importante crear todos los workspaces de acuerdo al contexto que pertenecen o si es un componente “global”.

Cada workspace a continuación, es de tipo dev. Solo puede existir un workspace de tipo prod llamado stage.

Por contexto:

• Home: home
• Listados: list
• Ficha de producto: pdp
• OrderPlaced: orderplaced
• Institucionales: inst
• Mi cuenta: account
• Lista de deseos/favoritos: wish
• Lista de comparación de productos: comparisonlist
• Página custom: custom
• Suscriptions: subs
• Checkout: checkout
• Dashboard: dashboard

Por componente:

• Header: header
• Footer: footer
• Minicart: mini
• Product Comparison: comparison
• Quickview/Preview: preview
• Login: login
• Shopper Locator: locator
• Quick Order: quickorder
• Slider/Carrusel: slider
• Searchbar: searchbar
• Shippingbar: shippingbar
• Product card: productcard
• Cucardas: highlights

B2B Suite:

La B2B Suite se compone de diversas aplicaciones en la página de “Mi cuenta” pero por su nivel de complejidad las separamos por vista:

• Mi organización: b2borg

• Mis cotizaciones y carrito: b2bquotes

• Nueva organización/Solicitud de organización: b2bneworg

Nota

• Se considera una página “institucional” a: Acerca de nosotros, Sobre nosotros, Términos y condiciones, Sucursales, Ubicación, Políticas de cambio / envío, Contacto, Preguntas frecuentes y otros similares.
• Se considera “custom” a: las páginas que no pertenecen a ningún contexto en particular, por ejemplo, aquellas que se utilizan únicamente a través de “Iframes” en ciertos desarrollos o que proporcionan una funcionalidad adicional que no existe en la tienda.
• El contexto de “list”: también incluye colecciones, resultados de búsqueda y lista de promociones.
• “login” incluye: Componente de login (todas sus opciones) y/o la página de ingreso
• “searchbar” incluye: barra de búsqueda, propiedades del intelligent search e incluso la product card exclusiva del autocomplete.

Consideraciones

Diseño:

• Los nombres de los frames principales (páginas) tienen que tener incluido entre paréntesis el nombre del workspace. Ejemplo: “Mi cuenta (account)”
• Para facilitar el entendimiento, se puede usar el nombre completo de la página o componente al que haga referencia el workspace. Ejemplo: para el workspace wl corresponde Lista de deseos/favoritos.

Delivery

• Cada desarrollador debería encargarse de solo **un/una** página, contexto o componente global.
• Si una página incluye componentes globales repetidos en otras (por ejemplo los carruseles), se debe tomar la tarea por separado. Un componente global es independiente del contexto en el que se encuentre.
• El PM debe asignar un único desarrollador encargado de preparar el stage , merge request y el despliegue de la aplicación/cambios (en caso de trabajar sobre la misma cuenta en paralelo).

Historial de versiones

Fecha	Versión	Editó	Revisó
24/08/2023	1.0	ivan.vera@e-cruce.com	ivan.vera@e-cruce.com