Vývoj webových aplikací: single-page vs. multi-page aplikace

Webové aplikace často nahrazují klasický desktopový software. Příčinou je snadná aktualizace a nezávislost na platformě, což ušetří mnoho starostí při správě digitálního produktu. Pokud vás vývoj vlastní webové aplikace zaujal, tak před vámi stojí řada otázek. Jednou z nich je, zda bude vhodnější single-page aplikace (SPA), nebo multi-page aplikace (MPA). Prozradíme vám, jaké jsou jejich výhody i která je vhodnější pro váš projekt.

Co jsou single-page webové aplikace a jak fungují?

Pojem single-page application (zkráceně SPA) se do češtiny překládá jako jednostránková aplikace. Již toto označení napovídá, že single-page aplikace schraňují veškerý obsah na jediné stránce. Tento obsah je uložen na straně serveru, odkud se stáhne na stranu klienta. Celý princip fungování single-page aplikací lze shrnout následovně:

• uživatel zadá do prohlížeče požadovanou URL,
• server zašle na stranu klienta celou aplikaci,
• uživatel pracuje s daty.

Na rozdíl od vícestránkových webových aplikací tak nedochází k opětovnému načítání stránek ze serveru, což se zákonitě projevuje na svižnosti webové aplikace. Jednostránková aplikace je díky tomu schopna okamžitě reagovat na uživatelské požadavky, a právě tato schopnost je jednou z největších motivací, proč zvolit právě vývoj single-page webové aplikace.

Další výhodou je jednoduchost webu a snadná orientace v jeho prvcích, což zajišťuje příjemný uživatelský zážitek. Technické řešení spočívá ve využití JavaScriptu, konkrétně použití frameworků jako je Angular, Ruby on Rails, Vue.js nebo knihovna React. SPA pak můžete vidět v akci na sociální síti Facebook, ve webové aplikaci Gmail nebo ve webové aplikaci Trello.

Výhody a nevýhody single-page webové aplikace

Každá mince má dvě strany, jinak tomu není ani v případě jednotlivých modelů webových aplikací. Zásadní výhoda SPA již byla zmíněna v předchozích odstavcích. Veškerý obsah (HTML, CSS a skripty) se načítají najednou. Aplikace funguje na straně klienta a dokáže v reálném čase reagovat na požadavky uživatele.

Druhou výhodou je, že lze kód ladit přímo v prostředí internetového prohlížeče Google Chrome. Chrome umožňuje monitorování síťových operací, stejně jako sledování statusu jednotlivých prvků. Díky tomu jsou single-page aplikace platformě nezávislé nejen na produkčním webu, ale již při svém vývoji.

Další obrovskou výhodou SPA jsou nezávislost na platformě a responzivita. Dokáží proto lépe reagovat na stále se zvyšující množství uživatelů (v roce 2018 přes 80 %) připojujících se k internetu z dotykového zařízení.

Klasické desktopové aplikace, ve většině případů, vypadají jinak než jejich mobilní provedení, což může vést ke zhoršení orientace v prvcích a obsahu. Responzivní design jednostránkové aplikace tento problém zcela odstraňuje, neboť je pro mobilní i desktopovou verzi na straně frontendu (vzhled) použit stejný kód.

Mimo to SPA přinášejí efektivnější využití mezipaměti. Ve chvíli, kdy webová aplikace odešle požadavek (načtení webu), dojde k přijetí dat a jejich uložení na lokální úložiště. Nedochází tak ke zbytečnému zabírání cache prohlížeče, která se typicky používá pro aktuálně nepotřebná data. Se single-page app lze také pracovat offline, což je obrovským plusem v situaci, kdy dojde k výpadku sítě – nedochází ke ztrátě dat.

Úskalí tvorby single-page webových aplikací

Mezi nevýhody single-page apps patří složitá optimalizace pro vyhledávače čili SEO. Tento model je proto nevhodný pro užití v situacích, kdy je pro úspěch projektu zapotřebí výskyt na vysokých místech ve výsledcích vyhledávání.

Další nevýhodou může být doba trvání prvního načtení stránek. Ta je ovšem mnohonásobně kompenzována tím, že již typicky nedochází ke stahování dalšího obsahu.

