Kas yra progresyvus tobulinimas ir kodėl tai svarbu

„Progressive Enhancement“ (PE) yra galinga internetinių programų kūrimo metodika.

Čia yra oficialus apibrėžimas:

Pažangus tobulinimas yra interneto dizaino strategija, kurioje pirmiausia pabrėžiamas pagrindinis tinklalapio turinys. Tada ši strategija palaipsniui papildo niuansuotus ir techniškai griežtus pateikimo sluoksnius ir funkcijas turinio viršuje, kaip tai leidžia galutinio vartotojo naršyklė / interneto ryšys. - Vikipedija

Siūlomi šios strategijos pranašumai yra tai, kad ji leidžia kiekvienam pasiekti pagrindinį tinklalapio turinį ir funkcionalumą, naudojant bet kurią naršyklę ar interneto ryšį, taip pat suteikiant patobulintą puslapio versiją tiems, kurie turi pažangesnę naršyklės programinę įrangą arba didesnį pralaidumą.

Trumpai tariant ...

... tai suteikia mums pagrindinę vartotojo patirtį ir suderinamumą visose naršyklėse, kad užtikrintume stabilumą.

let PE = "Progressive Enhancement";

PE strategiją sudaro šie pagrindiniai principai:

  • Pagrindinis turinys turėtų būti prieinamas visoms žiniatinklio naršyklėms
  • Pagrindinės funkcijos turėtų būti prieinamos visoms žiniatinklio naršyklėms
  • Retame, prasminiame žymėjime yra visas turinys
  • Patobulintą išdėstymą teikia išoriškai susieta CSS
  • Patobulintą elgesį užtikrina neįkyrus išoriškai susietas „JavaScript“
  • Laikomasi galutinio vartotojo interneto naršyklės nuostatų

Taigi, kai kuriate savo kitą svetainę naudodami naujos kartos „JavaScript“ / CSS sistemas, kurios veikia tik jūsų kodui palankiausioje aplinkoje ir sugenda, kai jo negauna ... tai nėra progresyvaus tobulinimo strategija.

Užuot turėję tikslą, kurio kūrimas turėtų prasidėti suteikiant pagrindines funkcijas, stabilumą visose naršyklėse ir įrenginiuose bei sklandžią patirtį vartotojui, prieš pradedant sudėtingumą.

Kūno pavyzdžiai

Pažvelkime į keletą pavyzdžių, parodančių, kaip veikia PE strategija.

Žiniatinklio šriftai

Žiniatinklio šriftai yra nuostabūs ir gražūs, tačiau kai vartotojas yra lėtame tinkle su sunkia svetaine, jie tikrai pablogina vartotojo patirtį. Net ir tokioje situacijoje sistemos šriftas turėtų būti naudojamas kaip atsarginis turinio pateikimo būdas ir jį galima pakeisti į žiniatinklio šriftą, kai jie yra įkeliami.

Turinį rodyti geriau nei laukti žiniatinklio šriftų - arba nieko negauti.

Pradinis HTML

Svetainėse yra pakrautas scenarijus. Tai gali būti „Angular“, „React“ ar kita sistema. Kai šie scenarijai yra atsakingi už pradinį turinio rodymą, jūsų vartotojas matys tuščią naršyklės ar įrenginio puslapį, kai kažkas sugedo su scenarijais arba kai vartotojas yra lėtame tinkle.

Visada gerai apsvarstyti galimybę įkelti pradinį turinį iš HTML, kad būtų teikiama geresnė vartotojo patirtis, o ne visiškai pasikliauti scenarijais, kurie dar neįkeliami.

Funkcijų tikrinimas

Geros svetainės visada atlieka šią dalį. Jei naudojate funkciją, kurios nepalaiko skirtingos naršyklės ar įrenginiai, prieš naudodami „JavaScript“, būtinai patikrinkite, ar funkcija yra naršyklėje.

„Modernizr“ yra viena populiari funkcijų aptikimo biblioteka, kuri gali jums padėti.

Galite įkelti papildomų scenarijų, kad galėtumėte įkelti atsarginę paramą, tik tada, kai jų nėra naršyklėje ar įrenginyje. Tokiu būdu galite išvengti papildomų scenarijų įkėlimo, kai jų nereikia.

Dabar, kodėl PE?

Svarbios priežastys sutelkti dėmesį į PE strategiją prieš kuriant kitą programą:

Stiprus fondas

