Jednostránková aplikace (SPA) je webová aplikace, která je uživateli prezentována prostřednictvím jediné stránky HTML, aby byla pohotovější a přesněji replikovala desktopovou aplikaci nebo nativní aplikaci.
Někdy přichází SPA defirozhraní jedné stránky (SPI).
Jednostránková aplikace může načíst všechny HTML, JavaScript a CSS aplikace během počátečního načtení, nebo může dynamicky načítat zdroje pro aktualizaci v reakci na interakci uživatele nebo jiné události.
Jiné webové aplikace nabízejí uživateli domovskou stránku propojenou s částmi aplikace na samostatných HTML stránkách, což znamená, že uživatel musí čekat na načtení nové stránky pokaždé, když zadá nový požadavek.
Technologie
SPA používají HTML5 a Ajax (asynchronní JavaScript a XML), aby umožnily plynulé a dynamické reakce na požadavky uživatelů, což umožňuje okamžitou aktualizaci obsahu, když uživatel provede akci. Po načtení stránky proběhnou interakce se serverem prostřednictvím volání Ajax a data se vrátí, detekovaná ve formátu JSON (JavaScript Object Notation), aby se stránka obnovila bez nutnosti opětovného načtení.
SPA v detailu
Jednostránkové aplikace se vyznačují schopností přepracovat libovolnou část uživatelského rozhraní, aniž by k načtení HTML vyžadovaly zpáteční cestu serveru. Toho je dosaženo oddělením dat od prezentace dat pomocí vrstvy modelu, která spravuje data, a vrstvy zobrazení, která čte z modelů.
Dobrý kód pochází z vícenásobného řešení stejného problému nebo jeho refaktorování. Obvykle se tento proces vyvíjí v opakujících se vzorcích, přičemž jeden mechanismus dělá totéž konzistentně.
Chcete-li napsat udržitelný kód, musíte napsat kód jednoduchým způsobem. Toto je neustálý boj, ve skutečnosti je snadné přidat složitost (entlance/závislosti) psaním kódu k vyřešení problému; a je snadné vyřešit problém způsobem, který nesnižuje složitost.
Jmenné prostory jsou toho příkladem.
Jednostránkové aplikace (SPA) Porovnání vícestránkových aplikací (MPA).
Vícestránkové aplikace (MPA) obsahují více stránek se statickými daty a odkazy na jiné weby. HTML a CSS jsou hlavní technologie používané k vývoji webových stránek MPA. Mohou používat JavaScript ke snížení zatížení a zvýšení rychlosti. Organizace, které nabízejí širokou škálu služeb, jako jsou internetové obchody, by měly zvážit použití MPA, protože usnadňují připojení k různým databázím uživatelů.
Jednostránkové aplikace se liší od vícestránkových aplikací v následujících ohledech:
- Vývojový proces: Při vytváření MPA nepotřebujete na rozdíl od SPA znalosti JavaScriptu. Spojení front-endů a back-endů v MPA však znamená, že tato místa vyžadují relativně delší dobu výstavby než SPA.
- velocità: MPA běží relativně pomaleji, což vyžaduje načtení každé nové stránky od začátku. SPA se však po počátečním stažení načítají mnohem rychleji, protože ukládají data do mezipaměti pro pozdější použití.
- Optimalizace pro vyhledávače: Vyhledávače mohou snadno indexovat webové stránky pomocí MPA. MPA mají více stránek procházených vyhledávači, aby generovaly lepší hodnocení SEO. Obsah každé stránky je také statický, takže je přístupnější. Naproti tomu SPA mají stránku s jedinou unikátní URL (Uniform Resource Locator). Používají také JavaScript, který většina vyhledávačů neindexuje správně. To činí hodnocení SEO pro SPA náročnější.
- Zabezpečení: V MPA musíte zabezpečit každou online stránku jednotlivě. SPA jsou však náchylnější k útokům hackerů. Ale správným přístupem mohou vývojové týmy zlepšit zabezpečení aplikací.
Vzhledem k tomu, že stále více firem migruje k používání SPA, budou se vyvíjet prohledávače a vyhledávače, aby je lépe indexovaly. Vzhledem k jeho rychlosti je pouze otázkou, kdy se SPA stanou běžnou volbou pro vývoj webových aplikací. Pak se výhody MPA oproti SPA začnou vytrácet.
Kdy používat jednostránkové aplikace?
Existuje pět scénářů, kdy jsou takové aplikace nejrelevantnější:
- Uživatelé, kteří chtějí vytvořit web s dynamickou platformou a nižším objemem dat, mohou využít SPA.
- Uživatelé, kteří plánují vytvořit mobilní aplikaci pro svůj web, mohou také zvážit použití SPA. Mohou používat backendové API (Application Programming Interface) pro web a mobilní aplikaci.
- Architektura SPA je vhodná pro budování sociálních sítí, jako je Facebook, platformy SaaS a uzavřené komunity, protože vyžadují méně SEO.
- Uživatelé, kteří chtějí svým spotřebitelům nabídnout bezproblémovou interakci, by také měli využívat SPA. Spotřebitelé mají také přístup k živým aktualizacím dat a grafů živého vysílání.
- Uživatelé, kteří chtějí poskytovat konzistentní, nativní a dynamické uživatelské prostředí napříč zařízeními, operačními systémy a prohlížeči.
Dobrý tým by měl mít rozpočet, nástroje a čas na vytvoření vysoce kvalitní jednostránkové aplikace. To zajistí spolehlivé a efektivní SPA, které nebude mít prostoje související s provozem.
Architektura jednostránkové aplikace
Jednostránkové aplikace komunikují s návštěvníky tak, že načítají aktuální stránku a pracují na ní, takže není potřeba načítat více webových stránek ze serveru.
Webové stránky s SPA se skládají z jediného URL odkazu. Obsah se stáhne a po kliknutí se aktualizují konkrétní součásti uživatelského rozhraní (UI). Uživatelská zkušenost je vylepšena, protože uživatel může interagovat s aktuální stránkou při načítání nového obsahu ze serveru. Když dojde k aktualizaci, části aktuální stránky se aktualizují novým obsahem.
Počáteční požadavek klienta ve SPA načte aplikaci a všechna její relevantní aktiva, jako jsou HTML, CSS a JavaScript. Počáteční soubor načítání může být významný pro složité aplikace a může mít za následek pomalejší načítání. Aplikační programovací rozhraní (API) načítá nová data, když uživatel prochází SPA. server odpoví pouze daty ve formátu JSON (JavaScript Object Notation). Po obdržení těchto dat prohlížeč obnoví zobrazení aplikace, kterou uživatel vidí, aniž by znovu načítal stránku.
Architektura jednostránkové aplikace zahrnuje technologie vykreslování na straně serveru a na straně klienta. Web se zobrazuje a zobrazuje uživateli prostřednictvím vykreslování na straně klienta (CSR), vykreslování na straně serveru (SSR) nebo generátoru statických stránek (SSG).
- Vykreslování na straně klienta (CSR)
Při vykreslování na straně klienta prohlížeč požádá server o soubor HTML a obdrží základní soubor HTML s připojenými skripty a styly. Při provádění JavaScriptu se uživateli zobrazí prázdná stránka nebo obrázek načítání. SPA načte data, vytvoří vizualizace a vloží data do Document Object Model (DOM). Poté se SPA připraví k použití. CSR je často nejdelší ze tří alternativ a může občas zahltit prohlížeč kvůli velkému využití prostředků zařízení při prohlížení obsahu. CSR je navíc skvělou alternativou pro weby s vysokou návštěvností, protože poskytuje informace spotřebitelům bez nadměrné komunikace se serverem, což vede k rychlejšímu uživatelskému zážitku.
- Vykreslování na straně serveru (SSR)
Během vykreslování na straně serveru si prohlížeče vyžádají soubor HTML ze serveru, který načte požadovaná data, vykreslí SPA a vytvoří soubor HTML pro aplikaci na cestách. Přístupný materiál je poté prezentován uživateli. Architektura SPA je potřebná pro připojení událostí, vytvoření virtuálního DOM a provádění dalších operací. Poté se SPA připraví k použití. Díky SSR je program rychlý, protože kombinuje rychlost SPA a nepřetěžuje prohlížeč uživatele.
- Statický generátor stránek (SSG)
V rámci statického nástroje pro tvorbu webu prohlížeče okamžitě požádají server o soubor HTML. Stránka se zobrazí uživateli. SPA načte data, vygeneruje pohledy a naplní objektový model dokumentu (DOM). Poté je SPA připraven k použití. Jak vyplývá z názvu, SSG jsou většinou vhodné pro statické stránky. Poskytují statické stránky s dobrou a rychlou možností. U webových stránek s dynamickým obsahem se uživatelům doporučuje zvolit jednu z dalších dvou možností vykreslování informací.
Výhody jednostránkových aplikací
Velké společnosti jako Meta, YouTube a Netflix přešly od vícestránkových aplikací k jednostránkovým. SPA nabízejí hladší uživatelský zážitek, vyšší výkon a odezvu. Níže jsou uvedeny výhody používání jednostránkových aplikací.
- Funkce ukládání do mezipaměti
Jednostránková aplikace odešle jeden požadavek na server při prvním stažení a uloží všechna přijatá data. Spotřebitelé mohou v případě potřeby používat přijatá data k práci offline, což uživatelům usnadňuje práci, protože jim to umožňuje spotřebovávat méně datových zdrojů. Pokud má klient špatné připojení k internetu, mohou být místní data synchronizována se serverem, pokud to připojení LAN umožňuje.
- Rychlé a citlivé
Použití SPA může zvýšit rychlost webu, protože obnovuje pouze požadovaný obsah namísto obnovování celé stránky. SPA načítají spíše menší soubor JSON než novou stránku. Soubor JSON zajišťuje rychlejší načítání a efektivitu. Výsledkem je okamžitý přístup ke všem funkcím a funkcím stránky bez jakýchkoli prodlev. To je obrovské plus, protože doba načítání webu může výrazně ovlivnit příjmy a tržby.
SPA umožňují plynulé přechody tím, že okamžitě poskytují všechny informace na stránce. Web nemusí být aktualizován, takže jeho procesy jsou efektivnější než typické online aplikace.
S SPA také aktiva, jako jsou HTML, CSS a skripty Jáva budou načteny pouze jednou za životnost aplikace. Tam a zpět se vyměňují pouze nezbytná data.
Stránky s SPA také umožňují uživatelům rychlejší navigaci díky ukládání do mezipaměti a nižším objemům dat. Tam a zpět se přenášejí pouze nezbytná data a stahují se pouze chybějící části aktualizovaného obsahu.
- Ladění pomocí Chrome
Ladění zjišťuje a odstraňuje chyby, chyby a zranitelnosti zabezpečení webových aplikací, které zpomalují výkon. Ladění SPA je snadné díky vývojářským nástrojům Chrome. Vývojáři mohou ovládat vykreslování kódu JS z prohlížeče, ladit SPA bez prosévání mnoha řádků kódu.
SPA jsou postaveny na platformách JavaScript, jako jsou vývojářské nástroje AngularJS a React, což usnadňuje jejich ladění pomocí prohlížečů Chrome.
Vývojářské nástroje umožňují vývojářům pochopit, jak bude prohlížeč vyžadovat data ze serverů, uložit je do mezipaměti a jak bude zobrazovat prvky stránky. Tyto nástroje navíc umožňují vývojářům monitorovat a analyzovat prvky stránky, síťové operace a související data.
- Rychlý vývoj
Během procesu vývoje lze oddělit přední a zadní část SPA, což umožňuje dvěma nebo více vývojářům pracovat paralelně. Změna frontendu nebo backendu neovlivní druhý konec, což podporuje rychlejší vývoj.
Vývojáři mohou znovu použít kód na straně serveru a oddělit SPA od front-endového uživatelského rozhraní. Oddělená architektura v SPA odděluje front-end displeje a back-end služby. To umožňuje vývojářům měnit perspektivy, stavět a experimentovat, aniž by to ovlivnilo obsah nebo se starali o back-end technologie. Zákazníci pak mohou mít konzistentní zkušenost s používáním těchto aplikací.
- Vylepšená uživatelská zkušenost
S SPA získají uživatelé okamžitý přístup k zobrazeným stránkám s veškerým obsahem najednou. To je pohodlnější, protože uživatelé mohou posouvat pohodlně a plynule. Je to jako používat nativní desktopovou nebo mobilní aplikaci.
SPA poskytují pozitivní UX s odlišným začátkem, středem a koncem. Uživatelé se také mohou dostat k požadovanému obsahu bez kliknutí na více odkazů, jako v MPA. Zaznamenáte nižší míru okamžitého opuštění, když uživatelé získají okamžitý přístup k informacím, na rozdíl od MPA, kde jsou uživatelé frustrovaní, protože načítání stránek trvá značné množství času. Navigace je také rychlejší, protože prvky stránky jsou znovu použity.
- Převod do aplikací pro IOS a Android
Vývojáři, kteří chtějí přejít na aplikace pro iOS a Android, by měli používat SPA, protože je relativně snazší převést. Mohou použít stejný kód k přechodu z SPA na mobilní aplikace. Vzhledem k tomu, že celý kód je poskytován v jediné instanci, SPA se snadno orientuje, takže jsou ideální pro mobilní aplikace.
- Kompatibilita napříč platformami
Vývojáři mohou používat jedinou kódovou základnu k vytváření aplikací, které lze spustit na jakémkoli zařízení, prohlížeči a operačním systému. To zlepšuje zážitek spotřebitelů, protože mohou využívat SPA kdekoli. Umožňuje také vývojářům a inženýrům DevOps vytvářet aplikace bohaté na funkce, včetně analýzy v reálném čase, a zároveň vyvíjet aplikace pro úpravu obsahu.
Nevýhody
Přes všechny výhody jednostránkových aplikací vznikají při používání SPA frameworků některé nevýhody. Naštěstí se pracuje na překonání těchto problémů s SPA. Níže jsou uvedeny některé nevýhody;
- Optimalizace pro vyhledávače (SEO)
Všeobecně se má za to, že jednostránkové aplikace nejsou pro SEO vhodné. Většina vyhledávačů, jako je Google nebo Yahoo, už nějakou dobu nedokáže procházet weby SPA založené na interakci Ajaxu se servery. V důsledku toho zůstala většina těchto stránek SPA neindexována. V současné době se roboti Google naučili používat JavaScript místo běžného HTML k indexování webů SPA, což poškozuje hodnocení.
Pokusit se vměstnat SEO do hotového SPA webu je náročné a drahé. Vývojáři musí vytvořit samostatnou webovou stránku vykreslenou serverem vyhledávače, což je neefektivní a vyžaduje mnoho dalšího kódu. Lze použít i jiné techniky, jako je detekce vlastností a předběžné vykreslování. V zařízeních SPA omezuje možnosti SEO pro SPA jediná adresa URL pro každou stránku.
- Navigace pomocí tlačítek zpět a vpřed
Prohlížeče ukládají informace, aby se webové stránky načítaly rychleji. Když spotřebitelé stisknou tlačítko Zpět, většina očekává, že stránka bude v podobném stavu, jako když si ji prohlíželi naposledy, a že přechod proběhne rychle. Tradiční webové architektury to umožňují pomocí kopií webu a souvisejících zdrojů uložených v mezipaměti. V naivní implementaci SPA má však stisknutí tlačítka Zpět stejný účinek jako kliknutí na odkaz. Způsobuje požadavek serveru, větší zpoždění a viditelné změny dat.
Aby vývojáři SPA splnili očekávání uživatelů a poskytli rychlejší zkušenosti, musí napodobovat funkce nativních prohlížečů používajících JavaScript.
- Posuňte umístění
Prohlížeče ukládají informace, jako je poslední pozice posouvání navštívených stránek. Uživatelé však mohou zjistit, že se pozice posouvání změnily při procházení SPA pomocí tlačítek zpět a vpřed v prohlížeči. Například na Facebooku se někdy uživatelé posouvají zpět na své poslední pozice posouvání, ale někdy ne. Výsledkem je neoptimální uživatelská zkušenost, protože musí ručně obnovit posouvání zpět na předchozí pozici posouvání.
K vyřešení tohoto problému musí vývojáři poskytnout kód, který uloží, načte a vyzve ke správné pozici posouvání, když se uživatel posouvá tam a zpět.
- Analýza webových stránek
Přidáním analytického kódu na stránku mohou uživatelé sledovat provoz na stránce. SPA však ztěžují určení, které stránky nebo obsah jsou nejoblíbenější, protože se jedná pouze o jednu stránku. Musíte poskytnout další kód pro analýzu, aby bylo možné sledovat pseudo stránky při jejich prohlížení.
- Bezpečnostní problémy
SPA jsou náchylnější ke kompromitaci prostřednictvím cross site skriptování. Umožňují spotřebitelům stáhnout si celou aplikaci, čímž je vystavují více příležitostem k nalezení zranitelnosti prostřednictvím reverzního inženýrství. K vyřešení tohoto problému musí vývojáři zajistit, aby veškerá logika na straně klienta související se zabezpečením webových aplikací, jako je autentizace a ověřování vstupu, byla na serveru pro ověření zdvojena. Vývojáři také musí poskytnout omezený přístup založený na rolích.
Závěr
Jednostránkové aplikace představují další krok ve vývoji aplikací. Jsou rychlejší, intuitivnější a lze je integrovat s pokročilými funkcemi, jako je přizpůsobení. Proto ty nejlepší společnosti s mnoha souběžnými uživateli, jako je Gmail, Netflix nebo news feed Facebooku, spoléhají na architekturu jediné stránky. Implementací této technologie mohou podniky získat větší hodnotu ze svých online nemovitostí a prosadit se jako digitální podnikání.
Ercole Palmeri
