Какво е прогресивно подобрение и защо има значение

Progressive Enhancement (PE) е мощна методология за разработване на уеб приложения.

Ето официално определение:

Прогресивното подобрение е стратегия за уеб дизайн, която набляга първо на основното съдържание на уеб страницата. След това тази стратегия постепенно добавя по-нюансирани и технически строги слоеве на презентация и функции върху съдържанието, както позволяват браузърът / интернет връзката на крайния потребител. - Уикипедия

Предложените предимства на тази стратегия са, че тя позволява на всички да получат достъп до основното съдържание и функционалност на уеб страница, използвайки всеки браузър или интернет връзка, като същевременно предоставя подобрена версия на страницата на тези с по-усъвършенстван софтуер на браузъра или по-голяма честотна лента.

И накратко ...

... дава ни основно потребителско изживяване и кръстосана съвместимост между браузърите, за да се гарантира стабилност.

let PE = "Progressive Enhancement";

Стратегията PE се състои от следните основни принципи:

  • Основното съдържание трябва да бъде достъпно за всички уеб браузъри
  • Основната функционалност трябва да бъде достъпна за всички уеб браузъри
  • Разредената, семантична маркировка съдържа цялото съдържание
  • Подобрено оформление се осигурява от външно свързан CSS
  • Подобрено поведение се осигурява от ненатрапчив външно свързан JavaScript
  • Предпочитанията на уеб браузъра за крайни потребители се спазват

Така че, когато създавате следващия си уебсайт със следващо поколение JavaScript / CSS рамки, които работят само в най- благоприятната среда за вашия код и той се счупва, когато не го получи .... това не е стратегия за прогресивно подобрение.

Вместо това имайте цел, при която разработката трябва да започне с предоставяне на основни функции, стабилност във всички браузъри и устройства и безпроблемно изживяване за потребителя, преди да въведе сложност.

PE примери

Нека да разгледаме някои от примерите, които показват как работи PE стратегията.

Уеб шрифтове

Уеб шрифтовете са невероятни и красиви, но когато потребителят е в бавна мрежа с тежък сайт, те със сигурност влошават потребителското изживяване. Дори в тази ситуация системният шрифт трябва да се използва като резервен за изобразяване на съдържание и може да бъде променен на уеб шрифт, когато и когато са заредени.

Показването на съдържание е по-добро от това да чакате уеб шрифтове - или да не получавате нищо.

Първоначален HTML

Сайтовете са заредени със скрипт. Може да бъде Angular, React или друга рамка. Когато тези скриптове са отговорни за първоначалното показване на съдържанието, вашият потребител ще вижда празната страница в браузъра или устройството, когато нещо се обърка със скриптове или когато потребителят е в бавната мрежа.

Винаги е добре да помислите за зареждане на първоначално съдържание от HTML, за да осигурите по-добро потребителско изживяване, вместо да разчитате напълно на скриптове, които тепърва ще се зареждат.

Проверка на характеристиките

Добрите сайтове винаги правят тази част. Когато използвате функция, която не се поддържа въз основа на различни браузъри или устройства, винаги проверявайте дали функцията е налична в браузъра, преди да я използвате във вашия JavaScript.

Modernizr е една популярна библиотека за откриване на функции, която може да ви помогне.

Можете да заредите допълнителни скриптове, за да заредите резервна поддръжка само когато не е налична в браузъра или устройството. По този начин можете да избегнете зареждането на допълнителни скриптове, когато те не са необходими.

Сега, защо PE?

Важни причини да се съсредоточите върху PE стратегията, преди да създадете следващото си приложение:

Силна фондация

PE се фокусира върху началото на вашия проект, използвайки само най-основните уеб технологии, преди да въведе някои от много сложните функции. Така че във всички случаи имате основата да подкрепите сложните си функции, за да сте сигурни, че работят.

След като екипът е уверен, че основният опит на сайта е стабилен и ще работи, без да разчита силно на скоростта на мрежата, браузъра и устройството, тогава можете да започнете да въвеждате слоеве от по-сложни функции или научнофантастични неща.

Стабилност

Quality Team : „Иконата за търсене не работи в страницата Safari for Offers“

Dev Team : „Ами работи на моята машина , изчиства кеша, презарежда или умира“

Quality Team (от небето): „Все още не работи, проверявате в Chrome, прекъсва се в Safari“

Dev Team : „Кога започнахме да поддържаме Safari? изчакайте…. закърпване закърпване ……… ”

if(getBrowsers() == 'safari') {
Patch.magicHelpers.searchIconMagic()
}
Patch.magicHelpers = {
searchIconMagic: function() {
// Can't share magic, doing something
 }};

“След 1 час ...... проверете сега”.

Quality Team: „Работи добре за Chrome и Safari, но не работи за Mozilla сега ... Ahhhhh !!!!!“

Е, всички сме били в това положение поне веднъж.

Разходите за стабилност и поддръжка на проект също зависят от начина, по който проектът започва. Създаването на проект с рамки и закърпването му няма да работи в дългосрочен план.

Стратегията PE ви помага да изградите силна основа за вашия проект, където вашите HTML, CSS и JS са подравнени и имат за цел да осигурят отстъпки. Те се опитват да се уверят, че не разчитате силно само на специфични функции на браузъра.

SEO и достъпност

Всеки иска да посочи приложението си на първата страница на търсачката, но е необходима последователна работа и планиране за изграждането на такива невероятни приложения. Силната основа за вашия проект гарантира, че вашето приложение се фокусира върху подхода, основан на съдържанието.

Страници построени със стратегията за PE се уверете, че основната съдържание е винаги достъпен за търсачката паяк и е готов да се индексира. Избягвайте всякакво динамично изобразяване на съдържание, което може да попречи на паяка да обхожда съдържанието ви.

Прогресивни уеб приложения(PWA) са създадени да работят за всички потребители, независимо от избора им на браузър, защото са изградени с прогресивно подобрение като основен принцип.

Заключителни мисли

Стратегията PE се фокусира върху здрава основа за вашия проект. Тази здрава основа ви помага във вашата визия за вашия продукт в дългосрочен план.

Лесно е да се включите в нова JavaScript / CSS рамка за новия си проект и да започнете да кодирате, но това може да доведе до грациозна деградация. Ще продължите да коригирате кода си с резервни копия за браузъри или устройства, които не поддържат рамки.

Въпреки че стратегията PE изисква малко повече планиране в началните етапи, тя гарантира, че вашият потребител може да изпита поне основна функционалност и в най-лошия случай. PE не е работещ в ситуации, които разчитат силно на JavaScript за постигане на определени презентации или поведение на потребителския интерфейс, но за дългосрочен проект си струва да разгледате някои аспекти на стратегията за PE.

Надява се това да даде преглед на Стратегията за прогресивно подобрение.

Чувствайте се свободни да пуснете коментар по-долу.

Благодарим ви, че прочетохте тази статия! Ако имате въпроси, изпратете ми имейл (praveend806 [at] gmail [dot] com).

Ресурси, които говорят за повече за PE и казуси:

Проектиране с прогресивно подобрение: Изграждане на мрежа, която работи за всички

Прогресивното подобрение е подход към уеб разработката, който има за цел да предостави възможно най-доброто изживяване на ... www.oreilly.com Unboring.net | Работен поток: Прилагане на прогресивно подобрение върху проект WebVR

Как направих интерактивно съдържание, което да бъде вградено в weather.com unboring.net