Mi a progresszív fejlesztés, és miért számít

A Progressive Enhancement (PE) a webalkalmazások fejlesztésének hatékony módszere.

Itt van egy hivatalos meghatározás:

A progresszív fejlesztés a webdesign stratégiája, amely elsősorban a weboldal alapvető tartalmát hangsúlyozza. Ez a stratégia ezt követően fokozatosan árnyaltabb és technikailag szigorúbb megjelenítési rétegeket és funkciókat ad a tartalom tetejére, amint azt a végfelhasználó böngészője / internetkapcsolata lehetővé teszi. - Wikipédia

A stratégia javasolt előnyei, hogy mindenki számára hozzáférhetővé teszi a weboldal alapvető tartalmát és funkcionalitását bármilyen böngésző vagy internetkapcsolat használatával, ugyanakkor az oldal továbbfejlesztett változatát is biztosítja azoknak, akiknek fejlettebb böngészőszoftverük van vagy nagyobb a sávszélességük.

És dióhéjban ...

… Alapvető felhasználói élményt nyújt és a böngészők közötti kompatibilitást biztosítja a stabilitás érdekében.

let PE = "Progressive Enhancement";

A testnevelési stratégia a következő alapelvekből áll:

  • Az alaptartalomnak elérhetőnek kell lennie az összes böngésző számára
  • Az alapfunkcióknak elérhetőnek kell lenniük az összes böngésző számára
  • A ritka, szemantikus jelölés minden tartalmat tartalmaz
  • A továbbfejlesztett elrendezést külsőleg összekapcsolt CSS biztosítja
  • A továbbfejlesztett viselkedést a nem feltűnő, külsőleg összekapcsolt JavaScript biztosítja
  • A végfelhasználó webböngészőjének beállításait tiszteletben tartják

Tehát amikor a következő webhelyét a következő generációs JavaScript / CSS keretrendszerekkel készíti el, amelyek csak a kód számára legkedvezőbb környezetben működnek, és akkor szakadnak meg, amikor nem kapja meg ... ez nem progresszív fejlesztési stratégia.

Ehelyett azt a célt kell kitűznie, hogy a fejlesztésnek az alapvető funkciók, az összes böngésző és eszköz stabilitásának, valamint a felhasználó számára zökkenőmentes élmény biztosításával kell kezdődnie a bonyolultság bevezetése előtt.

PE példák

Nézzünk meg néhány példát, amelyek bemutatják a PE stratégia működését.

Web Betűtípusok

A webes betűtípusok csodálatosak és gyönyörűek, de ha a felhasználó lassú hálózaton dolgozik, és nehéz webhelyekkel rendelkezik, akkor biztosan rontják a felhasználói élményt. Ebben a helyzetben is a Rendszer betűtípust kell tartalékként megjeleníteni tartalékként, és betöltött állapotában web betűtípusra módosítható.

A tartalom megjelenítése jobb, mint megvárni a webes betűtípusokat - vagy semmit sem kapni.

Kezdeti HTML

A webhelyek szkriptet tartalmaznak. Lehet Angular, React vagy más keretrendszer. Amikor ezek a szkriptek felelősek a kezdeti tartalommegjelenítésért, a felhasználó akkor látja az üres oldalt a böngészőben vagy az eszközön, ha valami hiba történt a szkriptekkel, vagy ha a felhasználó lassú hálózaton van.

Mindig érdemes megfontolni a kezdeti tartalom HTML-ből történő betöltését a jobb felhasználói élmény érdekében, ahelyett, hogy teljesen a még betöltetlen szkriptekre hagyatkoznánk.

Funkcióellenőrzés

A jó oldalak mindig ezt csinálják. Ha olyan funkciót használ, amelyet a különböző böngészők vagy eszközök nem támogatnak, akkor mindig ellenőrizze, hogy elérhető-e a szolgáltatás a böngészőben, mielőtt azt a JavaScript-ben használná.

A Modernizr egy népszerű könyvtár a funkciók felismerésére, amely segíthet.

További szkripteket csak akkor tölthet be a tartaléktámogatás betöltéséhez, ha az nem érhető el a böngészőben vagy az eszközön. Így elkerülheti az extra parancsfájlok betöltését, amikor azok nem szükségesek.

Miért miért PE?

Fontos okok arra, hogy a következő alkalmazás elkészítése előtt koncentráljon a testnevelési stratégiára:

Erős Alapítvány

