Graceful Degradation

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

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

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

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

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

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

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

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

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

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

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

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

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