Сравнение с другими роутерами

Navigo — это легковесная библиотека для клиентского роутинга в JavaScript, обеспечивающая простую настройку маршрутов и управление состоянием приложения на стороне браузера. В отличие от более крупных фреймворков, таких как React Router или Vue Router, Navigo ориентирован на минимализм и гибкость, предоставляя лишь базовый набор инструментов для работы с URL, параметрами и колбэками.

Создание роутера в Navigo выглядит следующим образом:

import Navigo from 'navigo';

const router = new Navigo('/', { hash: true });

router.on('/home', () => {
  console.log('Главная страница');
});

router.on('/about', () => {
  console.log('О нас');
});

router.resolve();

Здесь видно, что роутинг строится вокруг метода on, который принимает путь и функцию-обработчик. Navigo использует либо history API, либо hash routing, что обеспечивает совместимость со старыми браузерами.

Сравнение с React Router

React Router — мощный инструмент для SPA на React, поддерживающий вложенные маршруты, динамическую подгрузку компонентов и переходы с сохранением состояния. Основные отличия:

  • Сложность и размер: React Router требует большего объёма кода и зависимостей. Navigo минимален и не зависит от конкретного фреймворка.
  • Интеграция с компонентами: React Router тесно интегрирован с React-компонентами через и . Navigo работает с любым JS-кодом, не привязан к UI-фреймворку.
  • Динамический роутинг: React Router поддерживает вложенные и условные маршруты. В Navigo вложенные маршруты реализуются вручную через колбэки и условные проверки.

Пример условного маршрута в Navigo:

router.on('/profile/:userId', ({ userId }) => {
  fetch(`/api/user/${userId}`)
    .then(res => res.json())
    .then(data => renderProfile(data));
});

Сравнение с Vue Router

Vue Router предлагает декларативный подход и глубокую интеграцию с Vue. Отличительные моменты:

  • Реактивность: Vue Router автоматически обновляет компоненты при изменении маршрута, благодаря реактивной системе Vue. Navigo требует явного вызова функций рендера.
  • Lazy Loading: Vue Router встроенно поддерживает ленивую загрузку компонентов через import(). В Navigo необходимо реализовать динамический импорт вручную.
  • Навигационные хуки: Vue Router имеет beforeEach, beforeResolve, afterEach для контроля переходов. Navigo предоставляет лишь базовую возможность в обработчиках маршрутов.

Пример динамической загрузки в Navigo:

router.on('/dashboard', () => {
  import('./dashboard.js').then(module => module.initDashboard());
});

Сравнение с другими легковесными роутерами

Существуют альтернативы типа Page.js, Director, Navigo выделяется компактностью и простотой API:

  • Page.js: синтаксис близок к Express, поддерживает middleware, но требует больше кода для базовых задач.
  • Director: старый роутер с простым API, но не обновлялся долгое время, меньшая поддержка современных браузеров.
  • Navigo: оптимальное сочетание минимального веса, поддержки hash/history и гибкого API.

Пример middleware-подобного поведения в Navigo:

function authGuard(done) {
  if (isLoggedIn()) done();
  else router.navigate('/login');
}

router.on('/dashboard', () => authGuard(() => renderDashboard()));

Плюсы и минусы Navigo по сравнению с крупными роутерами

Преимущества:

  • Минимализм и скорость загрузки.
  • Отсутствие зависимости от конкретного фреймворка.
  • Простота динамического роутинга.
  • Поддержка hash и history API одновременно.

Недостатки:

  • Нет встроенной реактивности и компонентов.
  • Ограниченные навигационные хуки.
  • Необходимость ручного управления состоянием при сложных приложениях.
  • Меньше документации и примеров, чем у крупных фреймворков.

Оптимальные сценарии использования

Navigo подходит для:

  • Малых SPA без сложной логики навигации.
  • Проектов, где важен минимальный размер бандла.
  • Сайтов с простыми маршрутами и динамическим контентом.

Для крупных приложений с вложенными маршрутами, ленивой загрузкой компонентов и сложными переходами лучше рассматривать React Router или Vue Router.

Оглавление