A PE a projekt megkezdésére összpontosít, csak az alapvető webes technológiákat alkalmazva, mielőtt néhány nagyon összetett funkciót bevezetne. Tehát minden esetben megvan az alapja a komplex funkciók támogatásához, hogy megbizonyosodhassanak azok működéséről.

Ha a csapat meg van győződve arról, hogy a webhely alapvető tapasztalata stabil, és a hálózati sebességre, a böngészőre és az eszközre való erős támaszkodás nélkül fog működni, akkor elkezdheti bevezetni a bonyolultabb funkciók vagy sci-fi dolgok rétegeit.

Stabilitás

Quality Team : „A Keresési ikon nem működik a Safari for Offers oldalon

Dev Team : "Nos, ez működik a gépemen , törölje a gyorsítótárat, töltse újra vagy meghaljon"

Quality Team (a mennyből): "Még mindig nem működik, a Chrome-ot ellenőrzi, a Safarinál meghibásodik"

Dev Team : „Mikor kezdtük el támogatni a Safarit? várjon…. patch javítás ……… ”

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

„1 óra elteltével… ellenőrizze most”.

Quality Team: "Remekül működik a Chrome és a Safari esetében, de a Mozilla most meghibásodott ... Ahhhhh !!!!!"

Nos, mindannyian legalább egyszer kerültünk ilyen helyzetbe.

A projekt stabilitásának és fenntartásának költségei a projekt kezdetétől is függenek. A projekt keretrendszerekkel történő felállítása és javítása hosszú távon nem fog működni.

A PE stratégia segít abban, hogy szilárd alapot teremtsen a projekt számára, ahol a HTML, CSS és JS igazodnak egymáshoz, és célja a visszalépés. Megpróbálnak megbizonyosodni arról, hogy nem csak a böngészőspecifikus funkciókra támaszkodik.

SEO és hozzáférhetőség

Mindenki azt akarja, hogy az alkalmazás szerepeljen a keresőmotor első oldalán, de következetes munkára és tervezésre van szükség egy ilyen csodálatos alkalmazás felépítéséhez. A projekt alapja biztosítja, hogy az alkalmazás a tartalom első megközelítésre összpontosítson.

Pages épült a PE stratégia győződjön meg arról, alapvető tartalmi jelentése mindig elérhető a kereső pók, és készen áll, hogy indexelt. Kerülje el a dinamikus tartalommegjelenítést, amely akadályozhatja a pók feltérképezését a tartalmában.

Progresszív webalkalmazásokA (PWA) funkciókat minden felhasználó számára elérhetővé teszik, függetlenül a böngésző választásától, mivel ezek alapelve a progresszív fejlesztés.

Záró gondolatok

A testnevelési stratégia a projekt szilárd alapjaira összpontosít. Ez az erős alap hosszú távú tervhez nyújt segítséget a termékkel kapcsolatos elképzeléseiben.

Könnyű bekapcsolódni egy új JavaScript / CSS keretrendszerbe az új projekthez, és elkezdeni a kódolást, de ez kecses leépüléshez vezethet. Folytatja a kód javítását olyan böngészők vagy eszközök számára, amelyek nem támogatják a keretrendszert.

Bár a PE stratégia a kezdeti szakaszokban kissé jobban megtervezi, biztosítja, hogy a felhasználó a legrosszabb esetben is legalább az alapvető funkciókat megtapasztalhassa. A PE nem működőképes olyan helyzetekben, amelyek nagymértékben a JavaScript-re támaszkodnak bizonyos felhasználói felület-prezentációk vagy viselkedés eléréséhez, de egy hosszú távú projekt esetében érdemes figyelembe venni a PE-stratégia bizonyos szempontjait.

Remélem, hogy ez áttekintést adott a Progresszív Fejlesztési Stratégiáról.

Nyugodtan dobjon egy megjegyzést alább.

Köszönjük, hogy elolvasta ezt a cikket! Ha kérdése van, küldjön egy e-mailt (praveend806 [at] gmail [dot] com).

A testnevelésről és az esettanulmányokról bővebben beszélő források:

Tervezés progresszív fejlesztéssel: A mindenki számára megfelelő web építése

A progresszív fejlesztés a webfejlesztés olyan megközelítése, amelynek célja, hogy a lehető legjobb élményt nyújtsa a… www.oreilly.com Unboring.net | Munkafolyamat: Progresszív javítás alkalmazása WebVR projekten

Hogyan készítettem interaktív tartalmat, hogy beágyazhassam a weather.com unboring.net webhelyre