Модели данных для форм редактирования - Александр Башкирцев - Vue.js Moscow Meetup

В докладе на примере от простого к сложному, рассмотрим основные методы и архитектурные подходы работы с редактируемыми пользовательскими данными в современных frontend приложениях.

Transcript

1. ACRONIS ® 2018 !1 МОДЕЛИ ДАННЫХ 
 ДЛЯ ФОРМ РЕДАКТИРОВАНИЯ Александр Башкирцев alexander.bashkirtsev@acronis.com
2. ACRONIS ® 2018 !2 • Формы редактирования уже существующих данных • Общие архитектурные подходы • Их итеративное эволюционирование от простого к сложному • Серебряной пули не будет О чём будем говорить
3. ACRONIS ® 2018 !3 Базовый workflow • Загружаем данные с сервера Server Load Origin Data
4. ACRONIS ® 2018 !4 Базовый workflow • Изменяем • Загружаем данные с сервера Change Server Load Origin Data Modified Data
5. ACRONIS ® 2018 !5 Базовый workflow • Сохраняем • Изменяем • Загружаем данные с сервера Change Server Load Save Origin Data Modified Data
6. ACRONIS ® 2018 !6 • Получаем данные с сервера • Устанавливаем значения 
 в полях формы в соответствие 
 с полученными данными • Редактируем поля • Нажимаем кнопку с type=“submit” 
 и форма сама отправит изменённые данные на сервер 0. Классические формы Server Load Submit Form Initialize form Modify Origin data
7. ACRONIS ® 2018 !7 0. Классические формы • Использование нативных браузерных технологий • Все веб-разработчики 
 с этим сталкивались, поэтому знают и умеют • Смешивание логики 
 и представления Плюсы Минусы
8. ACRONIS ® 2018 !8 • Получаем данные с сервера 
 в виде объекта • Привязываем поля полученного объекта к элементам ввода • При вводе пользователем данных меняются значения в объекте • При нажатии "сохранить" отправляем объект на сервер 1. Изменяемые данные Server Data Form Load Save Bind Modify Data
9. ACRONIS ® 2018 !9 1. Изменяемые данные • Простота • Нельзя понять, какие были сделаны изменения • Нельзя их сбросить Плюсы Минусы
10. ACRONIS ® 2018 !10 • Получаем данные с сервера 
 и сохраняем как образец • Копируем их • Привязываем поля копии 
 к элементам ввода • При вводе пользователем данных меняются значения в копии • При нажатии "сохранить" отправляем копию на сервер 2. Изменяемая копия Server Copy Form Bind Modify Origin Load Save
11. ACRONIS ® 2018 !11 • Получаем данные с сервера 
 и сохраняем как образец • Копируем их • Привязываем поля копии 
 к элементам ввода • При вводе пользователем данных меняются значения в копии • При нажатии "сохранить" отправляем копию на сервер 2. Изменяемая копия Server Copy Form Bind Modify Origin Load Save Reset Compare
12. ACRONIS ® 2018 !12 2. Изменяемая копия • Появилась возможность 
 сравнить с оригиналом и понять, что изменилось (и откатить изменения) • Сложные объекты 
 (приходится делать глубинное сравнение и копирование) • Отладка становится сложнее • При изменении api взаимодействия с сервером приходится править приложение на всех уровнях Плюсы Минусы
13. ACRONIS ® 2018 !13 • Получаем данные с сервера 
 и по ним строим удобную модель • Копируем её • Привязываем поля копии 
 к элементам формы • При вводе пользователем данных меняются значения в копии • При нажатии "сохранить" преобразуем копию в нужный формат и отправляем на сервер 3. Преобразование + изменяемая копия Server Copy Form Bind Modify Origin Load Origin DTO Modified DTO Save
