Hvad er progressiv forbedring, og hvorfor det betyder noget

Progressive Enhancement (PE) er en stærk metode til udvikling af webapplikationer.

Her er en formel definition:

Progressiv forbedring er en strategi for webdesign, der først understreger kernens websideindhold. Denne strategi tilføjer derefter gradvis mere nuancerede og teknisk stringente lag af præsentation og funktioner oven på indholdet, efterhånden som slutbrugerens browser / internetforbindelse tillader det. - Wikipedia

De foreslåede fordele ved denne strategi er, at den giver alle adgang til det grundlæggende indhold og funktionalitet på en webside ved hjælp af enhver browser eller internetforbindelse, samtidig med at det giver en forbedret version af siden til dem med mere avanceret browsersoftware eller større båndbredde.

Og i en nøddeskal ...

... det giver os grundlæggende brugeroplevelse og krydskompatibilitet på tværs af browsere for at sikre stabilitet.

let PE = "Progressive Enhancement";

PE-strategien består af følgende grundlæggende principper:

  • Grundlæggende indhold skal være tilgængeligt for alle webbrowsere
  • Grundlæggende funktionalitet skal være tilgængelig for alle webbrowsere
  • Sparsom, semantisk markering indeholder alt indhold
  • Forbedret layout leveres af eksternt linket CSS
  • Forbedret adfærd leveres af diskret, eksternt linket JavaScript
  • Slutbrugerens webbrowserindstillinger respekteres

Så når du bygger dit næste websted med næste generations JavaScript / CSS-rammer, der kun fungerer i det mest gunstige miljø for din kode, og det går i stykker, når det ikke får det .... dette er ikke en strategi for progressiv forbedring.

I stedet skal du have et mål, hvor udvikling skal starte med at levere grundlæggende funktioner, stabilitet på tværs af alle browsere og enheder og en problemfri oplevelse for brugeren, før der introduceres kompleksitet.

PE-eksempler

Lad os se på nogle af eksemplerne, der viser, hvordan PE-strategien fungerer.

Webskrifttyper

Webfonte er fantastiske og smukke, men når brugeren er på et langsomt netværk med et tungt sted, nedbryder de helt sikkert brugeroplevelsen. Selv i denne situation skal system skrifttype bruges som en reserve til gengivelse af indhold og kan ændres til en webskrifttype, når og når de indlæses.

At vise indhold er bedre end at vente på webskrifttyper - eller ikke få noget.

Indledende HTML

Websteder er fyldt med script. Det kan være kantet, reagere eller en anden ramme. Når disse scripts er ansvarlige for indledende visning af indhold, vil din bruger se den tomme side i browseren eller enheden, når noget gik galt med scripts, eller når brugeren er på det langsomme netværk.

Det er altid godt at overveje at indlæse indledende indhold fra HTML for at give en bedre brugeroplevelse i stedet for helt at stole på scripts, der endnu ikke er indlæst.

Funktionskontrol

Gode ​​websteder gør altid denne del. Når du bruger en funktion, der ikke understøttes baseret på forskellige browsere eller enheder, skal du altid kontrollere, om funktionen er tilgængelig i browseren, før du bruger den i din JavaScript.

Modernizr er et populært bibliotek til funktionsdetektering, som kan hjælpe dig.

Du kan kun indlæse yderligere scripts for at indlæse reserveunderstøttelse, når den ikke er tilgængelig i browseren eller enheden. På denne måde kan du undgå at indlæse ekstra scripts, når de ikke er påkrævet.

Nu, hvorfor PE?

Vigtige grunde til at fokusere på PE-strategien, inden du bygger din næste applikation:

Stærk fundament

PE fokuserer på starten af ​​dit projekt ved kun at bruge de meget basale webteknologier, inden de introducerer nogle af de meget komplekse funktioner. Så i alle tilfælde har du grundlaget til at bakke op om dine komplekse funktioner for at sikre, at de fungerer.

Når holdet er overbevist om, at kerneoplevelsen på webstedet er stabil og fungerer uden stærkt at stole på netværkshastighed, browser og enhed, kan du begynde at introducere lag med mere komplekse funktioner eller sci-fi-ting.

Stabilitet

Quality Team : "Søgeikon fungerer ikke i Safari for Tilbud-siden"

Dev Team : “Nå det fungerer på min maskine , ryd cache, genindlæs eller dø”

Quality Team (fra himlen): “Stadig fungerer ikke, du tjekker på Chrome, det bryder på Safari”

Dev Team : “Hvornår begyndte vi at støtte Safari? vente…. lappe lappe ……… ”

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

“Efter 1 time …… tjek nu”.

Quality Team: “Fungerer fint for Chrome og Safari, men brød for Mozilla nu ... Ahhhhh !!!!!”

Nå, vi har alle været i denne situation mindst én gang.

Omkostninger til et projekts stabilitet og vedligeholdelse afhænger også af, hvordan projektet starter. At oprette et projekt med rammer og lappe det fungerer ikke på lang sigt.

PE-strategien hjælper dig med at opbygge et stærkt fundament for dit projekt, hvor din HTML, CSS og JS er justeret og sigter mod at give tilbagefald. De forsøger at sikre, at du ikke kun stoler på browserspecifikke funktioner.

SEO og tilgængelighed

Alle ønsker at få deres applikation opført på søgemaskinens første side, men det kræver konsekvent arbejde og planlægning for at oprette sådanne fantastiske applikationer. Det stærke fundament for dit projekt sørger for, at din ansøgning fokuserer på indholdet-første tilgang.

Sider bygget med PE strategi sørg grundlæggende indhold er altid tilgængeligt for søgemaskinen edderkop og er klar til at blive indekseret. Undgå gengivelse af dynamisk indhold, der kan forhindre edderkoppen i at gennemgå dit indhold.

Progressive webapps(PWA) er lavet til at fungere for alle brugere, uanset deres browservalg, fordi de er bygget med progressiv forbedring som et grundlæggende princip.

Afsluttende tanker

PE-strategien fokuserer på et stærkt fundament for dit projekt. Dette stærke fundament hjælper dig med din vision for dit produkt til en langsigtet plan.

Det er let at tilslutte sig en ny JavaScript / CSS-ramme til dit nye projekt og starte kodning, men det kan føre til yndefuld nedbrydning. Du fortsætter med at lappe din kode med tilbagefald til browsere eller enheder, der ikke understøtter rammer.

Selvom PE-strategien tager lidt mere planlægning i de indledende faser, sørger den for, at din bruger også i værste fald kan opleve mindst grundlæggende funktionalitet. PE kan ikke bruges i situationer, der er stærkt afhængige af JavaScript for at opnå visse præsentationer eller adfærd for brugergrænsefladen, men for et langsigtet projekt er det værd at overveje visse aspekter af PE-strategien.

Håber dette gav et overblik over den progressive forbedringsstrategi.

Du er velkommen til at droppe en kommentar nedenfor.

Tak fordi du læste denne artikel! Hvis du har spørgsmål, så send mig en e-mail (praveend806 [at] gmail [dot] com).

Ressourcer, der taler om mere om PE og casestudier:

Design med progressiv forbedring: Opbygning af internettet, der fungerer for alle

Progressiv forbedring er en tilgang til webudvikling, der sigter mod at levere den bedst mulige oplevelse til ... www.oreilly.com Unboring.net | Workflow: Anvendelse af progressiv forbedring på et WebVR-projekt

Hvordan jeg lavede et interaktivt indhold, der skulle integreres på weather.com unboring.net