Mikä on progressiivinen parannus ja miksi sillä on merkitystä

Progressive Enhancement (PE) on tehokas menetelmä verkkosovellusten kehittämiseksi.

Tässä on muodollinen määritelmä:

Progressiivinen parannus on verkkosuunnittelustrategia, jossa korostetaan ensin verkkosivun ydinsisältöä. Tämä strategia lisää sitten asteittain vivahteikkaampia ja teknisesti tarkempia esityskerroksia ja ominaisuuksia sisällön päälle, kuten loppukäyttäjän selain / Internet-yhteys sallii. - Wikipedia

Tämän strategian ehdotetut edut ovat se, että se antaa kaikille mahdollisuuden käyttää verkkosivun perussisältöä ja toimintoja millä tahansa selaimella tai Internet-yhteydellä, samalla kun se tarjoaa parannetun version sivusta niille, joilla on edistyneempi selainohjelmisto tai suurempi kaistanleveys.

Ja pähkinänkuoressa ...

… Se antaa meille peruskäyttökokemuksen ja ristikkäisen yhteensopivuuden selainten välillä vakauden takaamiseksi .

let PE = "Progressive Enhancement";

PE-strategia koostuu seuraavista perusperiaatteista:

  • Basic sisältö olisi käytettävissään kaikki selaimet
  • Basic toiminnallisuus olisi käytettävissään kaikki selaimet
  • Harvat, semanttiset merkinnät sisältävät kaiken sisällön
  • Parannetun asettelun tarjoaa ulkoisesti linkitetty CSS
  • Parannetun käyttäytymisen tarjoaa häiritsemätön, ulkoisesti linkitetty JavaScript
  • Loppukäyttäjän verkkoselaimen asetuksia noudatetaan

Joten kun rakennat seuraavan verkkosivustosi seuraavan sukupolven JavaScript / CSS-kehyksillä, jotka toimivat vain koodisi kannalta suotuisimmassa ympäristössä ja se rikkoutuu, kun se ei saa sitä ... tämä ei ole Progressive Enhancement -strategia.

Sen sijaan sinulla on tavoite, jossa kehityksen tulisi alkaa tarjoamalla perusominaisuudet, vakaus kaikissa selaimissa ja laitteissa ja saumaton kokemus käyttäjälle ennen monimutkaisuuden käyttöönottoa.

PE-esimerkit

Katsotaanpa joitain esimerkkejä, jotka osoittavat PE-strategian toiminnan.

Web-fontit

Web-fontit ovat hämmästyttäviä ja kauniita, mutta kun käyttäjä on hitaassa verkossa raskaan sivuston kanssa, ne varmasti heikentävät käyttökokemusta. Jopa tässä tilanteessa järjestelmän kirjasinta tulisi käyttää sisällön hahmottamisen varavarauksena, ja se voidaan vaihtaa verkkofontiksi ladattuna.

Sisällön näyttäminen on parempi kuin odottaa verkkofontteja - tai saada mitään.

Alkuperäinen HTML

Sivustot ladataan komentosarjalla. Se voi olla Angular, React tai jokin muu kehys. Kun nämä komentosarjat ovat vastuussa alkuperäisestä sisällön näyttämisestä, käyttäjä näkee tyhjän sivun selaimessa tai laitteessa, kun komentosarjoissa tapahtui jotain vikaa tai kun käyttäjä on hitaassa verkossa.

On aina hyvä harkita alkuperäisen sisällön lataamista HTML-koodista paremman käyttökokemuksen tarjoamiseksi sen sijaan, että luotettaisiin täysin vielä lataamattomiin komentosarjoihin.

Ominaisuuden tarkistus

Hyvät sivustot tekevät aina tämän osan. Kun käytät ominaisuutta, jota ei tueta eri selainten tai laitteiden perusteella, tarkista aina, että ominaisuus on käytettävissä selaimessa, ennen kuin käytät sitä JavaScriptissä.

Modernizr on yksi suosittu kirjasto ominaisuuksien havaitsemiseksi, joka voi auttaa sinua.

Voit ladata ylimääräisiä komentosarjoja varatuen lataamiseksi vain, kun se ei ole käytettävissä selaimessa tai laitteessa. Näin voit välttää ylimääräisten komentosarjojen lataamisen, kun niitä ei tarvita.

Miksi PE?

Tärkeitä syitä keskittyä liikuntastrategiaan ennen seuraavan sovelluksen rakentamista:

Vahva säätiö

