
Постепенная деградация
- 28 сентября 2013
- 4 мин
- 7 801
И ещё раз о Graceful Degradation. У нас этот термин переводится как «постепенная деградация». Понятие достаточно широкое, в общем можно сказать, что это способность системы продолжать своё функционирование в случае отказа некоторых её компонентов. И чем серьёзней отказ, тем ниже качество работы системы и работы с системой.
Эта заметка посвящена более частному случаю постепенной деградации, а именно отказоустойчивости динамических веб-интерфейсов и в ней разбирается пример построения и работы такого интерфейса.
Основная идея при проектировании таких интерфейсов заключается в следующем: «Пользователь может полноценно работать с системой и с полностью отключённым JavaScript. Однако, с включённым JavaScript ему будет намного удобней». Вопрос о том почему и насколько часто ломается JavaScript на стороне пользователя рассматривать не будем. Просто примем как данное, что возможность поломки существует, а значит нужно эту возможность предусматривать. Итак, переходим к непосредственно примеру.
На одном из практически завершённых на момент публикации поста проектов существует форма поиска отелей и номеров. Эта форма играет одну из ключевых ролей в приложении, так как вся работа пользователей с сайтом начинается именно с неё. На скриншоте изображена эта форма при включённом JavaScript.

Поля «Страна», «Город», «Район» связаны друг с другом и в зависимости от значения одного из них динамически подгружаются значения других полей. К полю «Дата заезда» привязан динамический календарик. При изменении количества ночей динамически происходит расчёт даты выезда. Список номеров также «оживлён» для большего удобства. Можно добавлять/удалять номера, при выборе ненулевого количества детей появляются выпадающие списки, в которых можно выбрать возраст ребёнка. Можно сказать, что «оживлёние» формы делает её достаточно удобной для пользователя.
Перед нами встала задача: дать пользователю возможность найти всё то же самое с помощью этой формы, даже если у него отключён/сломан JavaScript. Вот так выглядит эта же форма при отключённом JavaScript.

Естественно, частью функционала пришлось пожертвовать: никакого динамического календарика и динамического расчёта даты отъезда при отключённом JavaScript не будет. Однако, этот функционал и не являлся критичным.
Самой сложной оказалась задача обеспечить возможность последовательного выбора страны, города и района, тем более, что эти параметры являются самыми важными для поиска. Решение было найдено следующее: в форме были предусмотрены две дополнительных кнопки «Загрузить города» и «Загрузить районы», в серверный скрипт добавлена дополнительная логика обработки формы. То есть скрипт на сервере понимал, когда нужно начинать поиск, а когда подгрузить дополнительную информацию в форму.
Что же касается выбора комнат, то при отключённом JavaScript пользователю просто отображаются все возможные варианты: он может задать максимум 5 комнат, в которых может быть определённое количество взрослых и детей.
И ещё небольшая тонкость. Чтобы не смущать пользователя ненужными элементами при отключённом JavaScript, например крестиками для удаления комнат или ссылкой «Добавить номер» — эти элементы скрываются. Сокрытие происходит при помощи специального файла стилей noscript.css
, который заключён в тег <noscript>
и подключается только, когда JavaScript отключён.
Вот такой пример интерфейса, сделанного в соответствии с принципом graceful degradation. И небольшие выводы/советы:
- Создание отказоустойчивого интерфейса является достаточно трудоёмкой работой.
- Затраты на создание такого интерфейса намного ниже, если предусматривать отказоустойчивость с самого начала.
- В некоторых случаях приходится усложнять серверную логику, чтобы такой интерфейс работал так как нужно.
- Практически всегда усложняется клиентская логика и логика отображения.
- Так как не нужно показывать пользователю элементы, которые он не сможет использовать при отключённом JS и не нужно показывать элементы, которые избыточны при включённом JS.
Соблюдение принципа постепенной деградации позволяет пользователям (а каждый пользователь — это потенциальный клиент) иметь возможность работы с сайтом в любых ситуациях.
Похожие статьи
Что такое семантическая вёрстка и зачем она нужна
Или почему лучше не использовать дивы и спаны для всего подряд.
Когда использовать флексы, а когда гриды
Коротко: гриды для каркаса сайта, флексы для контента.
Работа с Git через консоль
Как сделать форк вашего репозитория в GitHub, создать ветку и начать работу через консоль.