How to speed up component frontend development using a product approach: Runiti's experience

% tree
.
├── cart.vue
├── config.ts
├── events
│   ├── OnItemAdded.ts
│   ├── OnItemAddedConfirmed.ts
│   └── index.ts
└── specs
    ├── events.json
    └── events.yaml

The component file is located in the root cart.vue directory events with generated events, directory specs with OpenAPI and AsyncAPI documentation.

Let's look at an example of a shopping cart component. To implement it with a separate development team we will need:

1) Events that are triggered in parent components (a separate command may be responsible for them).

2) Functional requirements and design (this is all clear).

Events

Separately, we need to consider the mechanism of events inside the component, as well as the consumption of events from outside. In our example, such an event is OnItemAdded.

class OnItemAdded {
   private _userId?: string;
   private _itemId?: string;
   private _quantity?: number;
   private _additionalProperties?: Map<string, any>;
    constructor(input: {
     userId?: string,
     itemId?: string,
     quantity?: number,
     additionalProperties?: Map<string, any>,
   }) {
     this._userId = input.userId;
     this._itemId = input.itemId;
     this._quantity = input.quantity;
     this._additionalProperties = input.additionalProperties;
   }
    /**
    * Идентификатор пользователя, добавившего товар.
    */
   get userId(): string | undefined { return this._userId; }
   set userId(userId: string | undefined) { this._userId = userId; }
    /**
    * Идентификатор добавленного товара.
    */
   get itemId(): string | undefined { return this._itemId; }
   set itemId(itemId: string | undefined) { this._itemId = itemId; }
    /**
    * Количество добавленного товара.
    */
   get quantity(): number | undefined { return this._quantity; }
   set quantity(quantity: number | undefined) { this._quantity = quantity; }
    get additionalProperties(): Map<string, any> | undefined { return this._additionalProperties; }
   set additionalProperties(additionalProperties: Map<string, any> | undefined) { this._additionalProperties = additionalProperties; }
 }
 export default OnItemAdded;

As planned, a separate team implemented a button to add an item to cart, and created the AsyncAPI specification on this topic.

asyncapi: 3.0.0
info:
 title: Корзина товаров
 version: 1.0.0
 description: Спецификация для событий, связанных с добавлением товара в корзину.
channels:
 cart/product-added:
   address: cart/product-added
   messages:
     onItemAdded.message:
       name: onItemAdded
       contentType: application/json
       payload:
         type: object
         $id: onItemAdded
         properties:
           userId:
             type: string
             description: Идентификатор пользователя, добавившего товар.
           itemId:
             type: string
             description: Идентификатор добавленного товара.
           quantity:
             type: integer
             description: Количество добавленного товара.
   description: Событие, когда товар добавляется в корзину.
cart/product-added-confirmed:
   address: cart/product-added-confirmed
   messages:
     onItemAddedConfirmed.message:
       name: onItemAddedConfirmed
       contentType: application/json
       payload:
         type: object
         $id: onItemAddedConfirmed
         properties:
           userId:
             type: string
             description: Идентификатор пользователя, добавившего товар.
           itemId:
             type: string
             description: Идентификатор добавленного товара.
           quantity:
             type: integer
             description: Количество добавленного товара.
           timestamp:
             type: string
             format: date-time
             description: Время, когда товар был добавлен в корзину.
   description: Событие, подтверждающее успешное добавление товара в корзину.
operations:
 onItemAdded:
   action: send
   channel:
     $ref: '#/channels/cart~1product-added'
   summary: Обработка события добавления товара в корзину.
   messages:
     - $ref: '#/channels/cart~1product-added/messages/onItemAdded.message'
 onItemAddedConfirmed:
   action: send
   channel:
     $ref: '#/channels/cart~1product-added-confirmed'
   summary: Обработка события подтверждения добавления товара в корзину.
   messages:
     - $ref: >-
         #/channels/cart~1product-added-confirmed/messages/onItemAddedConfirmed.message
components:
 messages:
   ItemAdded:
     contentType: application/json
     payload:
       type: object
       properties:
         userId:
           type: string
           description: Идентификатор пользователя, добавившего товар.
         itemId:
           type: string
           description: Идентификатор добавленного товара.
         quantity:
           type: integer
           description: Количество добавленного товара.
   ItemAddedConfirmed:
     contentType: application/json
     payload:
       type: object
       properties:
         userId:
           type: string
           description: Идентификатор пользователя, добавившего товар.
         itemId:
           type: string
           description: Идентификатор добавленного товара.
         quantity:
           type: integer
           description: Количество добавленного товара.
         timestamp:
           type: string
           format: date-time
           description: Время, когда товар был добавлен в корзину.

At our component level, to support this specification, we can use a code generator @asyncapi/modelinawhich will generate ready-made code for us from the documentation. In a real project, most likely, these DTOs will be supplied as a single package in order to ensure type consistency within the SPA project. In our example, everything is simplified, and these generated types are stored in a separate directory events.

This approach allows the architecture team to modify event contracts independently of the code and monitor the consistency of data in the project without having to dive into the code base and work only within the specifications. This approach is very similar to the toolkit for GraphQL (for example Apollo Client), in which, after creating the schemas, we generate types and then use them throughout the project.

<template>
   <div>
       <div v-if="items">
           В корзине <i>{{ showCount }}<span v-if="isMaxReached">+</span></i> товар(ов)
       </div>
       <div v-else>
           Ваша корзина пуста
       </div>
   </div>
</template>

import { Parameters, OpenOnPos, useFeaturesConfig } from './config'
import { computed, ref } from 'vue'
import OnItemAdded from './events/OnItemAdded'

const items = ref([])

// Загрузка конфигуграции из админки компонентов
const configuration = useFeaturesConfig<Parameters>({
   MaxItemsInBasketThenPlusSign: 99,
   OpenOn: OpenOnPos.Left,
})

const isMaxReached = computed(() => {
   return configuration.MaxItemsInBasketThenPlusSign > items.value.length
})

const showCount = computed(() => {
   return isMaxReached.value ? configuration.MaxItemsInBasketThenPlusSign : items.value.length
})

function handleOnItemAdded(event: OnItemAdded) {
   // Если в дочернем компоненте добавили товар в корзину, реагируем на это
   items.value.push(event.itemId())
}

Let's now look at the logic of the component itself.

1. We use a hook useFeaturesConfig to load the external config from the widgets admin panel, and set the default parameters for our component. In the example, we set two parameters, one that determines the number of items in the cart when we draw a plus sign, and the second, on which side we will show the list of items in the cart when clicked. For simplicity, the second parameter is not implemented in the component; it is indicated more to demonstrate the capabilities.

2. Next comes the logic of the functions isMaxReached and showCount. Everything is clear with it, if there are more than 99 products, then we show the maximum number and add a plus sign.

3. Subscribe to the OnItemAdded event, which comes from the parent component, and thus monitor the world around us.

Of course, there is another option, to use the global state of the application and do the same through the store, but for ease of presentation I chose the simplest example of such an implementation.