de Praveen Dubey

Ce este îmbunătățirea progresivă și de ce contează

Ce este imbunatatirea progresiva si de ce conteaza
Fotografie de Émile Perron pe Unsplash

Îmbunătățirea progresivă (PE) este o metodologie puternică pentru dezvoltarea aplicațiilor web.

Aici este formal definiție:

Îmbunătățire progresivă este o strategie de design web care pune accentul pe conținutul principal al paginii web. Această strategie adaugă apoi progresiv straturi de prezentare și caracteristici mai nuanțate și mai riguroase din punct de vedere tehnic pe partea de sus a conținutului, pe măsură ce permite browserul / conexiunea la internet a utilizatorului final. – Wikipedia

Avantajele propuse ale acestei strategii sunt că permite tuturor să acceseze conținutul de bază și funcționalitatea unei pagini web, utilizând orice browser sau conexiune la internet, oferind în același timp o versiune îmbunătățită a paginii celor cu software de browser mai avansat sau lățime de bandă mai mare.

Și pe scurt …

… Pentru a ne asigura experiența de bază a utilizatorului și compatibilitatea încrucișată între browsere stabilitate.

let PE = "Progressive Enhancement";

Strategia PE constă în următoarele principii fundamentale:

  • De bază conţinut ar trebui să fie accesibile pentru toate browserele web
  • De bază funcționalitate ar trebui să fie accesibile pentru toate browserele web
  • Marcajul semantic rar, conține tot conținutul
  • Aspectul îmbunătățit este furnizat de CSS conectat extern
  • Comportamentul îmbunătățit este furnizat de JavaScript discret, conectat extern
  • Preferințele browserului de utilizator final sunt respectate

Așadar, atunci când vă construiți următorul site web cu cadre JavaScript / CSS de generație următoare care funcționează cel mai mult mediu favorabil pentru codul tău și se rupe când nu îl primește …. aceasta nu este o strategie de îmbunătățire progresivă.

În schimb, aveți un obiectiv în care dezvoltarea ar trebui să înceapă cu furnizarea de caracteristici de bază, stabilitate pe toate browserele și dispozitivele și o experiență perfectă pentru utilizator înainte de a introduce complexitatea.

Exemple de PE

Să ne uităm la câteva exemple care arată cum funcționează strategia PE.

Fonturi Web

Fonturile web sunt uimitoare și frumoase, dar atunci când utilizatorul se află într-o rețea lentă cu un site greu, cu siguranță degradează experiența utilizatorului. Chiar și în această situație, fontul de sistem ar trebui să fie folosit ca alternativă pentru redarea conținutului și poate fi schimbat într-un font web pe măsură ce sunt încărcate.

Afișarea conținutului este mai bună decât așteptarea fonturilor web – sau obținerea a nimic.

HTML inițial

Site-urile sunt încărcate cu script. Ar putea fi unghiular, React sau un alt cadru. Când aceste scripturi sunt responsabile pentru afișarea conținutului inițial, utilizatorul dvs. va vedea pagina goală din browser sau dispozitiv atunci când ceva nu a funcționat corect cu scripturile sau când utilizatorul se află în rețeaua lentă.

Este întotdeauna bine să luați în considerare încărcarea conținutului inițial din HTML pentru a oferi o experiență mai bună utilizatorului, mai degrabă decât să vă bazați complet pe scripturi care nu sunt încă încărcate.

Verificare caracteristică

Site-urile bune fac întotdeauna această parte. Atunci când utilizați o caracteristică care nu este acceptată pe baza diferitelor browsere sau dispozitive, asigurați-vă întotdeauna că verificați dacă caracteristica este disponibilă în browser înainte de a o utiliza în JavaScript.

Modernizr este o bibliotecă populară pentru detectarea caracteristicilor care vă poate ajuta.

Puteți încărca scripturi suplimentare pentru a încărca suport alternativ numai atunci când nu este disponibil în browser sau dispozitiv. În acest fel puteți evita încărcarea scripturilor suplimentare atunci când acestea nu sunt necesare.

Acum, de ce PE?

Motive importante pentru a vă concentra asupra strategiei PE înainte de a vă crea următoarea aplicație:

Fundație puternică