Prieš pristatydama kai kurias labai sudėtingas funkcijas, PE sutelkia dėmesį į jūsų projekto pradžią, naudodama tik pačias pagrindines interneto technologijas. Taigi visais atvejais turite pagrindą paremti savo sudėtingas funkcijas, kad įsitikintumėte, jog jos veikia.

Kai komanda bus įsitikinusi, kad pagrindinė svetainės patirtis yra stabili ir veiks labai nesikliaudama tinklo greičiu, naršykle ir įrenginiu, galėsite pradėti pristatyti sudėtingesnių funkcijų ar mokslinės fantastikos dalykus.

Stabilumas

Quality Team : „Paieškos piktograma neveikia„ Safari for Offers “puslapyje“

Dev Team : „Na, tai veikia mano mašinoje , išvalyti talpyklą, iš naujo įkelti ar mirti“

Quality Team (iš dangaus): „Vis dar neveikia, jūs tikrinate„ Chrome “, jis sugenda„ Safari ““

Dev Team : „Kada pradėjome palaikyti„ Safari “? laukti…. pleistras pleistras ……… ”

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

„Po 1 valandos ... patikrinkite dabar“.

Quality Team: „Puikiai veikia„ Chrome “ir„ Safari “, bet dabar„ Mozilla “sugedo ... Ahhhhh !!!!!“

Na, visi esame bent kartą patekę į tokią situaciją.

Projekto stabilumo ir priežiūros išlaidos taip pat priklauso nuo to, kaip prasideda projektas. Ilgą laiką neveiks projekto su rėmeliais nustatymas ir lopymas.

PE strategija padeda jums sukurti tvirtą pagrindą savo projektui, kur jūsų HTML, CSS ir JS yra sulyginti ir siekiama suteikti trūkumų. Jie bando įsitikinti, kad jūs labai nepasikliaudate tik konkrečiomis naršyklės funkcijomis.

SEO ir prieinamumas

Visi nori, kad jų programa būtų nurodyta pirmajame paieškos sistemos puslapyje, tačiau norint sukurti tokias nuostabias programas reikia nuosekliai dirbti ir planuoti . Tvirtas jūsų projekto pagrindas užtikrina, kad jūsų programa orientuota į turinio principą.

Puslapiai pastatytas su PE strategijos įsitikinkite pagrindinė turinys yra visada prieinama paieškos voras ir yra pasirengusi būti indeksuojami. Venkite bet kokio dinaminio turinio pateikimo, kuris gali trukdyti vorui tikrinti jūsų turinį.

Pažangiosios žiniatinklio programos(PWA) yra pritaikyti visiems vartotojams, neatsižvelgiant į jų naršyklės pasirinkimą, nes jie sukurti palaipsniui tobulinant kaip pagrindinį principą.

Uždarymo mintys

Kūno kultūros strategija orientuota į tvirtą jūsų projekto pagrindą. Šis tvirtas pagrindas padeda jums pamatyti savo produkto ilgalaikį planą.

Lengva prijungti naują „JavaScript“ / CSS sistemą savo naujam projektui ir pradėti koduoti, tačiau tai gali sukelti grakščią degradaciją. Jūs ir toliau pataisysite savo kodą naudodamiesi naršyklių ar įrenginių, kurie nepalaiko rėmelių, atsarginių kopijų.

Nors pradiniuose etapuose PE strategiją reikia šiek tiek daugiau planuoti, tai užtikrina, kad jūsų vartotojas blogiausiu atveju taip pat galės naudotis bent jau pagrindinėmis funkcijomis. PE neveikia situacijose, kurios labai priklauso nuo „JavaScript“, kad pasiektų tam tikrus vartotojo sąsajos pristatymus ar elgesį, tačiau ilgalaikio projekto atveju verta apsvarstyti tam tikrus PE strategijos aspektus.

Tikiuosi, kad tai apžvelgė pažangiosios pažangos strategiją.

Nedvejodami atsisakykite komentaro žemiau.

Dėkojame, kad perskaitėte šį straipsnį! Jei turite klausimų, atsiųskite man el. Laišką (praveend806 [at] gmail [dot] com).

Šaltiniai, kuriuose plačiau kalbama apie fizinį lavinimą ir atvejų tyrimus:

Dizainas su pažangiu patobulinimu: sukurkite visiems tinkantį internetą

Progresyvus tobulinimas yra požiūris į interneto plėtrą, kurio tikslas - suteikti geriausią įmanomą patirtį internetinei svetainei. Darbo eiga: Progresyvaus patobulinimo taikymas „WebVR“ projekte

Kaip sukūriau interaktyvų turinį, kuris bus įterptas į weather.com unboring.net