PE keskittyy projektisi alkuun käyttämällä vain hyvin yksinkertaisia ​​verkkoteknologioita ennen kuin otetaan käyttöön joitain erittäin monimutkaisia ​​ominaisuuksia. Joten kaikissa tapauksissa sinulla on perusta tukea monimutkaisia ​​ominaisuuksia varmistaaksesi, että ne toimivat.

Kun tiimi on vakuuttunut siitä, että sivuston ydinkokemus on vakaa ja toimii ilman, että luotat kovasti verkon nopeuteen, selaimeen ja laitteeseen, voit aloittaa monimutkaisempien ominaisuuksien tai sci-fi-esineiden käyttöönoton.

Vakaus

Quality Team : "Hakukuvake ei toimi Safari for Offers -sivulla"

Dev Team : "No se toimii koneellani , tyhjennä välimuisti, lataa uudelleen tai kuole"

Quality Team (taivaasta): "Ei vieläkään toimi, olet tarkistamassa Chromessa, se rikkoo Safarissa"

Dev Team : "Milloin aloimme tukea Safaria? odota…. korjaustiedostojen korjaus ……… ”

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

"1 tunnin kuluttua ... tarkista nyt".

Quality Team: "Hieno Chrome ja Safari, mutta rikkoi Mozillaa nyt ... Ahhhhh !!!!!"

No, olemme kaikki olleet tässä tilanteessa ainakin kerran.

Projektin vakauden ja ylläpidon kustannukset riippuvat myös siitä, miten projekti alkaa. Kehysten rakentaminen ja korjaaminen ei toimi pitkällä aikavälillä.

PE-strategia auttaa sinua rakentamaan vahvan perustan projektillesi, jossa HTML, CSS ja JS ovat linjassa ja pyrkivät tarjoamaan palautteita. He yrittävät varmistaa, ettet luottaa voimakkaasti vain selainkohtaisiin ominaisuuksiin.

Hakukoneoptimointi ja saavutettavuus

Kaikki haluavat saada sovelluksensa hakukoneen ensimmäiselle sivulle, mutta tällaisten hämmästyttävien sovellusten rakentaminen vaatii jatkuvaa työtä ja suunnittelua . Vahva perusta projektillesi varmistaa, että hakemuksesi keskittyy sisältöä koskevaan lähestymistapaan.

PE-strategialla rakennettujen sivujen avulla varmistetaan, että perussisältö on aina hakukoneiden hämähäkkien käytettävissä ja että se on valmis indeksoitavaksi. Vältä dynaamista sisällön hahmontamista, joka saattaa estää hämähäkkiä indeksoimasta sisältöäsi.

Progressiiviset verkkosovellukset(PWA) on tehty toimimaan kaikille käyttäjille heidän selainvalinnastaan ​​riippumatta, koska ne on rakennettu progressiivisella parannuksella ydinperiaatteena.

Lopettavat ajatukset

Liikuntamallistrategiassa keskitytään projektisi vahvaan pohjaan. Tämä vahva perusta auttaa sinua näkemyksessäsi tuotteestasi pitkällä aikavälillä.

Se on helppo liittää uuteen JavaScript / CSS-kehykseen uuteen projektiin ja aloittaa koodaus, mutta se voi johtaa sulavaan hajoamiseen. Korjaat koodiasi jatkossa selaimille tai laitteille, jotka eivät tue kehyksiä.

Vaikka PE-strategia vie vähän enemmän suunnittelua alkuvaiheessa, se varmistaa, että käyttäjä pystyy kokemaan ainakin perustoiminnot myös pahimmassa tapauksessa. PE ei ole toimiva tilanteissa, joissa tiettyjen käyttöliittymän esitysten tai käyttäytymisen saavuttaminen riippuu suuresti JavaScriptiä, mutta pitkän aikavälin projektissa kannattaa harkita tiettyjä PE-strategian näkökohtia.

Toivon, että tämä antoi yleiskuvan progressiivisen parannuksen strategiasta.

Voit vapaasti pudottaa kommentin alla.

Kiitos tämän artikkelin lukemisesta! Jos sinulla on kysyttävää, lähetä minulle sähköpostia (praveend806 [at] gmail [dot] com).

Resurssit, joissa puhutaan enemmän liikunnasta ja tapaustutkimuksista:

Suunnittelu progressiivisella parannuksella: Rakenna kaikille sopiva verkko

Asteittaista lisäämistä on lähestymistapa web-kehitystä, jonka tavoitteena on tarjota paras mahdollinen kokemusta ... www.oreilly.com Unboring.net | Työnkulku: Progressiivisen parannuksen käyttäminen WebVR-projektissa

Kuinka tein interaktiivisen sisällön upotettavaksi osoitteeseen weather.com unboring.net