Graceful Degradation a Progressive Enhancement

PE i Graceful Degradation (GD) dotyczą tego samego problemu: różne przeglądarki i środowiska obsługują różne funkcje. PE buduje rozwiązanie od poziomu bazowego, a GD upraszcza rozwiązanie od poziomu najnowocześniejszego. Wybór ten wpływa na całą architekturę.

PE zaczyna od HTML na poziomie najmniejszego wspólnego mianownika, który działa wszędzie, a następnie dodaje warstwy (CSS, JS i zaawansowane funkcje) ulepszające doświadczenie w bardziej zaawansowanych przeglądarkach. Doświadczenie bazowe jest punktem odniesienia.

GD zaczyna od pełnego, nowoczesnego doświadczenia zbudowanego dla bieżących przeglądarek, a następnie dodaje mechanizmy zastępcze dla starszych przeglądarek. Doświadczenie najnowocześniejsze jest punktem odniesienia, a starsze przeglądarki otrzymują jego uproszczoną wersję.

Użytkownik IE11 może zobaczyć tę samą uproszczoną stronę w obu podejściach. Różnica dotyczy procesu i kodu: baza kodu PE to jeden zestaw HTML z progresywnie dodawanymi warstwami, natomiast baza kodu GD to nowoczesny kod oraz seria poprawek obchodzących ograniczenia starszych środowisk.

PE traktuje poziom bazowy jako źródło prawdy. Problemy z siecią, awarie skryptów i nieoczekiwane środowiska nadal prowadzą do działającej strony. GD traktuje nowoczesną ścieżkę jako normę, dlatego nieoczekiwane awarie często ujawniają się jako uszkodzone strony, a nie jako ich uproszczone wersje.

Gdy grupa docelowa w 99% korzysta z nowoczesnych przeglądarek, GD pozwala zespołowi zoptymalizować rozwiązanie pod typowy przypadek i dodawać mechanizmy zastępcze dopiero w razie potrzeby. W przypadku narzędzi wewnętrznych lub wyspecjalizowanych aplikacji ze znanymi użytkownikami może to być pragmatyczny wybór — dyscyplina PE stanowi dodatkowy narzut.

Publiczne witryny konsumenckie korzystają z PE: użytkownicy i ich urządzenia są nieznani, a dostępność i SEO mają znaczenie. Wewnętrzne pulpity działające na znanym zestawie przeglądarek mogą korzystać z GD bez większych strat. Nie ma jednego właściwego rozwiązania.

Rzeczywiste projekty łączą oba podejścia: renderują podstawowy HTML po stronie serwera (PE dla ścieżki krytycznej) i dostarczają duży pakiet JS, który go ulepsza (mechanizmy zastępcze w stylu GD dla starszych przeglądarek). Każdy wybór należy podejmować świadomie, zamiast bezrefleksyjnie stosować jedną strategię.

Zespoły stosujące PE kładą nacisk na SSR, semantyczne oznaczenia i odporne punkty końcowe. Zespoły stosujące GD koncentrują się na transpilerach, polyfillach i warunkowym tworzeniu pakietów. Oba stosy dostarczają coś starszym przeglądarkom; różnica filozoficzna polega na tym, który poziom bazowy kształtuje architekturę.

Należy udokumentować macierz obsługiwanych przeglądarek i wskazać, która strategia ma zastosowanie. „Używamy PE: witryna działa w każdej przeglądarce obsługującej HTML przy wyłączonym JS” albo „Używamy GD: pełne doświadczenie w najnowszych dwóch wersjach Chrome/Firefox/Safari, podstawowy wariant tylko do odczytu w IE11”. Oba podejścia są prawidłowe; niejednoznaczność jest największym zagrożeniem.

PE wymaga większego nakładu pracy projektowej na początku, ale oznacza mniej prac utrzymaniowych w dłuższej perspektywie: poziom bazowy rzadko się psuje. GD kosztuje mniej na początku, ale więcej w dłuższej perspektywie, gdy przybywa polyfilli i shimów. Należy wybrać podejście z uwzględnieniem przewidywanego okresu życia projektu.

Jaka jest kluczowa różnica między Progressive Enhancement a Graceful Degradation?

PE zaczyna się od uniwersalnego poziomu bazowego opartego na HTML i stopniowo go ulepsza, natomiast GD zaczyna od nowoczesnego doświadczenia i stopniowo dodaje warianty zastępcze. PE jest bardziej odporne i przyjazne dostępności, a GD można szybciej wdrożyć w przypadku znanych odbiorców korzystających z nowoczesnych przeglądarek. Wyboru należy dokonać świadomie, kierując się odbiorcami, i udokumentować obsługiwaną macierz.