Тимур Хазамов
Спустившийся с гор инженер-программист
СКБ Контур
Кратко о моем опыте с DnD
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
} );
</script>
Ожидание
срок выполнения - 1 месяц
- Взять библиотечку из npm
- Запилить фичи
- Забыть про задачу и заняться
серьезными делами
Реальность
спустя 6 месяцев
- Это тормозит
- Это вешает браузер
- Это не работает
- А это вообще все ломает
- ...
- Никогда в жизни не браться
за задачу с драг-н-дропом
React DnD
Почему react-dnd?
- Разработал Ден Абрамов
- Не было альтернатив
- Разработал Ден Абрамов
Почему react-dnd?
- Разработал Ден Абрамов
- Нет альтернатив
- Разработал Ден Абрамов
Что это за зверь такой?
DragDropContext
DropTarget
DragSource
DropTarget
DragSource
DragSource
DragSource
DragDropContext
DropTarget
DragSource
DropTarget
DragSource
DragSource
DragSource
Advanced Feature - DragLayer
DragDropContext
- Это интерфейс
- Не поставляется вместе с библиотекой
- Нужен для возможности использования разного api
- HTML5 DnD
- Touch Api
- Test
DropTarget
- High-order component
- Обрабатывает drop и hover элементов над ним
- Знает о типах элементов, которые могут быть перетащены на него
- Регистрирует перетаскивания только этих типов
- High-order component
- Делает элемент draggable
- Имеет определенный тип
- Регистрирует начало и конец перетаскивания и состояние isDragging
- Может быть вложен в другой DragSource
DragSource
Задача 1
Карта и иконки на карте
DropTarget
MapIcon
MapIcon
NewMapIcon
Cats rules the world
Cats are smartest animals ever
You are a stupid kitten for a cat
Cats or dogs? That is a question
Задача 2
DropTarget
DropTarget
DragSource/DropTarget
DragSource/DropTarget
DragSource/DropTarget
DragSource/DropTarget
DragSource/DropTarget
DropTarget
DropTarget
DragSource/DropTarget
DragSource/DropTarget
DragSource/DropTarget
SomeImage
DragSource/DropTarget
DropTarget
DropTarget
DragSource/DropTarget
DragSource
DragSource/DropTarget
DragSource/DropTarget
Placeholder
SomeImage
Мои проблемы
Много кода в методах компонент
const moveItem = (
state: State,
sourceItemId: string,
sourceListId: string
targetPosition: number,
targetListId: string
): State => compose(
placeItem(sourceItemId, targetListId, targetPosition),
removeItem(sourceListId, sourceItemId)
)(state)
Отсутствие тестов
Буквально жил на страничке документации
Создавайте абстракции
Пишите высокоуровневые компоненты
react-beautiful-dnd
В итоге
- Библиотека низкоуровневая
- Обширное и сложное апи
- Придется писать много кода
- очень много
- Лучше сразу написать несколько высокоуровневых компонент для типовых ситуаций
- Сортировка вертикального списка
- Перемещение элементов на карте
- По возможности делать фичи использующие DnD в последнюю очередь
- многие задачи можно решить и кнопочками
В итоге
- Выделяйте изменения стейта в отдельные функции
- Пишите высокоуровневые компоненты
- Пишите тесты
Спасибо за внимание!
React DnD
By t1mmaas
React DnD
- 1,545