Многие владельцы контентных сайтов сталкиваются с ситуацией: пользователи активно читают материалы, но не могут их сохранить для последующего просмотра. Отсутствие системы закладок снижает возвращаемость и время на сайте. При этом простая реализация часто приводит к дубликатам, медленным запросам и неудобному UX. Мы внедрили десятки таких систем — от базового toggle до сложных коллекций с синхронизацией между устройствами. Предлагаем проверенное решение на основе polymorphic связи, которое подходит для любых сущностей: статей, продуктов, вакансий, видео.
Как работает polymorphic связь в базе данных?
Ключевая задача — спроектировать базу данных так, чтобы не плодить отдельные таблицы под каждый тип контента. Polymorphic связь решает это одной универсальной таблицей bookmarks:
CREATE TABLE bookmarks (
id SERIAL PRIMARY KEY,
user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
bookmarkable_id INTEGER NOT NULL,
bookmarkable_type VARCHAR(50) NOT NULL,
created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
UNIQUE (user_id, bookmarkable_id, bookmarkable_type)
);
CREATE INDEX ON bookmarks(user_id, bookmarkable_type, created_at DESC);
Такой подход гарантирует уникальность закладки для каждого пользователя и сущности, а индекс позволяет быстро получать закладки пользователя с сортировкой по времени. В реальном проекте мы столкнулись с кейсом, когда без индекса запрос на 10000 закладок выполнялся 2 секунды — после добавления индекса время упало до 10 миллисекунд. Laravel документация: Polymorphic relations allow a model to belong to more than one other model on a single association.
Почему polymorphic связь лучше отдельных таблиц?
| Критерий | Polymorphic | Отдельные таблицы |
|---|---|---|
| Количество таблиц | 1 | N (по числу типов) |
| Сложность запросов | Один контроллер | N контроллеров |
| Расширяемость | Добавить тип — одна строка | Новая таблица + код |
| Производительность | Один индекс | N индексов |
Polymorphic подход сокращает объём кода в 3–5 раз и упрощает поддержку. При появлении нового типа контента (например, видео) достаточно добавить запись в bookmarkable_type — без миграций БД.
Пошаговый план внедрения
- Анализ и проектирование БД — 0.5 дня. Определяем типы сущностей, создаём миграцию.
- Реализация Laravel API — 0.5–1 день. Контроллер toggle, валидация, документация.
- Создание React компонента — 0.5–1 день. Оптимистичный UI, доступность.
- Интеграция и тестирование — 0.5 дня. Юнит-тесты, ручное тестирование.
- Деплой и документация — 0.5 дня. Инструкция для разработчика, деплой на сервер.
Как реализован toggle API на Laravel?
API построен на одном эндпоинте, который переключает состояние закладки. Используем контроллер с методами toggle и index:
class BookmarkController extends Controller
{
public function toggle(Request $request, string $type, int $id): JsonResponse
{
$existing = Bookmark::where([
'user_id' => auth()->id(),
'bookmarkable_type' => $type,
'bookmarkable_id' => $id,
])->first();
if ($existing) {
$existing->delete();
return response()->json(['bookmarked' => false]);
}
Bookmark::create([
'user_id' => auth()->id(),
'bookmarkable_type' => $type,
'bookmarkable_id' => $id,
]);
return response()->json(['bookmarked' => true], 201);
}
public function index(Request $request): JsonResponse
{
$bookmarks = Bookmark::where('user_id', auth()->id())
->when($request->type, fn($q) => $q->where('bookmarkable_type', $request->type))
->with('bookmarkable')
->latest()
->paginate(20);
return response()->json($bookmarks);
}
}
Обратите внимание: метод index поддерживает фильтрацию по типу и пагинацию — это важно для страницы «Мои закладки». Без with('bookmarkable') вы получите N+1 запросов, что неприемлемо при высокой нагрузке.
Если вам нужна такая система — закажите реализацию под ключ.
Пример React компонента с оптимистичным UI
function BookmarkButton({ type, id, initialBookmarked }: BookmarkProps) {
const [bookmarked, setBookmarked] = useState(initialBookmarked);
const toggle = async () => {
setBookmarked(!bookmarked);
try {
await api.post(`/api/bookmarks/${type}/${id}/toggle`);
} catch {
setBookmarked(bookmarked);
}
};
return (
<button
onClick={toggle}
aria-label={bookmarked ? 'Удалить из закладок' : 'Добавить в закладки'}
aria-pressed={bookmarked}
className={`bookmark-btn ${bookmarked ? 'bookmark-btn--active' : ''}`}
>
{bookmarked ? '🔖' : '🏷️'}
</button>
);
}
Оптимистичный UI: как избежать задержек?
Оптимистичный update даёт отклик за 0 мс, но требует обработки ошибок. В проекте для интернет-магазина мы реализовали 5 кнопок закладок на странице — пользователи отмечали, что сайт стал «летать» после внедрения такого подхода. Альтернатива — пессимистичный UI с loader, но на мобильных устройствах он увеличивает perceived latency на 300–500 мс. Используйте AbortController для предотвращения гонки запросов при быстрых кликах.
Процесс работы и сроки
| Этап | Длительность |
|---|---|
| Анализ и проектирование БД | 0.5 дня |
| Разработка API (Laravel) | 0.5–1 день |
| React-компонент и интеграция | 0.5–1 день |
| Страница «Мои закладки» с фильтрацией | 0.5 дня |
| Тестирование и деплой | 0.5 дня |
Итого: от 1 до 2 дней на базовую реализацию. Срок может увеличиться при необходимости синхронизации между устройствами или экспорта закладок. В одном из проектов потребовалось добавить поддержку WebSocket для мгновенной синхронизации между вкладками — это заняло дополнительный день.
Что входит в работу
- Документация API (OpenAPI/Swagger)
- Исходный код с комментариями (Laravel + React)
- Инструкция по развёртыванию (Docker + CI/CD)
- Гарантия работоспособности на выбранном хостинге
- 2 недели поддержки после внедрения
Типичные ошибки при реализации закладок
- Отсутствие уникального ограничения — пользователь может добавить одну страницу несколько раз, что ломает логику toggle.
- Игнорирование оптимистичного UI — задержка 0.5–1 секунды убивает ощущение отклика.
- N+1 запрос при получении
bookmarkable— обязательно используйтеwith(). - Неправильный выбор типа поля
bookmarkable_type— используйтеVARCHAR(50)с константами, чтобы избежать опечаток.
Получите консультацию по внедрению закладок на ваш сайт — оценим ваш проект за один день и предложим оптимальную архитектуру. Свяжитесь с нами для расчёта стоимости проекта. Наша команда имеет более 5 лет опыта в разработке веб-приложений и выполнила свыше 50 проектов с системами закладок и коллекций.