1 заметка с тегом

шаблоны

Архитектура фронтенда: конфигурации

Я долго работал над большими проектами для администирования, когда в системе есть очень много данных, и много страниц, для управления ими. Много — это, например, 500 страниц. И я использовал довольно естественный подход, когда каждая страница конфигурируется, а не программируется. Что-то вроде такого:

import ...
...

export default {
    url: "orders/:id", // Адрес страницы с подстановкой данных
    template: "formPage", // Какой шаблон страницы использовать
    data: { // Данные и обработчики данных
        value: (id) => Data.get(Orders, {id: id}, // Набор значений полей заказа с сервера
        fields: fields, // Набор полей по порядку с их параметрами, подключаемый из другого файла,
        onSave: (id) => Data.save(Orders,  {id: id})
    }
}

Это, конечно, псевдокод, но он показывает сам принцип:

  • Существует сервис Data, который умеет получать данные с сервера и отправлять их обратно. Вообще говоря, неважно, хранит ли он их на сервере, или в локалсторадж, к примеру, странице-то это неважно;
  • Существует Orders — описание того, как именно сохранять или получать заказы, внутри — просто JSON с параметрами, которые переиспользуются на разных страницах;
  • fields — это JSON-описание набора полей: в каком они порядке, как взаимосвязаны друг с другом, в каком из них какое поле из data отображается, какого они типа и так далее.

Получается, что новому разработчику вообще не нужно уметь программировать, а нужно только описать два JSON-файла:

  • Набор полей
  • По какому адресу и с какими дополнительными параметрами можно получить и записать данные о заказе на сервере.

Если к этому есть документация, или, хотя бы много примеров (а когда страниц 500, то и примеров в избытке) — это несложно, и, что важнее, очень быстро для исправления или переработки.

Всё. Как именно сохранять данные и когда отправлять их на сервер и в каком виде знает сервис Data; компоненты на странице знают, как именно отрисовывать поля ввода. Разработчику ненужно парится об отступах и расположении элементов, об отображении индикатора загрузки при сохранении и вообще о том, как устроен конкретный шаблон, достаточно просто его сконфигурировать.

Но оказалось, что этот способ используется очень редко потому, что дизайнеры рисуют разные макеты, потому, что кажется, что существующим шаблоном не решить задачу и так далее. Все эти проблемы надуманы — нужно стараться решить задачу существующими средствами, точечно дорабатывая их, когда не получается. Но это тема другой статьи