Nahoru
 

Single Page Application Front-end frameworky a který si vybrat

Weby bývaly jednoduché kusy kódu s trochou stylování a textem. V současné době se však internetové stránky začaly vyvíjet jako obrovské komplexní programy, které se často chovají jako „normální“ desktopové aplikace. Většina těchto webových aplikací jako základ používá jeden z front-end frameworků.

SPA (single page application, česky jednostránková aplikace) je webová aplikace, která dynamicky mění svůj obsah bez přenačtení celé stránky. Aplikace tím docílí rychlejšího a pohodlnějšího přijímaní vstupů uživatele a může tak poskytnout daleko lepší požitek při používání. Jako příklad můžeme uvést webovou kalkulačku, která stejně jako tradiční fyzická kalkulačka po stisku „=“ napíše výsledek, ale už se celá stránka nemusí znovu načíst (pouze se přepíše výsledkové pole).

Abychom docílili dynamické změny obsahu, musíme použít nějaký programovací jazyk zajišťující funkční logiku a případnou asynchronní komunikaci se serverem. Nejpoužívanějším jazykem je v současné době JavaScript, nicméně to se může díky příchodu WebAssembly rychle změnit.

WebAssemly je nový standard aplikovaný ve „svaté čtveřici“ prohlížečů (Chrome, Firefox, Edge a Safari). Diktuje použití a schopnosti běžet v tzv. byte code. Do byte code lze zkompilovat jakýkoliv jazyk, nikoliv pouze JavaScript, který měl v prohlížečích monopol. V současné době již máme k dispozici produkční kompilátor pro jazyky jako C, C++, C# či GO, které dokážou běžet v prohlížečích a v dohledné době můžeme čekat spoustu dalších jazyků. Bohužel, kvůli pozůstatku archivního, avšak stále používaného (hlavně ve státní správě), Internet Explorer, si budeme muset ještě chvíli počkat pro plné nasazení jiných jazyků než JavaScriptu.

SPA framework není vhodné používat vždy

Vzhledem k tomu, že SPA frameworky „generují“ HTML (tedy HTML tvoří dynamicky), používáme jazyky propojující svět dat a HTML (JSX, Razor, …). SPA frameworky pomocí dat a vytvořené dynamické HTML šablony na straně klienta aktualizují webové stránky na základě uživatelských vstupů. To tvoří jistou sadu nevýhod oproti statickému HTML nebo dynamickému HTML, které je na základě požadavku vráceno serverem (HTML je již vygenerováno serverem, SPA framework generuje až na straně klienta). SPA framework doporučuji použít pouze když:

  • Aplikace potřebuje poskytnout bohaté uživatelské rozhraní
  • Nepotřebujeme 100 % podporu prohlížečů
  • Aplikace nepotřebuje být perfektně uzpůsobena robotům, nevidomým apod.
  • Tým umí dobře JavaScript/TypeScript

Pokud některá z výše uvedených podmínek není na 100 % splněna, určitě stojí za to se zamyslet nad nepoužitím SPA frameworku. To bychom měli udělat hlavně když:

  • Aplikace nepotřebuje bohaté uživatelské rozhraní (je spíše statická)
  • Vyžadujeme co nejvyšší podporu prohlížečů (funkce i bez skriptování, staré prohlížeče, …)
  • Aplikace potřebuje být perfektně uzpůsobena robotům, nevidomým apod.
  • Tým neumí dobře používat JavaScript/TypeScript

Použít či nepoužít, to je ta otázka. Každý si na ní však musí najít vlastní odpověď, ne vždy se dá řídit obecnými pravidly. Před velkými projekty určitě stojí za to udělat řádný průzkum, zda se použití SPA frameworku vyplatí.

Hlavní principy SPA frameworku

Již víme, že SPA framework nějakým způsobem pomáhá zvládat dynamické chování a asynchronní načítání stránky. Prozatím všechny známé frameworky tohoto docilují pomocí tzv. virtuálního DOM a vázání dat. Framework si ve své paměti drží a tvoří virtuální podobu aktuálního DOM s tím, že u některých dat si pamatuje vazbu na proměnné.

Pozn.: DOM je Document Object Model a nejrychleji jej lze vysvětlit jako objektová reprezentace HTML.

Pokud uživatel stiskne tlačítko, vyvolá to událost a změní nějakou naší proměnnou. Nyní nastává ta důležitá část: Pomocí běžného skriptování bychom sami museli pomocí DOM API najít požadované elementy závislé na změněných hodnotách a ručně je editovat. To nyní dělat nemusíme, protože sám SPA framework změnu hodnoty detekuje a DOM upraví, a to daleko efektivněji než my. Jinými slovy, my pouze vytvoříme jakousi HTML šablonu, určíme návaznosti dat a následně pouze pracujeme s logikou a daty. DOM je překreslovaný frameworkem, nikoli námi.

