Progressive Enhancement & Graceful Degradation
Или коротко о том, какие подходы существуют для поддержки устаревших браузеров в современном мире.
Введение
Старые версии браузеров работают медленнее, хуже загружают страницы или вовсе могут не отображать некоторые элементы страниц.
Веб технологии стремительно развиваются.
Поддержка технологически устаревшего браузера занимает непомерно много времени у веб-разработчиков, тестирование сайтов превращается в муку, а исправление ошибок бесконечно.
Internet Explorer
Прежде всего, мы говорим о мёртвом браузере
Развитие IE завершилось в 2015 году. В качестве его альтернативы был выпущен Microsoft Edge, а сама компания Microsoft объявила, что «последние функции и обновления платформ будут доступны только в Microsoft Edge».
Web-технологии
Браузеры стремительно развиваются.
Из самых важных нововведений, что произошли с нами с 2015 года, можно выделить следующие: во-первых, CSS Grid, позволяющий делать невероятные вещи с позиционированием элементов на странице, а во-вторых, — пользовательские свойства, призванные помочь людям отойти от пользования устаревшими препроцессорами CSS. �IE11 уже никогда не реализует эти новые возможности.
Список недоступных технологий в IE
Список недоступных технологий в IE
Список недоступных технологий в IE
Список недоступных технологий в IE
Список недоступных технологий в IE
Список недоступных технологий в IE
Список недоступных технологий в IE
Поддержка IE требует огромных усилий
При оценке того, сколько дополнительной работы потребуется для обеспечения обратной совместимости сайта для устаревшего браузера, такого как IE11, могут встать волосы дыбом.
Браузеры — это невероятно сложные программы. Но несмотря на то, что веб-стандарты появились еще в 1998 году, многие браузеры до сих пор с ними несовместимы. IE долгое время был самым проблемным браузером, который больше всех противоречил веб-стандартам.
Расходы на производительность
Все современные браузеры поддерживают ECMAScript 2015 (последняя версия JavaScript) и делают это уже довольно давно. Транспиляция (перевод JavaScript в более старую (и медленную) версию ECMAScript) все еще распространена в отрасли, но на данный момент необходима только для Internet Explorer. Этот процесс, позволяющий разработчикам писать современный синтаксис, который до сих пор работает в IE, отрицательно влияет на производительность.
Транспилирование
JavaScript — это язык, который развивается очень быстро, и иногда мы хотим использовать его новейшие функции, но, если наш браузер или среда не позволяют этого напрямую, нам придется транспилировать его, чтобы он мог это сделать.��Транспилирование — это преобразование исходного кода, написанного на одном языке, на другой язык с сопоставимым уровнем абстракции. Следовательно, в случае JavaScript транспилятор берет синтаксис, который старые браузеры не понимают, и превращает его в синтаксис, который они понимают.
Полифил
Полифил — это часть кода, в котором современные функции реализуются таким образом, чтобы их можно было применить для работы в старых версиях браузера.��Транспилирование — это сочетание двух слов: transforming — преобразование и compiling�— компиляция. Иногда новый синтаксис не может быть реализован с помощью полифилов, в таком случае мы используем транспилятор.�
Polyfilling vs. Transpiling
Полифиллинг на примере
Транспиляция на примере
Babel
Один из самых распространенных транспиляторов для JavaScript — это Babel. Babel — это инструмент, который был создан для помощи в переносе кода между различными версиями JavaScript и может быть установлен через диспетчер пакетов Node (npm).��Babel стал стандартом для компиляции приложений ECMAScript в версию ECMAScript, которая работает в браузерах, не поддерживающих такие приложения. Babel может компилировать другие версии ECMAScript, такие как React JSX.
Отказоустойчивость
Что сделать если нам нужен надёжный веб-сайт, который хорошо работает не только в ваших любимых браузерах, но и в нелюбимых — что не делает их менее важными?
«отказоустойчивость» - это более широкое понятие, которое применяется, не только в веб-дизайне. В общем смысле предполагает способность системы работать даже в случае отказа некоторых ее компонентов. И чем серьезнее отказ, тем ниже качество работы системы или работы с системой, но при этом основной функционал системы остается рабочим.
GRACEFUL DEGRADATION
Graceful degradation может выражаться в возможности работы с отключенным JavaScript, в акуратном отображении сайта в браузере без поддержки спецификации CSS3, в адекватном отображении сайта с отключенными картинками. Все эти отказы не должны влиять на работу веб-приложения. Однако, если все работает, то пользователю гораздо удобнее пользоваться сайтом.
GRACEFUL DEGRADATION
Если рассмотреть конкретный пример, например в области проектирования веб-интерфеса, то этот принцип можно сформулировать как «система может работать и с полностью отключенным JavaScript, но с включенным с ней будет работать намного удобнее». Вопрос не в том, может ли быть такая ситуация, что JS отключен или не функционирует полностью, или почему это происходит. Эта ситуация берется как данность. Дизайнер должен разработать такой интерфейс, который будет так же продолжать работать, пусть и с отключенным JS.
GRACEFUL DEGRADATION
Часто для следования этому принципу приходится переделывать логику серверной обработки форм. Однако, такой подход будет окупаться, если задуматься об отказоустойчивости еще на этапе планирования формы.
Соблюдение принципа graceful degradation позволяет пользователям (а каждый пользователь — это потенциальный клиент) иметь возможность работы с сайтом в любых ситуациях.
PROGRESSIVE ENHANCEMENT
Прогрессивное улучшение представляет собой принцип, который вкупе с «mobile first» создает теоретическую основу для «отзывчивого» (адаптивного) веб-дизайна. Уже его название говорит, что он позиционирует создание веб-страницы поэтапно, циклически, по принципу «от простого - к сложному». На каждом из заранее намеченных этапов внешний вид страницы должен становиться красивее, лучше и удобнее, однако весь функционал должен быть доступен изначально.
ЭТАПЫ PROGRESSIVE ENHANCEMENT
ЭТАПЫ PROGRESSIVE ENHANCEMENT
ЭТАПЫ PROGRESSIVE ENHANCEMENT
ЭТАПЫ PROGRESSIVE ENHANCEMENT
Пример реализации Progressive enhancement
Давайте рассмотрим как выглядит процесс применения подхода прогрессивного улучшение на примере формы входа
https://htmlacademy.ru/demos/1
Пример реализации изящной деградация
Ссылка «Распечатать эту страницу»
Возможно, ссылки, которые позволяют выводить на печать текущий документ бесполезны, поскольку клик на иконку принтера в браузере делает тоже самое. Однако, как показывает тестирование на реальных пользователях, в качестве последнего шага при бронировании билетов (например, на сайте авиакомпании) они хорошо олицетворяют призыв к действию. Пользователи чувствуют, что все под контролем, и получают ощущение завершенности начатого.
Пример реализации изящной деградация
Проблема с ссылками «Распечатать эту страницу» заключается в том, что в HTML нет никакой возможности связать их с функцией печати, имеющейся в браузере — для этого необходимо использовать JavaScript. В JavaScript это делается очень просто. Объект браузера window имеет метод print(), который может быть вызван для старта процедуры печати.
Ссылка «Распечатать эту страницу»
Ссылка «Распечатать эту страницу»
Этот способ будет работать, если JavaScript доступен для использования, его поддержка при отображении страниц включена, а браузер поддерживает команду print. Однако, если JavaScript недоступен (например, как на некоторых мобильных устройствах), то эта ссылка работать не будет, и клик по ней ни к чему не приведет.
Ссылка «Распечатать эту страницу»
Это создает проблему, поскольку как разработчик сайта вы обещаете своим посетителям такую функциональность. Кликнув на ссылку, которая не работает, они придут в замешательство, будут чувствовать, что их обманули, и по праву винить вас за причиненные неудобства.
Ссылка «Распечатать эту страницу»
Для смягчения этой проблемы среди разработчики сайтов принято идти по пути изящной деградации: сообщить пользователю, что ссылка может не работать, в чем может быть причина этого, и, возможно, даже предложить альтернативное решение его задачи.
Пример реализации изящной деградация
Мы объяснили пользователю, что что-то не так и как это исправить.
Однако, это предполагает, что посетитель вашего сайта:
Пример реализации изящной деградация
Этот вариант позволяет избавиться от некоторых проблем, отмеченных ранее, но предполагает, что функциональность печати и структура пунктов главного меню одинакова во всех браузерах. При этом факт остается фактом: проблема с этим вариантом решения заключается в том (и это мы должны четко понимать), что мы предлагаем функциональность, заранее зная, что она может не работать
Поскольку технически нет необходимости в ссылке «Распечатать это», то подход к этой же проблеме с использованием метода «постепенное улучшение» не предполагает, что она должна работать.
КАКОМУ ПРИНЦИПУ СЛЕДОВАТЬ?
Если сайт максимально эффективно выстроить по концепции graceful degradation, то получится приблизительно то же самое, что и было бы при использовании progressive enhancement. Так в чем же тогда разница?
КАКОМУ ПРИНЦИПУ СЛЕДОВАТЬ?
Дело в том, что построить сайт по принципу graceful degradation достаточно сложно, так как немного разработчиков могут сделать это качественно. В самом простом случае graceful degradation можно сделать следующее: создать сайт для самой последней версии браузера, а затем показать пользователям сообщение, в котором указывается, что им необходимо выполнить загрузку новой версии браузера.
КАКОМУ ПРИНЦИПУ СЛЕДОВАТЬ?
При этом разработчиков может и не волновать, как сайт выглядит в старых браузерах. �Еще одним примером плохого graceful degradation является полное отключение функциональности сайта при отключении JavaScript.
Яркий пример: �попробуйте отправить сообщение в ИСУ без JS’a ☺
КАКОМУ ПРИНЦИПУ СЛЕДОВАТЬ?
Поэтому progressive enhancement возник в ответ на некачественный graceful degradation. Проектировать такие интерфейсы стало проще и качественнее, так как есть четко сформулированные этапы создания интерфейса.
В адаптивном дизайне есть понятие «mobile first», которое в чем-то соответствует понятию progressive enhancement, так как призывает действовать от простого к сложному, от мобильных экранов до настольных ПК. Именно поэтому ключ к правильному применению адаптивного веб-дизайна зависит от умения разработчика применять принципы progressive enhancement и mobile first.