Легкий, быстрый и с открытым исходным кодом. Это определенно твой удачный день!

Несколько месяцев назад мне довелось поработать с Barba.js, созданным моим другом Luruke. Результаты были убедительными, но я обнаружил, что библиотеке не хватало простоты, гибкости и современности, столь же хорошей и популярной, как сейчас.

Итак, несколько недель назад в Dogstudio мы решили начать небольшое путешествие…

Мы хотели создать нашу собственную библиотеку, но с другим подходом и акцентом на наши цели, которые сделают этот вид библиотеки лучше для нас.

Так родился Highway… современный менеджер переходов, как мы его описываем.

Что такое шоссе?

Концепция Highway состоит в том, чтобы предоставить простое решение для создания и управления AJAX-навигацией между страницами веб-сайта с настраиваемыми и красивыми собственными переходами.

Почему шоссе?

Мы искали современный, простой, гибкий и легкий менеджер переходов для использования в наших проектах в Dogstudio, но проблема заключалась в том, что все эти цели не могли быть достигнуты с помощью существующие библиотеки такого типа.

Несколько недель назад мы решили не торопиться, чтобы создать Highway и сделать его открытым исходным кодом, надеясь, что это поможет вам.

Цели

Простой

Highway должен был быть достаточно простым в настройке, поэтому мы решили выполнять большую часть работы в фоновом режиме и предоставить классы разработчикам, которые они могли бы расширить, чтобы обогатить их своими пользовательский код.

В основном, если вы хотите получить простую навигацию AJAX, вам просто нужно добавить эту единственную строку после импорта Highway в ваш Javascript:

new Highway.Core();

И соблюдайте простую требуемую структуру HTML ...

<div router-wrapper>
  <div router-view></div>
</div>

Ознакомьтесь с документацией по использованию для получения дополнительной информации о настройке.

Гибкий

Highway должен был оставаться гибким, чтобы вы могли учитывать все сценарии. Как мы уже говорили в предыдущей цели, мы предоставляем разработчикам классы, которые они могут расширять и дополнять своим пользовательским кодом. Эти классы:

  • Highway.Renderer: средство визуализации по умолчанию, которое управляет изменениями DOM.
  • Highway.Transition: переход по умолчанию, который управляет анимацией.

Расширяя эти классы, вы можете создавать настраиваемые средства визуализации и настраиваемые переходы. Но помимо этих классов Highway предоставляет набор событий, которые вы можете прослушивать:

  • NAVIGATE_OUT: генерируется при начале перехода OUT.
  • NAVIGATE_IN: генерируется при начале перехода IN.
  • NAVIGATE_END: излучается при завершении перехода.
  • NAVIGATE_ERROR: генерируется при сбое HTTP-запроса.

Ознакомьтесь с документацией по рендерам для получения дополнительной информации о рендерерах.
Ознакомьтесь с документацией по переходам для получения дополнительной информации о переходах.
Ознакомьтесь с документацией по событиям для получения дополнительной информации о событиях.

Современный

При разработке Highway нам пришлось выбирать между полной совместимостью с основными браузерами, включая IE11, или использованием преимуществ ES2015 + и возможностью управлять поддержкой старых браузеров с помощью полифилов.

Наконец, мы выбрали второй вариант, потому что он позволяет разработать легкую библиотеку, вес которой не превышает 2ko при минимизации и сжатии с помощью gzip.

Также мы считаем, что не должны жить прошлым, и если эти функции доступны, мы можем их использовать, даже если они не полностью поддерживаются. Как и многие другие агентства, мы должны довести экосистему разработчиков до этой современности, даже если нам все еще нужно использовать полифилы для поддержки старых браузеров.

Ознакомьтесь с вспомогательной документацией для получения дополнительной информации о поддержке браузера.

Заключение

Мы хотели поделиться с вами нашим видением того, что мы называем менеджером переходов . Мы надеемся, что это поможет нам на ваших сайтах так же, как и нам.

Мы прилагаем все усилия, чтобы найти новые функции, которые сделают Highway лучше, и думаем, что вы можете в этом сыграть свою роль. Так что посетите наш репозиторий, нам еще есть чему у вас поучиться, так что не стесняйтесь вносить свой вклад!

Спасибо за внимание и до новых статей от команды Dogstudio до встречи!

__

О dogstudio

Dogstudio - дизайнерская и технологическая фирма с офисами в Чикаго, Брюсселе и Намюре (Бельгия), которая занимается созданием цифровых продуктов и впечатлений, которые вдохновляют людей. Среди наших клиентов, а теперь и друзей, Microsoft (Сиэтл), Музей науки и промышленности Чикаго, Crypt TV (Лос-Анджелес), Quanta Magazine (Нью-Йорк), Центр Кеннеди (Вашингтон), Chaumet (Париж).