Problémy může přinést také samotné technické řešení, kdy nemusí být single-page aplikace plně funkční z důvodu vypnuté podpory JavaScriptu v prohlížeči uživatele. Povaha SPA dále značí horší úroveň zabezpečení, než které umožňují vícestránkové aplikace. Uživatelský zážitek může být narušen také tím, že při používání jednostránkových aplikací nelze využívat historii prohlížeče.

Respektive se nelze vrátit o krok zpět. Pokud tedy například odešlete data z formuláře, nebo stisknutím tlačítka přejdete k dalšímu kroku, nelze se za pomoci historie k předešlému kroku vrátit. Kliknutí na šipku zpět v prohlížeči by vás přesměrovalo na předešlou webovou stránku (například domovskou).

Kromě toho může dojít ke zpomalení funkce aplikace v důsledku alokace paměti. SPA si pro sebe v tomto případě zabere paměť, kterou nedokáže uvolnit ani potom, co ji už nevyužívá. Nemůže ji tak využít ani jiná aplikace nebo stránka a dojde k plýtvání prostředků (respektive k jejich neefektivní správě).

Vývoj vícestránkových webových aplikací

Vývoj vícestránkových webových aplikací (multi-page applications) neboli MPA využívá tradiční způsob fungování. Veškerá zobrazovaná a odesílaná data musí projít přes server. Důsledkem toho je uživatel nucen po zadání příkazu čekat, než přijde odpověď a aplikace nereaguje v reálném čase.

Tato nevýhoda však dnes bývá částečně kompenzována tím, že se obnovují pouze určité části obsahu, čímž se snižuje vytíženost serveru a tím i rychlost odpovědi. MPA se skládají z více stránek, mají proto větší datový objem a více úrovní uživatelského rozhraní. Hodí se tedy pro obsah rozvětvený do více kategorií. Vícestránkové aplikace jsou typicky obtížnější na vývoj. Je totiž důležité klást důraz nejen na stranu klienta, ale i serveru.

Výhodou je zde vizuálnost. Ta je zapříčiněna nejen typickým principem fungování, kdy uživatelé dostávají přesně to, na co jsou zvyklí z webu, ale i přehlednými rozcestníky a kategoriemi. Víceúrovňové stránkování nabízí nelimitované možnosti pro obsah. MPA jsou proto vhodné pro propagaci více druhů produktů.

Oproti single-page aplikacím lze celkem snadno zařídit kvalitní SEO optimalizaci a reportovat využití jednotlivých prvků v Google Analytics. Mezi nevýhody lze bezpochyby řadit složitější vývoj backendu a frontendu. Vývoj i údržba aplikace je proto v tomto případě mnohem náročnější – časově i finančně.

Vývoj webových aplikací: SPA vs. MPA, kterou si vybrat?

V rámci výběru modelu webových aplikací je vhodné zvážení jejího konkrétního cíle. Zásadní je rozmyšlení toho, zda pro účely vašeho digitálního produktu postačí pouze jedna stránka.

Tato volba není vhodná pro aplikace s více kategoriemi, jako je například e-shop. Pokud se ovšem chystáte tvořit obsah, jenž má sloužit jako prezentace jediného produktu, jednostránková aplikace bohatě postačí. Co vše tedy hovoří pro single-page aplikace?

• Vývoj single-page webové aplikace znamená zisk dynamické aplikace s nízkým objemem dat.
• SPA jsou specifická forma webových aplikací, která nabídne perspektivu mobilních aplikací.
• Jednostránkové aplikace jsou skvělou volbou při realizaci sociálních sítí, komunitních stránek nebo členských stránek.
• Single-page aplikace jsou ideálním řešením k prezentaci jednoho produktu nebo služby.
• Uživatelský zážitek SPA vám pomůže vystoupit nad konkurenci.

Vícestránkové webové aplikace neboli MPA jsou oproti tomu vhodné k prezentaci statických informací (text a obrázky), webové aplikace se složitější strukturou – rozcestníky, katalogy, eshopy.

Uvedená využití obou modelů jsou brána v obecné rovině a mohou se u každého projektu lišit. Před tím, než se pustíte do vývoje je proto dobré svou vizi softwaru zkonzultovat s odborníkem, který vám může pomoci nejen s rozhodnutím, ale i se samotným vývojem. V případě zájmu o vývoj single-page aplikace se na nás neváhejte obrátit, postaráme se o celý proces tvorby.