От автора: одностраничное приложение становится все более популярным. На нем размещают интересную анимации и классные эффекты перехода. Некоторые из таких — настоящая красота.
Раньше их построение было довольно непростой задача. Вам нужно было много запросов AJAX и сложные функции обратного вызова. Нужно было много манипулировать с DOM (Document Object Model) с помощью Javascript или jQuery.
Но теперь мы можем использовать вместо AJAX WebSockets, а также мы такие фреймворки, как Angular или React. Это делает разработку одностраничного приложения проще, чем когда-либо. Кажется, это хорошо, правда?
Так почему одностраничные приложения это плохо?
Ну, это то, что может привести к серьезным трудностям, если вы подойдете к вопросу не мудро.
Для начала наиболее очевидным потенциальным камнем преткновения является зависимость от Javascript. Некоторые пользователи не имеют его. Как ваше приложение сможет работает у них?
Также есть поисковые системы. Они сканируют все URL-адреса, и у вас будет только 1. Таким образом, Google не может видеть большую часть вашего контента, что повлияет на видимость вашего сайта и трафик.
Аналитика также будет довольно сложной. Обычно взаимодействия связываются с URL-адресом, который позволяет просматривать данные в разрезе. Если у вас только 1 URL-адрес, вам придется разрабатывать сложные обходные решения, создавая виртуальные страницы.
Создание рабочего процесса требует времени и усилий. Если вы собираетесь предоставить отличный опыт и отличное одностраничное приложение, вам понадобятся несколько направлений. Это будет сложно. Это пот. Слезы. Разочарование. Будут ошибки. Будет рефакторинг.
Все браузеры имеют общее поведение. Кнопка «Назад». Кнопка «Вперед». Кнопка отмены. Фокус. Кэширование положения прокрутки. Это все, что пользователи научились подсознательно использовать, просматривая тысячи веб-сайтов. Ваше одностраничное приложение должно соответствовать тому, что знают люди, или они не будут его использовать.
Доступность и одностраничные приложения
Самая большая проблема с одностраничными приложениями — они создают ужасный опыт для людей, использующих экранные дикторы.
Существует когнитивная проблема. Пользователи должны представлять ментальную карту страницы во всех ее состояниях. Если они что-то нажмут, появится новый контент. Как ваш пользователь поймет, что изменилось? Как вы поможете им понять то, чего они не видят? Как вы сориентируете их на свою ментальную карту, которую они строили?
Изменения могут быть плавными или резкими. Иногда вся страница может меняться. Если это так, изменилось ли положение фокуса или прокрутки? Или вы оставили фокус на скрытом контенте?
Если вы загрузили весь контент в DOM и скрыли его, экранный диктор все равно его прочитает? Если я не использую мышь, могу ли я по-прежнему отображать скрытый контент? Если это так, ваш пользователь быстро потеряет контекст и станет дезориентированным.
Если вы загрузите весь контент в DOM, это вызовет проблемы с производительностью? Будет ли начальная загрузка сайта медленной? Вам нужен индикатор выполнения загрузки? Как вы предупреждаете экранного диктора о времени загрузки при его обновлении?
Я видел проблемы, когда DOM был настолько огромным, что программа для чтения с экрана фактически становилась непригодной для использования. Это было связано с использованием JAWS). Время между нажатием клавиши и прослушиванием содержимого составляло более 4 секунд. Задержка более 400 мс делает любое приложение раздражающим. Но задержка более 2 или 3 секунд делает приложение непригодным. IBM выяснила это еще в 80-е годы, иногда это называется Порогом Догерти.
Если вы не будете учитывать подобные сценарии поведения, это не просто дезориентирует пользователя. Это сделает навигацию по сайту невозможной. И в зависимости от того, в каком секторе вы работаете, это может сделать ваш сайт незаконным.
Итак, если вам нужно сделать так много дополнительной работы, чтобы ваше одностраничное приложение выглядело как обычное, почему бы не сделать сначала обычное? Неужели люди действительно хотят видеть в первую очередь фантастические переходы, а не получать хороший опыт?
Разработчики сейчас создают удивительные вещи. Я ни на минуту не сомневаюсь, что разработать доступное одностраничное приложение возможно. Но я еще не видел его.
Источник: http://www.craigabbott.co.uk/
Редакция: Команда webformyself.