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

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

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

3fa2f88e8c707ec90e4ecd1ac2ed023a?s=128

Vue.js Moscow Meetup

March 28, 2018
Tweet

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