Single Page Application (SPA)

K čemu slouží Single Page Apps?

S narůstající popularitou offline aplikací a novými JS API a frameworky se stávají jednostránkové aplikace stále populárnější. Pojďme si tedy tyto aplikace představit, k čemu slouží a proč je vůbec použít? Podíváme se také na frameworky React a AngularJS.

Funkcionalita na jedné stránce

Webové aplikace vždy dodržovaly pravidlo rozmístění funkcionality do více stránek, kdy každá stránka odpovídala určitému stavu, události, úkolu. Výhody tohoto postupu jsou zřejmé, např. uložení jednotlivých stránek do záložek. Naopak nevýhodou může být přenos zbytečně velkých dat, která se posílají stále dokola. Nápad na vytvoření jednostránkových aplikací přišel s nástupem AJAXu a vývojem moderních prohlížečů.

Single page application (SPA) jsou aplikace, které mají veškerou funkcionalitu umístěnou na jedné stránce, jak vyplývá i z názvu (jednostránkové aplikace), a používají server pouze jako zdroj a úložiště dat. Veškerá klientská logika se odehrává na jedné stránce, a pokud je zapotřebí pracovat se serverem, děje se to pomocí AJAXu. Zajímavostí je využívání fiktivní změny URL k tomu, aby v SPA fungovala funkce Zpět v prohlížečích.

Proč použít SPA?

Jak už je možná zřejmé, hlavní výhodou SPA je rychlá odezva, protože se ze serveru následně nestahuje celý HTML kód, ale jen data, která se mění. Prohlížeč pak nemusí neustále překreslovat celou stránku. Reaguje pouze na změněné části.

Ovšem největší výhodou je jednoduchost vytvoření takovéto aplikace, protože se logika aplikace vytváří pouze v JavaScriptu. Kód se nemusí psát jednou pro klientskou sekci a jednou pro server.

Jak už bylo zmíněno výše, SPA mají také své nevýhody. U některých typů webových aplikací ale tyto nevýhody nemusí vadit, jelikož je mohou převážit výhody dané aplikace. Jedním z nich může být i oddělení klientské části od serverového API. Pokud napíšete jednostránkovou aplikaci hojně využívající API, zvýší se možná úvodní náklady, ale další práce bude snadnější (právě o to mnohým firmám jde). Jednodušší pak bude například vytvoření klonů (pro tablety či mobilní zařízení).

Jednostránková webová aplikace ve výsledku nepotřebuje ani serverovou technologii pro vytváření stránek. Vystačí si pouze se statickým HTTP serverem, který posílá klientovi HTML, CSS a JavaScriptové soubory. Pokud budete potřebovat pokročilejší technologie, jako například přístup k datům, můžete vhodně použít třeba CouchDB nebo Google App Engine.

React nebo AngularJS?

Pro vytváření Single Page aplikací je možné využít například JS frameworky React (od Facebooku) nebo AngularJS (od Googlu). Pojďme si tedy o nich něco povědět.

React

React je JavaScriptová knihovna (framework), která slouží k programování doplňků pro webové stránky a aplikace. V dnešní době „frčí” MVC modely, které můžeme porovnat s Reactem. V zásadě v tomto modelu React zastupuje view vrstvu. Připodobnit jej můžeme např. k Latte v Nette frameworku. Princip Reactu spočívá v tom, že programátor nepíše jen obyčejný kód, který mění určité stavy apod., ale tvoří kód, jímž určuje, jak má výsledná aplikace vypadat.

Co je tedy jeho výhodou? Největší výhoda pro „neznalce” tohoto frameworku bude oddělení od DOMu. Pouze deklarativně nadefinujeme strukturu HTML skládáním JavaScriptových funkcí. Jednoduše řečeno, zadáme, jak má výsledná stránka (aplikace) vypadat a React sám vytvoří svůj vlastní (virtuální) DOM za nás. Ten poté aktualizuje podle skutečného DOMu. Programátor jen dodává data. V prohlížeči vždy uvidíte aktuální pohled vzhledem k dodaným datům.

AngularJS

Rodina technologií Googlu se neustále rozrůstá a AngularJS do této velké rodiny patří. Protože knihovna jQuery nestačí na vše (míchá dohromady aplikační logiku, zpracování událostí a manipulaci s DOM), je možné použít AngularJS. Ale to jsme trošku odbočili od SPA, zůstaňme spíše, podobně jako u Reactu, u modelu MVC.

Když jsem popisoval, k čemu přirovnat React u MVC architektury, u Angularu jde prakticky o totéž. Rovněž zastupuje view vrstvu. AngularJS je MVC framework, který do HTML přidává řadu elementů a atributů, pomocí kterých lze tvořit dynamické prvky. Můžete také vytvářet vlastní HTML elementy a atributy. Díky všem vlastnostem AngularJS je kód přehledný, jednoduchý a krátký, což potěší určitě každého webového vývojáře, programátora nebo kodéra. Manažeři ocení ušetřené finance.

Závěr

Na závěr bych rád uvedl svůj názor. Jelikož se Facebook nesoustředí na nekonečně mnoho věcí najednou jako Google, volil bych React. Myslím, že se ukáže jeho síla a s přehledem převálcuje Angular i další frameworky. A to z prostého důvodu – Facebook totiž nedělá žádný přehnaně robustní framework, ale knihovnu, která obsahuje vše, co potřebujete, a to v minimalistické podobě, uceleném formátu a jednoduchosti. Žádné složitosti.

Komentáře nejsou povoleny.