Автор оригинала: FreeCodeCamp Community Member.
Praven Dubey
Прогрессивное улучшение (PE) – это мощная методология для разработки веб-приложений.
Вот a формальный определение:
Предлагаемые преимущества этой стратегии заключаются в том, что он позволяет всем получать доступ к базовым содержаниям и функционалам веб-страницы, используя любой браузер или подключение к Интернету, в то же время также предоставляя расширенную версию страницы с более современными программными программами для браузера или более широкой пропускной способности.
А в двух словах …
… Это дает нам основной пользовательский опыт и перекрестный совместимость в браузерах, чтобы обеспечить Стабильность.
let PE = "Progressive Enhancement";
Стратегия PE состоит из следующих Основные принципы :
- Базовый Содержание должно быть доступно для Все веб-браузеры
- Базовый Функциональность должно быть доступно для Все веб-браузеры
- Редкий, семантическая разметка содержит все контент
- Улучшенная макет обеспечивается внешне связанными CSS
- Улучшенное поведение обеспечивается ненавязчивым, внешним связным JavaScript
- Настройки веб-браузера конечного пользователя уважаются
Поэтому, когда вы создаете следующий сайт с помощью JavaScript/CSS следующего поколения/CSS, которые работают только в большинстве Выгодная среда Для вашего кода, и он ломается, когда он не понимает … Это не прогрессивная стратегия улучшения.
Вместо этого есть цель, где разработка должна начинаться с предоставления основных функций, устойчивости к всем браузерам и устройствам, а также бесшовным опытом пользователю перед введением сложности.
PE Примеры
Давайте посмотрим на некоторые примеры, которые показывают, как работает стратегия PE.
Веб-шрифты
Веб-шрифты потрясающие и красивые, но когда пользователь находится в медленной сети с тяжелым участком, они, безусловно, унижают пользовательский опыт. Даже в этой ситуации системный шрифт должен использоваться в качестве загрязнения, чтобы сделать содержимое и может быть изменено на веб-шрифт, как и когда они загружены.
Показ контента лучше, чем ждать веб-шрифтов – или ничего не получаете.
Начальный HTML
Сайты загружены скриптом. Это может быть угловой, реагировать или какую-то другую структуру. Когда эти скрипты отвечают за исходное отображение контента, ваш пользователь будет видеть пустую страницу на браузере или устройстве, когда что-то пошло не так с скриптами или когда пользователь находится в медленной сети.
Всегда приятно рассмотреть вопрос о загрузке исходного контента от HTML, чтобы обеспечить лучший пользовательский опыт, а не полностью полагаться на скрипты, которые еще не загружаются.
Проверка функций
Хорошие сайты всегда делают эту часть. При использовании функции, которая не поддерживается на основе различных браузеров или устройств, всегда обязательно проверяйте, доступна ли функция в браузере перед использованием его в вашем JavaScript.
Модерзр Это одна популярная библиотека для обнаружения функций, которые могут вам помочь.
Вы можете загрузить дополнительные сценарии для загрузки защитной поддержки только тогда, когда она недоступна в браузере или устройстве. Таким образом, вы можете избежать загрузки дополнительных сценариев, когда они не требуются.
Теперь, почему PE?
Важные причины сосредоточиться на стратегии PE, прежде чем построить следующую заявку:
Сильный фонд
PE ориентирован на начало вашего проекта, используя только самые основные веб-технологии, прежде чем вводить некоторые из самых сложных особенностей. Таким образом, во всех случаях у вас есть фундамент, чтобы поддержать свои сложные функции, чтобы убедиться, что они работают.
После того, как команда уверена, что основной опыт сайта стабилен, и будет работать без сильно полагаться на скорость сети, браузера и устройства, затем вы можете начать вводить слои более сложных особенностей или научно-фантастики.
Устойчивость
Качественная команда : «Иконка поиск не работает в Safari для открытий на странице»
Dev Team : «Ну, это работает на Моя машина , четкий кеш, перезагрузить или умереть»
Качественная команда (с небес): «Все еще не работает, вы проверяете Chrome, это ломается на сафари»
Dev Team : «Когда мы начали поддерживать сафари? Подождите …. Исправления исправления ………»
if(getBrowsers() == 'safari') {Patch.magicHelpers.searchIconMagic()
}
Patch.magicHelpers = {searchIconMagic: function() {// Can't share magic, doing something
}};
«Через 1 час …… Проверьте сейчас».
Качественная команда : «Работаю нормально для Chrome и Safari, но теперь сломался для Mozilla … Ahhhhhh !!!!!»
Ну, мы все были в этой ситуации хотя бы один раз.
Стоимость стабильности и обслуживания проекта также зависит от того, как начинается проект. Настройка проекта с каркасами и исправлениями не будет работать в течение длительного времени.
Стратегия PE поможет вам построить сильную основу для вашего проекта, в котором выровнены ваш HTML, CSS и JS и стремится обеспечить отступы. Они пытаются убедиться, что вы не сильно полагаетесь только на конкретные функции браузера.
SEO и доступность
Каждый хочет получить их приложение, указанное на первой странице поисковой системы, но она берет Последовательная работа и планирование построить такие удивительные приложения. Сильная основа для вашего проекта гарантирует, что ваше приложение фокусируется на первом подходе контента.
Страницы, построенные с стратегией PE, убедитесь, что Основное содержание это всегда Доступно для поисковой системы Spider и готов к проиндексированию. Избегайте какого-либо динамического рендеринга контента, который может помешать паукам ползать ваше содержание.
Прогрессивные веб-приложения (PWA) сделаны для работы для всех пользователей, независимо от своего выбора браузера, потому что они построены с прогрессирующим усовершенствованием в качестве основного принципа.
Закрытие мыслей
Стратегия PE сосредоточена на сильном основании вашего проекта. Этот сильный фундамент помогает вам в вашем видении вашего продукта для долгосрочного плана.
Легко подключить к новой структуре JavaScript/CSS для вашего нового проекта и начать кодирование, но это может привести к изящной деградации. Вы будете следить за исправлением вашего кода с отблениями для браузеров или устройств, которые не поддерживают Frameworks.
Хотя стратегия PE требует немного большего планирования на начальных этапах, она также гарантирует, что ваш пользователь может испытывать хотя бы основные функциональные возможности в худшем случае. PE не работает в ситуациях, которые сильно зависят от JavaScript для достижения определенных презентаций пользовательских интерфейсов или поведения, но для долгосрочного проекта, оно того стоит рассмотреть некоторые аспекты стратегии PE.
Надеется, что это дало обзор стратегии прогрессивной усовершенствования.
Не стесняйтесь бросить комментарий ниже.
Спасибо за прочтение этой статьи! Если у вас есть какие-либо вопросы, пришлите мне электронное письмо (PRAVEEND806 [AT] Gmail [dot] com).
Ресурсы, которые говорят о большем количестве исследований PE и тематических исследований:
Проектирование с прогрессивным улучшением: построение сети, которая работает для всех Прогрессивное улучшение является подходом к веб-разработке, которое стремится доставлять наилучший возможный опыт … www.oreilly.com Unboring.net |. Рабочий процесс: применение прогрессивного улучшения на проекте WebVR Как я сделал интерактивный контент, который будет встроен на Weather.com unboring.net.net.