A lecke végére meg tudod különböztetni a többoldalas és az egyoldalas alkalmazást a navigáció módja szerint, el tudod magyarázni a mély link és az előzmények szerepét, és tudod, hogy ez a döntés nem azonos a renderelési stratégiával.
Miért két modell?
A web eredetileg dokumentumokból épült: a hivatkozásra kattintva a böngésző új dokumentumot kér (1.2). Az alkalmazásszerű webnél ez a modell kényelmetlen lehet: egy levelező nem akar minden kattintásra újratölteni mindent. A fejlesztők ezért kétféle felépítést használnak, és mindkettőnek megvan a helye. A különbség a felhasználói úton, a szerver és a kliens feladatán, és a hibakezelésen látszik.
Egy kurzuskatalógus két változata
A hallgató megnyit egy kurzuslistát, majd egy kurzus részleteire kattint.
Többoldalas változat: a böngésző a részletek címére navigál (/kurzusok/webprog), és új HTML-dokumentumot kap.
Egyoldalas változat: a kezdeti betöltés után az alkalmazás JavaScriptje kezeli a kattintást, adatot kér az API-tól, és a jelenlegi dokumentumban cseréli ki a látható nézetet.
Mindkét változatnál létezhet egyedi URL a kurzushoz, és mindkettő lehet interaktív.
flowchart TB
U[Kattintás a kurzusra] --> M[Többoldalas: új HTML-kérés]
U --> S[Egyoldalas: kliensoldali nézetváltás]
M --> L[Részletek láthatók]
S --> A[Adatkérés szükség esetén]
A --> L
Az ábra tipikus működést mutat, nem szabályt: többoldalas oldalon is lehet JavaScriptes frissítés, az egyoldalas alkalmazás pedig első megnyitáskor kérhet a szervertől teljes dokumentumot.
Többoldalas alkalmazás
Az MPA (Multi-Page Application) esetén a különböző oldalakhoz többnyire külön dokumentumválasz tartozik. A szerver minden navigációhoz HTML-t készíthet, vagy statikus fájlt szolgálhat ki. A böngésző ismert viselkedése (hivatkozások, előzmények, Vissza gomb, könyvjelző) magától működik. Az új dokumentum betöltése hálózati és renderelési munkát jelent, de a teljes újratöltés nem automatikusan lassú: a gyorsítótár, a szerver és az oldal mérete is számít.
Egy hírportál vagy egyszerű kurzuskatalógus jól működhet így. A címezhető tartalom és az önálló HTML-dokumentum külön előny. A modell nem azt jelenti, hogy minden művelet teljes újratöltéssel jár: egy szűrő itt is működhet JavaScripttel.
Egyoldalas alkalmazás
Az SPA esetén a kezdeti betöltés után a JavaScript átveszi a nézetváltások jelentős részét: API-n keresztül adatot kér, majd módosítja a DOM-ot (3.2). A váltás gyors és folyamatos lehet, de az induláshoz több kliensoldali munka kell: le kell tölteni és futtatni a programot. A hibás vagy lassú JavaScript a tartalom elérését is akadályozhatja, ha minden nézet ettől függ.
Mivel a böngésző nem tölt be új dokumentumot, az SPA-nak magának kell gondoskodnia arról, amit az MPA-ban a böngésző ingyen ad:
az URL változzon a nézettel együtt, hogy a cím megosztható legyen;
a Vissza gomb a várt nézetre vigyen;
a mély link (egy belső nézet közvetlen címe) frissítés után vagy másik eszközön is értelmes nézetre vezessen.
A böngésző History API-ja ezeket teszi lehetővé: az MDN szerint pushState új előzménybejegyzést ad, replaceState felülírja az aktuálisat, a popstate esemény pedig a Vissza/Előre lépéskor tüzel. Az URL megváltoztatása nem tölt be új dokumentumot és nem rajzolja ki a nézetet: azt az alkalmazásnak kell megtennie.
Nem azonos a renderelési stratégiával
Az MPA–SPA különbség a navigációról szól: új dokumentumot kérünk, vagy a kliens cseréli a nézetet. A kliensoldali, szerveroldali és statikus renderelés azt írja le, hol és mikor áll elő a HTML vagy a látható nézet (6.2–6.4). A két tengely kombinálható: egy többoldalas webhely oldalai lehetnek előre előállított HTML-ek, egy SPA első oldala pedig érkezhet szerveroldalon előállított HTML-ként. A két tengely összekeverése gyakori tévhit.
Ugyanazon a webhelyen a két modell egymás mellett élhet: a katalógus lehet MPA, a jelentkezési felület SPA, és az átmenet közöttük hagyományos hivatkozás.
Gyakori tévhitek
Állítás
Pontosítás
„Az MPA nem lehet interaktív.”
Egy többoldalas oldal is használhat JavaScriptet és API-kat.
„Az SPA minden kattintáskor új HTML-dokumentumot kér.”
Gyakran a meglévő dokumentumban vált nézetet.
„Az SPA mindig gyorsabb.”
Az első betöltés, a programfutás és az adatkérés is számít.
„Az MPA vagy SPA automatikusan meghatározza a renderelést.”
A navigációs modell és a renderelési stratégia külön döntés.
„Az SPA-ban nincs szükség URL-re.”
A megosztás, a frissítés és az előzmények miatt az URL az állapot része.
Röviden
MPA: a navigáció új dokumentumot kér; SPA: a kliens cseréli a nézetet a betöltött oldalon.
Az SPA-nak magának kell kezelnie az URL-t, az előzményeket és a mély linkeket (History API).
A mély linkhez a szervernek is támogatnia kell a belső útvonalakat.
A navigációs modell és a renderelési stratégia két külön döntés.
Ellenőrző kérdések
Mi a különbség egy MPA és egy SPA kattintás-kezelése között?
Mit csinál a pushState, és mit nem csinál?
Miért kaphat 404-et egy SPA belső linkje frissítéskor?
Miben különbözik az MPA–SPA választás a kliensoldali és a szerveroldali renderelés közti választástól?
Többoldalas és egyoldalas webalkalmazások
Célok
A lecke végére meg tudod különböztetni a többoldalas és az egyoldalas alkalmazást a navigáció módja szerint, el tudod magyarázni a mély link és az előzmények szerepét, és tudod, hogy ez a döntés nem azonos a renderelési stratégiával.
Miért két modell?
A web eredetileg dokumentumokból épült: a hivatkozásra kattintva a böngésző új dokumentumot kér (1.2). Az alkalmazásszerű webnél ez a modell kényelmetlen lehet: egy levelező nem akar minden kattintásra újratölteni mindent. A fejlesztők ezért kétféle felépítést használnak, és mindkettőnek megvan a helye. A különbség a felhasználói úton, a szerver és a kliens feladatán, és a hibakezelésen látszik.
Egy kurzuskatalógus két változata
A hallgató megnyit egy kurzuslistát, majd egy kurzus részleteire kattint.
/kurzusok/webprog), és új HTML-dokumentumot kap.Mindkét változatnál létezhet egyedi URL a kurzushoz, és mindkettő lehet interaktív.
flowchart TB U[Kattintás a kurzusra] --> M[Többoldalas: új HTML-kérés] U --> S[Egyoldalas: kliensoldali nézetváltás] M --> L[Részletek láthatók] S --> A[Adatkérés szükség esetén] A --> LAz ábra tipikus működést mutat, nem szabályt: többoldalas oldalon is lehet JavaScriptes frissítés, az egyoldalas alkalmazás pedig első megnyitáskor kérhet a szervertől teljes dokumentumot.
Többoldalas alkalmazás
Az MPA (Multi-Page Application) esetén a különböző oldalakhoz többnyire külön dokumentumválasz tartozik. A szerver minden navigációhoz HTML-t készíthet, vagy statikus fájlt szolgálhat ki. A böngésző ismert viselkedése (hivatkozások, előzmények, Vissza gomb, könyvjelző) magától működik. Az új dokumentum betöltése hálózati és renderelési munkát jelent, de a teljes újratöltés nem automatikusan lassú: a gyorsítótár, a szerver és az oldal mérete is számít.
Egy hírportál vagy egyszerű kurzuskatalógus jól működhet így. A címezhető tartalom és az önálló HTML-dokumentum külön előny. A modell nem azt jelenti, hogy minden művelet teljes újratöltéssel jár: egy szűrő itt is működhet JavaScripttel.
Egyoldalas alkalmazás
Az SPA esetén a kezdeti betöltés után a JavaScript átveszi a nézetváltások jelentős részét: API-n keresztül adatot kér, majd módosítja a DOM-ot (3.2). A váltás gyors és folyamatos lehet, de az induláshoz több kliensoldali munka kell: le kell tölteni és futtatni a programot. A hibás vagy lassú JavaScript a tartalom elérését is akadályozhatja, ha minden nézet ettől függ.
Mivel a böngésző nem tölt be új dokumentumot, az SPA-nak magának kell gondoskodnia arról, amit az MPA-ban a böngésző ingyen ad:
A böngésző History API-ja ezeket teszi lehetővé: az MDN szerint
pushStateúj előzménybejegyzést ad,replaceStatefelülírja az aktuálisat, apopstateesemény pedig a Vissza/Előre lépéskor tüzel. Az URL megváltoztatása nem tölt be új dokumentumot és nem rajzolja ki a nézetet: azt az alkalmazásnak kell megtennie.Nem azonos a renderelési stratégiával
Az MPA–SPA különbség a navigációról szól: új dokumentumot kérünk, vagy a kliens cseréli a nézetet. A kliensoldali, szerveroldali és statikus renderelés azt írja le, hol és mikor áll elő a HTML vagy a látható nézet (6.2–6.4). A két tengely kombinálható: egy többoldalas webhely oldalai lehetnek előre előállított HTML-ek, egy SPA első oldala pedig érkezhet szerveroldalon előállított HTML-ként. A két tengely összekeverése gyakori tévhit.
Végigvezetett példa: a Kurzuspont két oldala
Ugyanazon a webhelyen a két modell egymás mellett élhet: a katalógus lehet MPA, a jelentkezési felület SPA, és az átmenet közöttük hagyományos hivatkozás.
Gyakori tévhitek
Röviden
Ellenőrző kérdések
pushState, és mit nem csinál?404-et egy SPA belső linkje frissítéskor?Tanulási források