Модели данных для форм редактирования - Александр Башкирцев - Vue.js Moscow Meetup
В докладе на примере от простого к сложному, рассмотрим основные методы и архитектурные подходы работы с редактируемыми пользовательскими данными в современных frontend приложениях.
Устанавливаем значения в полях формы в соответствие с полученными данными • Редактируем поля • Нажимаем кнопку с type=“submit” и форма сама отправит изменённые данные на сервер 0. Классические формы Server Load Submit Form Initialize form Modify Origin data
в виде объекта • Привязываем поля полученного объекта к элементам ввода • При вводе пользователем данных меняются значения в объекте • При нажатии "сохранить" отправляем объект на сервер 1. Изменяемые данные Server Data Form Load Save Bind Modify Data
и сохраняем как образец • Копируем их • Привязываем поля копии к элементам ввода • При вводе пользователем данных меняются значения в копии • При нажатии "сохранить" отправляем копию на сервер 2. Изменяемая копия Server Copy Form Bind Modify Origin Load Save
и сохраняем как образец • Копируем их • Привязываем поля копии к элементам ввода • При вводе пользователем данных меняются значения в копии • При нажатии "сохранить" отправляем копию на сервер 2. Изменяемая копия Server Copy Form Bind Modify Origin Load Save Reset Compare
сравнить с оригиналом и понять, что изменилось (и откатить изменения) • Сложные объекты (приходится делать глубинное сравнение и копирование) • Отладка становится сложнее • При изменении api взаимодействия с сервером приходится править приложение на всех уровнях Плюсы Минусы
и по ним строим удобную модель • Копируем её • Привязываем поля копии к элементам формы • При вводе пользователем данных меняются значения в копии • При нажатии "сохранить" преобразуем копию в нужный формат и отправляем на сервер 3. Преобразование + изменяемая копия Server Copy Form Bind Modify Origin Load Origin DTO Modified DTO Save
Значительно упрощает отладку и понимание происходящего • Поддерживает разный форматы загрузки и сохранения данных • Уменьшает количество изменений в приложении при изменении api • Избыточность • Двунаправленная привязка плохо согласуется с однонаправленным потоком данных Плюсы Минусы
и по ним строим удобную модель • Создаём объект изменений • Создаём результирующий объект с наложенными изменениями • Привязываем поля результата к элементам формы • Изменения добавляем в объект изменений • При нажатии "сохранить" преобразуем результат в нужный формат и отправляем на сервер 4. Преобразование + изменения Server Merge Form Pass Origin Load Origin DTO Modified DTO Save Changes Modify
сделать быстро, просто и без оглядки на исходные данные – подойдёт изменяемый оригинал • Если нужно больше возможностей, но сами данные простые – подойдёт изменяемая копия • Если данные сложные, подойдёт преобразованный оригинал и изменения
данных к нужному формату отвечает внешний слой приложения Api • Его использует модуль Vuex, в котором хранятся загруженные данные, изменения и результат их слияния • Дальше данные передаются в компоненты Vue.js, которые у нас называются блоками • Связь между модулями и блоками – один ко многим • На одной странице может находится много блоков Архитектура
у каждого блока срабатывает вызов события LOAD • После загрузки блок todo-new может создавать новые задачи (мутация ADD) • Блок todo-list отображает текущие задачи, а так же позволяет их модифицировать и удалять (мутации MODIFY, REMOVE) • Блок todo-footer показывает дополнительную информацию, а так же позволяет сбрасывать изменения (мутация RESET_CHANGES) или сохранять их на сервер (событие SAVE) Блоки
задач в модуле хранится в виде ассоциативного массива. Это: 1. Необходимо для нормальной работы слияния оригинала с изменениями 2. Позволяет получить доступ к каждой задаче за O(1) 3. Требует уникального ключа для каждой задачи (это минус)
в виде ассоциативного массива. Это: 1. Необходимо для нормальной работы слияния оригинала с изменениями 2. Позволяет получить доступ к каждой задаче за O(1) 3. Требует уникального ключа для каждой задачи (это минус) • Флаги isLoading и isSaving помогают фильтровать повторные запросы на взаимодействие с сервером На что обратить внимание
vuejsmoscow
manfredsteyer
yoshifumi_ishikura
xin9le
stoneream
chiroruxx
nealle
maroon1st
j5ik2o
blueswen
irumaru
ma_cho29
masayaaoyama
aki_iinuma
jcasabona
maltzj
addyosmani
shpigford
davidbonilla
holman
mza
destraynor
shlominoach
lara
![ACRONIS ® 2018 !31 Спасибо за внимание! Александр Башкирцев [email protected]](https://files.speakerdeck.com/presentations/ddfede533c974db8ab3d23812beb0d19/slide_30.jpg){kind=link}