Virtuální DOM nemusí znít jako extra výhoda, nicméně šetří obrovské množství práce a energie. Místo složitého a pracného vyhledávání v DOM pouze změníme pár hodnot a máme hotovo. Kromě toho, správně vytvořený je virtuální DOM daleko efektivnější.

Náčrt fungování mapování dat a virtuálního DOM
Obrázek č. 1: Náčrt fungování mapování dat a virtuálního DOM

Každý decentní framework dělí projekt na komponenty. Celou aplikaci můžeme rozdělit na velké množství jednoduchých komponent, které jednu po druhé tvoříme a následně skládáme. Tento modulární přístup umožnuje značnou míru znuvupoužitelnosti kódu, jelikož stačí pouze vybrat potřebné komponenty a přesunout do jiného projektu.

Nejpoužívanější SPA frameworky a důležité knihovny

Nejpoužívanější front-end frameworky a knihovny tvoří tzv. svaté trio, a jsou jimi React, Angular a Vue. Tyto frameworky a knihovny se diametrálně liší, avšak dělají téměř to samé.

React

Knihovna React je rozhodně nejvíce populární a pokud hledáte zaměstnání jako front-endař, tato knihovna je „must know“. React spravuje Facebook a byl vydán v roce 2013.

React na mě působí jako nejlehčí knihovna, a to jak z obtížnostního hlediska, tak z technického. React je opravdu pouze základ/část SPA frameworku, podporující pouze nutnosti (virtuální DOM, data binding). Nemá nativní podporu singleton instancí nebo routování. Na druhou stranu, tyto technologie jsou lehce realizovatelné a díky lehkosti Reactu je možné jej snadno integrovat a vytvářet komponenty do existujících projektů. Pro tvorbu HTML používá jazyk JSX.

Je možné se na React dívat jako na další velkou knihovnu, protože nijak neomezuje, ale zase nijak extra nepomáhá tvořit jednotné prostředí. React je vhodný pro menší až středně velké projekty, ale samozřejmě i ty enterprise (ale u těch je potřeba nějaká práce navíc, případně postahovat spoustu knihoven třetí strany).

Logo React
Obrázek č. 2: Logo React

AngularJS

SPA framework Angular byl vydán v roce 2010 a spravuje jej společnost Google. Celý framework je napsán v jazyce TypeScript.

Angular, co se týče komplexnosti, je naprostý opak Reactu. Angular má nejprudší učící křivku, kterou jsem za poslední dobu u frameworků či knihoven viděl. Angular opravdu nenechává nic náhodě a naprosto všechno si sám implementoval. Virtuální DOM, data binding, singleton injecting, routing, route guards, forms, pipelining, dokonce i na asynchronní komunikaci má vlastní alternativu promises.

Je opravdu neskutečné, jak velký Angular je a dle mého názoru se hodí výhradně pro enterprise nebo středně velké projekty. Nejedná se o žádný odlehčený framework.

Logo AngularJS
Obrázek č. 3: Logo AngularJS

Vue

Framework Vue byl vydán v roce 2014 a je to open-source framework.

Vue je framework mixující jak lehkost Reactu, tak důležité funkce z Angular. Vue umí virtuální DOM, data binding, singleton instance, routing, pipelining a další drobné funkce. Jedná se o takový zlatý střed mezi React a Angular.

Logo Vue.js
Obrázek č. 4: Logo Vue.js

Blazor

Framework Blazor je na tomto seznamu taková specialitka, nicméně jako fanoušek .net jsem jej musel přidat. Jedná se o nový SPA framework, který je součástí ASP.NET, postavený na jazyce C#. Blazor disponuje dvěma módy:

  1. Server-side: Všechny informace o DOM si pamatuje server a pomocí web soketů si v reálném čase vyměňuje data a vykresluje podle toho DOM. Většinu tedy „oddře“ server.
  2. Client-side: Kód a knihovny v C# se zkompiluje do kódu WebAssembly, odešle se klientovy a pracuje na straně klienta (standartní chování front-end frameworků).

Blazor je postaven na jazycích C# a Razor. Razor pouze propojuje světy C# a HTML, tedy pomáhá generovat HTML na základě C# dat a pokynů (podmínek, cyklů apod.).

Blazor umí virtuální DOM, data binding, singleton injecting, routing a další drobné funkce, tedy naprosto vše, co každý front-end framework potřebuje.

Osobně považuji Blazor za můj nejoblíbenější, jelikož jazyk C# daleko předčí JavaScript a má všechny potřebné funkčnosti implementované velmi intuitivním a jednoduchým způsobem. Prozatím se však nejedná o plně hotový framework.

Logo Blazor
Obrázek č. 5: Logo Blazor

Při tvorbě front-endu musíme zvážit, zda se nám vyplatí použít nějaký SPA framework a pokud ano, na základě potřeb a velikosti projektu musíme nějaký zvolit. Ne vždy existuje jasná volba, a ne vždy existuje ideální framework. Pokud však učiníme řádnou analýzu a vybereme to nejvhodnější, výsledek se určitě dostaví.

Zdroje: