Используя SPA приложение, которые отлично работают на всех устройствах, можно удовлетворить намного большее количество пользователей, в отличие от обычного адаптивного сайта, не говоря уже о ресурсах без адаптивного дизайна вообще.
С чего все началось
Компания ранее обращалась к нам за разработкой двух концепций главной страницы сайта. Мы представили ее как промо-историю из множества картинок и иллюстраций, но на тот момент, заказчику был нужен другой формат.
Вернувшись практически через год, клиент поставил уже более глобальную задачу — обновить весь сайт целиком. Мы провели анализ основной массы посетителей старого сайта (а точнее — устройства, ОС, браузеры, разрешения, средний возраст посетителя, пол) и пришли к выводу, что оптимальным будет светлый легкий интерфейс с классическим каталогом проектов. Конечно же весь дизайн должен был быть респонсив.
Дизайн
Старый сайт:
Новый сайт:
Каталог проектов:
Карточка проекта:
Айдентика минималистична, что также удачно вписывается в сдержанный дизайн интерфейса.
Архитектура и программная часть
Разрабатывая архитектуру сайта, мы решили воплотить его в рамках SPA приложения.
Нативные приложения подняли планку пользовательского опыта на достаточно высокий уровень. Современный пользователь привык взаимодействовать с интерфейсом непрерывно, без задержек и ожиданий бесконечных загрузок новых страниц при переходах по ссылкам. Классические веб-сайты уже не могут соответствовать завышенным ожиданиям таких пользователей. Современная альтернатива классическим “многостраничным” сайтам — это SPA., веб. приложения с пользовательским опытом, близким к нативным приложениям.
Используя SPA приложение, которые отлично работают на всех устройствах, можно удовлетворить намного большее количество пользователей, в отличие от обычного адаптивного сайта, не говоря уже о ресурсах без адаптивного дизайна вообще.
Наша реализация SPA лишена “классических” недостатков этого подхода. Серверный пререндеринг страничек делает наше приложение полностью SEO-friendly. Этот же подход позволяет работать сайту даже с полностью отключенным Javascript-ом в браузере клиента.
В качестве бек.энда. для API был использован Битрикс, так как старый сайт был именно на нем, и клиент привык работать с его админкой.
Максимально упрощенная схема SPA в рамках “сферического проекта в вакууме” выглядит так:
Большое внимание было уделено каталогу проектов. Все состояния фильтра в каталоге сохраняются в адресной строке браузера. Это позволяет в полной мере без ограничений использовать функционал перехода по истории браузера, а именно, кнопки вперед и назад дают нам возможность перемещаться между состояниями фильтра, отменяя и применяя вновь какие-то параметры, или возвращаться из карточки проекта назад в каталог именно в то состояние, из которого был осуществлен переход в эту самую карточку.
Результаты
После обновления сайт стал не только современнее в плане визуальной составляющей, но и на порядок быстрее:
В среднем отклик сервера удалось уменьшить в 10 раз
Само-собой, все последующие переходы по страницам на нашем новом ресурсе стали мгновенными, спасибо SPA.
В целом Google PageSpeed положительно оценивает наши изменения:
Было:
Стало:
Выводы
Single Page Application в разы сокращает так называемые “хождения по кругу”, то есть загрузку одного и того же содержимого снова и снова, не зря же Google за 2017 год все свои основные ресурсы перевёл в приложение. Задумайтесь.
