Постепенная деградация

И ещё раз о Graceful Degradation. У нас этот термин переводится как «постепенная деградация». Понятие достаточно широкое, в общем можно сказать, что это способность системы продолжать своё функционирование в случае отказа некоторых её компонентов. И чем серьёзней отказ, тем ниже качество работы системы и работы с системой.

Эта заметка посвящена более частному случаю постепенной деградации, а именно отказоустойчивости динамических веб-интерфейсов и в ней разбирается пример построения и работы такого интерфейса.

Основная идея при проектировании таких интерфейсов заключается в следующем: «Пользователь может полноценно работать с системой и с полностью отключённым JavaScript. Однако, с включённым JavaScript ему будет намного удобней». Вопрос о том почему и насколько часто ломается JavaScript на стороне пользователя рассматривать не будем. Просто примем как данное, что возможность поломки существует, а значит нужно эту возможность предусматривать. Итак, переходим к непосредственно примеру.

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

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

Перед нами встала задача: дать пользователю возможность найти всё то же самое с помощью этой формы, даже если у него отключён/сломан JavaScript. Вот так выглядит эта же форма при отключённом JavaScript.

Естественно, частью функционала пришлось пожертвовать: никакого динамического календарика и динамического расчёта даты отъезда при отключённом JavaScript не будет. Однако, этот функционал и не являлся критичным.

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

Что же касается выбора комнат, то при отключённом JavaScript пользователю просто отображаются все возможные варианты: он может задать максимум 5 комнат, в которых может быть определённое количество взрослых и детей.

И ещё небольшая тонкость. Чтобы не смущать пользователя ненужными элементами при отключённом JavaScript, например крестиками для удаления комнат или ссылкой «Добавить номер» — эти элементы скрываются. Сокрытие происходит при помощи специального файла стилей noscript.css, который заключён в тег <noscript> и подключается только, когда JavaScript отключён.

Вот такой пример интерфейса, сделанного в соответствии с принципом graceful degradation. И небольшие выводы/советы:

• Создание отказоустойчивого интерфейса является достаточно трудоёмкой работой.
• Затраты на создание такого интерфейса намного ниже, если предусматривать отказоустойчивость с самого начала.
• В некоторых случаях приходится усложнять серверную логику, чтобы такой интерфейс работал так как нужно.
• Практически всегда усложняется клиентская логика и логика отображения.
• Так как не нужно показывать пользователю элементы, которые он не сможет использовать при отключённом JS и не нужно показывать элементы, которые избыточны при включённом JS.

Соблюдение принципа постепенной деградации позволяет пользователям (а каждый пользователь — это потенциальный клиент) иметь возможность работы с сайтом в любых ситуациях.