Single page application

Single page application (někdy také one page application) je typ webové aplikace, která většinou používá server pouze jako zdroj a úložiště dat. Data jsou potom kompletně vykreslována JavaScriptem.

Při prvním příchodu na stránku se tedy:

1. stáhnou potřebné JavaScripty,
2. vykonají se a určí, jaký obsah se má zobrazit,
3. stáhnou se požadovaná data,
4. vypíší se do HTML kostry aplikace,
5. naváží se události na ovládací prvky.

Při dalších interakcích se potom stahuje pouze samotný obsah. Bez podpory JavaScriptu je stránka nefunkční.

Co dělá server

Serverová část SPA je obvykle jen jednoduché rozhraní, které zpracovává AJAXové požadavky ze strany klienta. Průběh akce vypadá může vypadat následovně:

1. Uživatel klikne na tlačítko a JS obsluha události onclick vyšle požadavek na server:

   example.com/?zobrazit=kontakt

2. Server najde příslušná data a vypíše je v JSONu (výsledek mohou být obyčejné textové řetězce, čísla nebo HTML kód):

   {
     "titulek" : "Kontakt",
     "komentaru" : 5,  
     "obsah" : "<p>Kontaktujte nás</p>  
   }

   Používat JSON není podmínkou, ale většinou je to nejsnazší způsob, jak později pohodlně pracovat s jednotlivými položkami.

3. JavaScript získaná data vloží na příslušná místa do stránky (titulek, nadpis, obsah atd.).

   document.title = data.titulek;
   document.getElementsByTagName("h1")[0].innerHTML = data.titulek;
   document.getElementById("obsah").innerHTML = data.obsah;
   document.getElementById("pocet-komentaru").innerHTML = data.komentaru;

Historie history.pushState

Aby v SPA fungovala funkce Zpět v prohlížečích, používá se fiktivní změna URL a do objektu history se ukládá obsah, který se potom může zobrazit bez nutnosti něco dál načítat.

Proč používat SPA

Hlavní výhoda SPA je rychlá odezva (po prvotním načtení a inicialisaci skriptů), protože se ze serveru následně nestahuje celý HTML kód, ale jen data, která se mění.

Kromě datové úspory nemusí prohlížeč neustále překreslovat celou stránku, ale pouze změněné části.

Tento způsob stahování obsahu AJAXem jde využít i k lazy-loadingu, kdy se obsah finální stránky vykreslí v několika krocích. U náročných stránek tím jde docílit rychlého zobrazení nejdůležitějšího obsahu – a další části (náročnější na výpočty) se načtou nezávisle až později.

Nakonec je SPA relativně jednoduchá na vytvoření, jelikož se logika aplikace vytváří pouze v JavaScriptu. Kód se nepíše jednou pro klienta a jednou pro server.

Nevýhody

Zásadní nevýhodou Single-page application je v některých případech nefunkčnost bez JavaScriptu, což je pro určitý typ webů zásadní překážka.

Obsahový web vytvořený tímto způsobem bude obtížně zpracovatelný pro roboty vyhledávačů.

Problematický je obvykle i delší čas prvního načtení (musí se stáhnout potřebné skripty a až potom se začne stahovat vlastní obsah).

U některých typů webových aplikací tyto nevýhody ale nemusí vadit, případně je převýší výhody.