Автоматическое формирование интерфейса по метаописанию

Букуров Алексей, HWdTech

Актуальность Схожий набор действий для создания и последующего поиска моделей

2

3

4

5

6

7

8

9

10

Задачи• Анализ структуры сайтов.• Выделение однотипных составляющих.• Реализация инструмента.

11

Модель данных

12

Model

Field Field Field

Модель данных

1313

Model

Field Field Field

Модель данных

14

Model

Fieldset

Field Field

Fieldset

Field Field

Структура метаописания{ name: “Название модели”, fieldsets: [{ name: “Название набора”, fields: [{ описание поля }, ...] }]}

15

Основные свойства поля• Тип• Название

16

Расширим метаописание... fields: [{ type: “Тип поля”, name: “Название поля” }]...

17

Как валидировать модели?

18

ПредикатыФункция, принимающая один или более аргументов и возвращающая значения булева типа.

19

Расширим метаописание... validators: [{ method: “Тип поля”, message: “Название поля”, value: “Значения для сравнения” }]...

20

Выбор следующего этапа

21

Реализация генератора

22

Реализация CMS

23

Создание интерфейса

24

Принципы BEM

25

Принципы BEM

26

“Комплетующие” блока• Шаблон• Набор стилей• Набор скриптов

27

Набор блоков• Form• Fieldset• FormF

28

P

Валидации на клиенте

29

Сложноподчиненные поля• Включение в метаописание• Реализация механизма

30

Расширим метаописание... dependencies: { “Название поля”: { “Предикат”: “Значение” } }...

31

Форма подачи1. Валидация на клиенте2. Отправление на сервер3. Валидация на сервере4. Сохранение в БД.

32

Различия форм

33

Расширим метаописание... { name: “Название поля”, query: “filter или range”, ... }...

34

Форма поиска1. Отправление на сервер2. Формирование запроса в БД3. Получение моделей из БД4. Отображение

35

Дальнейшие развитие

36

Спасибо за внимание!

37