14. ACRONIS ® 2018 !14 3. Преобразование + изменяемая копия • Значительно упрощает отладку 
 и понимание происходящего • Поддерживает разный форматы загрузки и сохранения данных • Уменьшает количество изменений в приложении при изменении api • Избыточность • Двунаправленная привязка плохо согласуется 
 с однонаправленным потоком данных Плюсы Минусы
15. ACRONIS ® 2018 !15 • Получаем данные с сервера 
 и по ним строим удобную модель • Создаём объект изменений • Создаём результирующий объект 
 с наложенными изменениями • Привязываем поля результата 
 к элементам формы • Изменения добавляем 
 в объект изменений • При нажатии "сохранить" 
 преобразуем результат в нужный 
 формат и отправляем на сервер 4. Преобразование + изменения Server Merge Form Pass Origin Load Origin DTO Modified DTO Save Changes Modify
16. ACRONIS ® 2018 !16 4. Преобразование + изменения • Прозрачность • Хорошо ложится на Flux • Много кода Плюсы Минусы
17. ACRONIS ® 2018 !17 Когда что использовать? • Если нужно сделать быстро, просто и без оглядки 
 на исходные данные – подойдёт изменяемый оригинал • Если нужно больше возможностей, но сами данные простые – подойдёт изменяемая копия • Если данные сложные, подойдёт преобразованный оригинал и изменения
18. ACRONIS ® 2018 !18 Пример Приложение на Vue.js и Vuex
19. ACRONIS ® 2018 !19 • За загрузку, сохранение и преобразование данных к нужному формату отвечает внешний слой приложения Api • Его использует модуль Vuex, в котором хранятся загруженные данные, изменения и результат их слияния • Дальше данные передаются в компоненты Vue.js, 
 которые у нас называются блоками • Связь между модулями и блоками – один ко многим • На одной странице может находится много блоков Архитектура
20. ACRONIS ® 2018 !20 Пример: TodoMVC
21. ACRONIS ® 2018 !21 Пример: TodoMVC • Один модуль: todos
22. ACRONIS ® 2018 !22 Пример: TodoMVC • Один модуль: todos • Блоки 1. Добавить задачу 2. Список созданных задач 3. Панель информации 
 и действий
23. ACRONIS ® 2018 !23 Модуль
24. ACRONIS ® 2018 !24 Модуль
25. ACRONIS ® 2018 !25 Модуль
26. ACRONIS ® 2018 !26 Модуль
27. ACRONIS ® 2018 !27 • В методе жизненного цикла mounted 
 у каждого блока срабатывает вызов события LOAD • После загрузки блок todo-new может создавать
 новые задачи (мутация ADD) • Блок todo-list отображает текущие задачи, а так же позволяет 
 их модифицировать и удалять (мутации MODIFY, REMOVE) • Блок todo-footer показывает дополнительную информацию,
 а так же позволяет сбрасывать изменения (мутация RESET_CHANGES) или сохранять их на сервер (событие SAVE) Блоки
28. ACRONIS ® 2018 !28 На что обратить внимание • Список задач в модуле хранится 
 в виде ассоциативного массива. Это: 1. Необходимо для нормальной работы слияния 
 оригинала с изменениями 2. Позволяет получить доступ к каждой задаче за O(1) 3. Требует уникального ключа для каждой задачи (это минус)
29. ACRONIS ® 2018 !29 • Список задач в модуле хранится 
 в виде ассоциативного массива. Это: 1. Необходимо для нормальной работы слияния 
 оригинала с изменениями 2. Позволяет получить доступ к каждой задаче за O(1) 3. Требует уникального ключа для каждой задачи (это минус) • Флаги isLoading и isSaving помогают фильтровать 
 повторные запросы на взаимодействие с сервером На что обратить внимание
30. ACRONIS ® 2018 !30 Почему именно так? • Прозрачность • Низкая связность • Масштабируемость
31. ACRONIS ® 2018 !31 Спасибо за внимание! Александр Башкирцев alexander.bashkirtsev@acronis.com Исходный код примера bit.ly/2FGoVGu