PE se concentrează pe începutul proiectului dvs. folosind doar tehnologiile web de bază înainte de a introduce unele dintre caracteristicile foarte complexe. Deci, în toate cazurile, aveți fundamentul pentru a vă sprijini caracteristicile complexe pentru a vă asigura că funcționează.

Odată ce echipa este încrezătoare că experiența de bază a site-ului este stabilă și va funcționa fără să se bazeze în mare măsură pe viteza rețelei, browserul și dispozitivul, atunci puteți începe să introduceți straturi de caracteristici mai complexe sau lucruri SF.

Stabilitate

Quality Team : „Pictograma Căutare nu funcționează în pagina Safari pentru Oferte”

Dev Team : „Ei bine funcționează mașina mea, ștergeți memoria cache, reîncărcați sau muriți ”

Quality Team (din cer): „Încă nu funcționează, verificați Chrome, se sparge în Safari”

Dev Team : „Când am început să sprijinim Safari? aștepta…. patch-uri patch-uri ……… ”

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

„După 1 oră …… verificați acum”.

Quality Team: „Funcționează bine pentru Chrome și Safari, dar acum a cedat pentru Mozilla … Ahhhhh !!!!!”

Ei bine, am fost cu toții în această situație cel puțin o dată.

Costul pentru stabilitate și întreținere a unui proiect depinde, de asemenea, de modul în care începe proiectul. Configurarea unui proiect cu cadre și corecția acestuia nu vor funcționa pe termen lung.

Strategia PE vă ajută să construiți o bază solidă pentru proiectul dvs. în care HTML, CSS și JS sunt aliniate și urmăresc să ofere alternative. Încearcă să se asigure că nu vă bazați în mare măsură doar pe funcțiile specifice browserului.

SEO și accesibilitate

Toată lumea dorește ca aplicația lor să fie listată în prima pagină a motorului de căutare, dar este nevoie muncă și planificare consecvente pentru a construi astfel de aplicații uimitoare. Fundația solidă a proiectului dvs. vă asigură că aplicația dvs. se concentrează pe abordarea primului conținut.

Se asigură paginile construite cu strategia PE conținut de bază este mereu accesibil pentru păianjenul motorului de căutare și este gata de indexare. Evitați orice redare dinamică a conținutului care poate împiedica păianjenul să vă acceseze cu crawlere conținutul.

Aplicații web progresive (PWA) sunt făcute să funcționeze pentru toți utilizatorii, indiferent de alegerea browserului lor, deoarece sunt construite cu îmbunătățiri progresive ca principiu de bază.

Gânduri de închidere

Strategia PE se concentrează pe o bază solidă pentru proiectul dvs. Această bază solidă vă ajută în viziunea dvs. pentru produsul dvs. pentru un plan pe termen lung.

Este ușor să vă conectați la un nou cadru JavaScript / CSS pentru noul dvs. proiect și să începeți codarea, dar acest lucru poate duce la degradarea grațioasă. Veți continua să vă corelați codul cu soluții alternative pentru browsere sau dispozitive care nu acceptă cadre.

Deși strategia PE necesită ceva mai multă planificare în etapele inițiale, se asigură că utilizatorul dvs. este capabil să experimenteze cel puțin funcționalități de bază și în cel mai rău caz. PE nu este funcțional în situații care se bazează foarte mult pe JavaScript pentru a realiza anumite prezentări sau comportamente ale interfeței utilizatorului, dar pentru un proiect pe termen lung, merită să luăm în considerare anumite aspecte ale strategiei PE.

Speră că acest lucru a oferit o imagine de ansamblu asupra strategiei de îmbunătățire progresivă.

Simțiți-vă liber să lăsați un comentariu mai jos.

Vă mulțumim că ați citit acest articol! Dacă aveți întrebări, trimiteți-mi un e-mail (praveend806 [at] gmail [dot] com).

Resurse care vorbesc despre mai multe despre PE și studii de caz:

Proiectare cu îmbunătățire progresivă: construirea unui web care funcționează pentru toată lumea
Îmbunătățirea progresivă este o abordare a dezvoltării web care urmărește să ofere cea mai bună experiență posibilă …www.oreilly.comUnboring.net | Flux de lucru: aplicarea îmbunătățirii progresive pe un proiect WebVR
Cum am creat un conținut interactiv pentru a fi încorporat pe weather.comunboring.net