Що таке прогресивне вдосконалення та чому це важливо

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

Ось офіційне визначення:

Прогресивне вдосконалення - це стратегія веб-дизайну, яка насамперед наголошує на основному вмісті веб-сторінки. Потім ця стратегія поступово додає більш тонкі та технічно строгі рівні презентації та функції поверх вмісту, як дозволяють браузер / підключення до Інтернету кінцевого користувача. - Вікіпедія

Запропоновані переваги цієї стратегії полягають у тому, що вона дозволяє кожному отримати доступ до основного вмісту та функціональних можливостей веб-сторінки, використовуючи будь-який браузер або підключення до Інтернету, а також надає розширену версію сторінки тим, хто має більш досконале програмне забезпечення браузера або більшу пропускну здатність.

І в двох словах ...

... це дає нам базовий досвід користувача та перехресну сумісність між браузерами для забезпечення стабільності.

let PE = "Progressive Enhancement";

Стратегія ПП складається з таких основних принципів:

  • Основний вміст повинен бути доступним для всіх веб-браузерів
  • Основні функції повинні бути доступними для всіх веб-браузерів
  • Розріджена семантична розмітка містить весь вміст
  • Покращений макет забезпечується зовнішнім CSS
  • Покращена поведінка забезпечується ненав’язливим зовнішнім кодом JavaScript
  • Налаштування веб-браузера для кінцевих користувачів дотримуються

Отже, коли ви створюєте свій наступний веб-сайт із фреймворками JavaScript / CSS наступного покоління, які працюють лише в найбільш сприятливому середовищі для вашого коду, і він ламається, коли його не отримують ... це не стратегія прогресивного вдосконалення.

Натомість у вас є мета, коли розробку слід розпочати з надання базових функцій, стабільності у всіх браузерах та пристроях та безперебійного користувальницького досвіду, перш ніж вводити складність.

Приклади ПЕ

Давайте розглянемо деякі приклади, які показують, як працює стратегія PE.

Веб-шрифти

Веб-шрифти дивовижні та красиві, але коли користувач перебуває в повільній мережі з важким сайтом, він, безумовно, погіршує взаємодію з користувачем. Навіть у цій ситуації системний шрифт слід використовувати як резервний для відтворення вмісту, і його можна змінити на веб-шрифт, коли та коли вони завантажуються.

Показ вмісту краще, ніж очікування веб-шрифтів - або отримання нічого.

Початковий HTML

Сайти завантажуються сценарієм. Це може бути Angular, React або інший фреймворк. Коли ці сценарії відповідають за початкове відображення вмісту, ваш користувач побачить порожню сторінку в браузері або на пристрої, коли щось піде не так із сценаріями або коли користувач перебуває в повільній мережі.

Завжди добре подумати про завантаження початкового вмісту з HTML, щоб забезпечити кращу взаємодію з користувачами, а не повністю покладатися на сценарії, які ще не завантажуються.

Перевірка функцій

Хороші сайти завжди роблять цю частину. Використовуючи функцію, яка не підтримується на основі різних браузерів або пристроїв, завжди переконайтеся, що функція доступна у браузері, перш ніж використовувати її у своєму JavaScript.

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

Ви можете завантажувати додаткові сценарії для завантаження резервної підтримки лише тоді, коли вона недоступна у браузері чи на пристрої. Таким чином ви можете уникнути завантаження зайвих скриптів, коли вони не потрібні.

Тепер, чому ПЕ?

Важливі причини зосередитись на стратегії 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 ... Ааааа !!!!!"

Ну, ми всі хоч раз були в цій ситуації.

Витрати на стабільність та підтримку проекту також залежать від початку проекту. Налаштування проекту з фреймворками та його виправлення не буде працювати в довгостроковій перспективі.

Стратегія PE допомагає вам створити міцну основу для вашого проекту, де ваші HTML, CSS та JS вирівняні та мають на меті забезпечити зворотний зв’язок. Вони намагаються переконатися, що ви не сильно покладаєтеся лише на певні функції браузера.

SEO та доступність

Кожен хоче, щоб його програма була перелічена на першій сторінці пошукової системи, але для створення таких дивовижних додатків потрібна послідовна робота та планування . Міцний фундамент для вашого проекту гарантує, що ваша програма зосереджується на підході, що спрямований на зміст.

Сторінки , створені з допомогою стратегії PE переконайтеся , що основний зміст є завжди доступним для павука пошукової системи і готовий бути проіндексовані. Уникайте будь-якого динамічного візуалізації вмісту, який може заважати павуку сканувати ваш вміст.

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

Заключні думки

Стратегія PE фокусується на міцній основі для вашого проекту. Цей міцний фундамент допомагає вам бачити ваш продукт на довгостроковий план.

Легко підключити новий фреймворк JavaScript / CSS для вашого нового проекту та розпочати кодування, але це може призвести до витонченої деградації. Ви продовжуватимете виправляти свій код за допомогою резервних копій для браузерів або пристроїв, які не підтримують фреймворки.

Незважаючи на те, що стратегія PE вимагає трохи більше планування на початкових етапах, вона гарантує, що ваш користувач також зможе користуватися принаймні базовими функціоналами в гіршому випадку. PE не є дієвим у ситуаціях, які в значній мірі покладаються на JavaScript для досягнення певних презентацій або поведінки в інтерфейсі користувача, але для довгострокового проекту варто розглянути певні аспекти стратегії PE.

Сподіваємось, це дало огляд Стратегії прогресивного вдосконалення.

Не соромтеся залишити коментар нижче.

Дякуємо, що прочитали цю статтю! Якщо у вас виникли запитання, надішліть мені електронний лист (praveend806 [at] gmail [dot] com).

Ресурси, які говорять про більше про ПЕ та тематичні дослідження:

Проектування з прогресивним вдосконаленням: створення Інтернету, який працює для всіх

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

Як я зробив інтерактивний контент, який буде вбудовано на weather.com unboring.net