Jednostránková aplikace

Jednostránková aplikace ( SPA ), neboli jednostránková aplikace, je webová aplikace nebo webová stránka, která se vejde na jednu stránku za účelem poskytnout uživatelům plynulejší zážitek, jako by šlo o desktopovou aplikaci. V SPA se všechny HTML , JavaScript a CSS načtou jednou ​ nebo se potřebné zdroje načtou dynamicky, když to stránka vyžaduje, obvykle v reakci na akce uživatele. Stránka se nemusí v žádném okamžiku procesu znovu načítat a není třeba ani převádět na jinou stránku, i když moderní technologie (např. HTML5 API pushState()) umožňují navigaci v logických stránkách v rámci aplikace. Interakce s jednostránkovými aplikacemi může zahrnovat dynamickou komunikaci s podkladovým webovým serverem.

Historie

Termín jednostránková aplikace použil Steve Yen v roce 2005, ačkoli tento koncept byl již diskutován v roce 2003. Stuart Morris napsal jednostránkový web slashdotslash.com, který měl v roce 2002 stejné cíle a funkce Ve stejném roce Lucas Birdeau, Kevin Hakman, Michael Peachey a Evan Yeh popsali implementace jednostránkových aplikací v US patentu 8,136,109. ]

Moderní prohlížeče, které dokážou analyzovat HTML5, umožňují vývojářům přesunout UI a aplikační logiku ze serverů na klienty. Knihovny s otevřeným zdrojovým kódem podporují vytváření SPA, aniž by vývojáře nutily jít hluboko do JavaScriptu a potýkat se s technologickými problémy.

Techniky

Existuje několik dostupných technik, které mohou způsobit, že prohlížeč ponechá aplikaci, která vyžaduje komunikaci se serverem, na jedné stránce.

JavaScriptové rámce

Frameworky JavaScriptu pro webové prohlížeče, jako jsou AngularJS , Ember.js , Meteor.js , ExtJS a React , všechny přijaly principy SPA.

• AngularJS je knihovna na straně klienta. AngularJS má šablony, které jsou založeny na technologii obousměrné vazby dat uživatelského rozhraní. Datová vazba je automatický způsob aktualizace pohledu při změně modelu a také aktualizace modelu při změně pohledu. HTML šablona se zkompiluje v prohlížeči. Kroky kompilace vytvoří nezpracovaný HTML, který interpretuje a zobrazuje prohlížeč. Kroky se opakují pro další zobrazení stránky. V tradičním programování, kde se vše provádí na straně serveru, koncepty jako řadič a interakce modelu vytvářejí nové HTML pohledy ze serveru. V rámci AngularJS jsou řadič a model uchovávány v klientském prohlížeči. Vytváření nových stránek tak může být generováno bez jakékoli interakce se serverem.
• Ember.js je framework JavaScript na straně klienta a je založen na architektuře Model-View-Controller . Umožňuje vývojářům vytvářet škálovatelné SPA zahrnující osvědčené postupy, které poskytují objekty modelu, obousměrnou vazbu dat a výpočetní vlastnosti, automatické aktualizace šablon, které využívají Handlebars.js, a obslužný program stavu aplikace.
• Vue.js Vue (vyslovováno /vjuː/, jako pohled) je progresivní rámec pro vytváření uživatelských rozhraní. Na rozdíl od jiných monolitických rámců je Vue od základu navržen tak, aby byl přijímán postupně.

• Meteor.js je Full-Stack JavaScript framework speciálně pro SPA. Má jednodušší možnosti vázání dat než Angular, Ember nebo ReactJS, ​ a používá distribuovaný datový protokol ​ a vzor publikování a předplatného k šíření změn dat klientům v reálném čase, aniž by museli vývojáře nutit psát. jakýkoli synchronizační kód. Full-Stack reaktivita zajišťuje, že všechny vrstvy databáze jsou v případě potřeby automaticky aktualizovány. Ekosystémové balíčky jako Server Side Rendering řeší problém optimalizace pro vyhledávače.

AJAX

Nejznámější používanou technikou je Ajax. Převládá použití JavaScriptového objektu XMLHttpRequest , další aplikace AJAX zahrnují použití prvků skriptu IFRAME nebo HTML. Populární knihovny jako jQuery normalizují chování AJAX napříč různými prohlížeči a výrobci, díky čemuž je AJAX populárnější.

Webové zásuvky

WebSockets jsou technologie komunikace v reálném čase mezi klientem a serverem a jsou součástí specifikace HTML5. Je lepší než AJAX z hlediska výkonu a jednoduchosti. ]

Pluginy prohlížeče

Přestože je tato metoda stará, asynchronní volání na server lze dosáhnout také pomocí technologií zásuvných modulů prohlížeče, jako jsou Silverlight , Flash nebo Java applety .

Přenos dat (XML, JSON a AJAX)

Požadavky na servery obvykle vedou k vracení nezpracovaných dat ( XML nebo JSON ) nebo nového HTML. V případech, kdy se jako výsledek vrátí HTML, JavaScript na klientovi aktualizuje částečnou oblast DOM ( Document Object Model ). Když jsou vrácena nezpracovaná data, JavaScript na straně klienta zpracuje XML nebo JSON, aby provedl překlad nezpracovaných dat do HTML, které se používá k aktualizaci informací v dílčí oblasti DOM.

Architektura serveru

Odlehčená architektura serveru

SPA se logicky přesouvá ze serveru na klienta. To má za následek, že se role webového serveru vyvine ve webovou službu nebo datové API. Tato architektonická změna byla nazvána „Architektura tenkého serveru“, aby se zdůraznilo, že složitost byla přesunuta ze serveru na klienty, a to z důvodu, že se tím snižuje složitost systému.

Architektura serveru s vysokou úrovní stavu

Server sleduje stav klientů na stránce. Tímto způsobem, když na server dorazí požadavek, servery pošlou příslušné HTML a se specifickými změnami klientům, aby mohli přejít do odpovídajícího stavu (normálně přidání/smazání/aktualizace části DOM klienta). Současně se aktualizuje stavový server. Většina logiky je vykonávána na serveru a HTML je také zpracováváno na serveru. V některých případech server simuluje webový prohlížeč, přijímá události a provádí rozdílové změny stavu serveru, které se automaticky přenášejí na klienta.

Tento přístup vyžaduje více paměti serveru a serverového zpracování, ale výhodou je, že model vývoje je jednoduchý, protože a) aplikace je kompletně zakódována na serveru ab) data a stav na serveru jsou uloženy na samotném serveru. prostor bez nutnosti komunikačních mostů mezi serverem a klientem.

Architektura těžkého bezstavového serveru

Je to varianta státního serveru. V tomto případě klient odesílá data, která představují stav, na server, obvykle prostřednictvím požadavků AJAX. Pomocí těchto dat může server rekonstruovat stav klienta a určit část stránky, kterou je třeba upravit, vygenerovat ji s potřebnými daty, která se odešlou zpět klientovi, aby mohl přejít do jiného stavu, upravit strom DOM na základě akce klienta, která spustila požadavek.

Tento přístup vyžaduje odeslání více informací na server a může vyžadovat více výpočetních zdrojů na požadavek k částečné nebo úplné rekonstrukci stránky klienta na serveru. Zároveň je tento přístup škálovatelnější, protože na serveru nejsou uloženy žádné klientské stránky, takže požadavky AJAX lze přenášet na jiný serverový uzel, aniž by bylo nutné sdílet data relace.

Místní provedení

Některé SPA lze spustit pomocí místních souborů prostřednictvím schématu URI. To umožňuje uživatelům stáhnout SPA ze serveru a spustit soubor z místního úložiště, aniž by se museli spoléhat na připojení k serveru. Pokud nějaké SPA vyžaduje ukládání a aktualizaci dat, musí používat webové úložiště, které je založeno na prohlížečích; Tyto aplikace těžily z pokroků HTML5 s ohledem na něj. ]

Výzvy v modelu SPA

Vzhledem k tomu, že SPA je evolucí od modelu „bezstavového překreslování stránek“, na kterém byly navrženy prohlížeče, došlo k některým změnám. Každý z těchto problémů má efektivní řešení s:

• Klientské knihovny JavaScript
• Rámce na straně serveru, které se specializují na model SPA ]
• Vývoj prohlížečů a specifikací HTML5, které ukazují na model SPA ]

Optimalizace pro vyhledávače

Kvůli nedostatečnému spouštění JavaScriptu v populárních prohledávačích vyhledávačů ​ SEO ( Optimalizace pro vyhledávače ) mělo problémy s veřejnými stránkami, které přijaly model SPA. ]

Google prochází adresy URL, které obsahují fragmenty hash začínající na #!. To umožňuje použití hash fragmentů v rámci jediné SPA URL. Web SPA musí implementovat speciální chování, aby bylo možné extrahovat relevantní metadata pro prohledávač vyhledávače. U některých vyhledávačů, které nepodporují schéma hašování URL, zůstávají adresy URL hašované SPA neviditelné.

Alternativně mohou aplikace zpracovat první stránku během načítání na serveru a následných aktualizací na klientovi. To je tradičně obtížné, protože vykreslovací kód může být napsán v jiném jazyce nebo rámci na serveru a klientovi. Použití šablon bez logiky nebo křížové kompilace z jednoho jazyka do druhého nebo použití stejného jazyka na serveru a klientovi může pomoci zvýšit množství kódu, který lze sdílet.

Protože podpora SEO není v SPA triviální, není vhodné používat SPA v kontextech, kde je indexování pro vyhledávače požadavkem. Příklady použití zahrnují aplikace, které zpracovávají soukromá data skrytá za ověřovacím systémem. V případech, kdy jsou tyto aplikace spotřebním zbožím, se používají modely jako „překreslení stránky“ jako na reklamních stránkách, kde se ve vyhledávači objeví dostatek metadat aplikace. V okolí SPA se také shromažďují blogy, fóra podpory a další překreslované artefakty, kde mohou vyhledávače vyhledávat relevantní výrazy.

Další přístup používaný servery s frameworkem zaměřeným na server, jako je ItsNat, který je založen na Javě k vykreslování hypertextů na serveru pomocí stejného jazyka a technologie šablon. V tomto přístupu server přesně zná stav DOM klienta a veškeré požadované změny nebo aktualizace jsou generovány na serveru a poté přenášeny pomocí AJAX, stejný stav JavaScriptu mění na klienta provedením metod DOM. Vývojáři se mohou rozhodnout, které stavy stránky může prohledávač číst pro SEO, a měli by být schopni generovat požadovaný stav při načítání a v HTML namísto JavaScriptu. V případech ItsNat je to automatické, protože ItsNat udržuje klientský strom DOM na serveru jako Java W3C DOM; a zpracování stromu na serveru generuje prostý HTML při načítání a DOM pro požadavky AJAX. Tato dualita je pro SEO velmi důležitá, protože vývojáři mohou na serveru vytvářet pomocí stejného kódu Java a šablon založených na HTML; při načítání je prostý HTML generován pomocí ItsNat, díky čemuž je DOM SEO přátelský. Od verze 1.3 ​ ItsNat poskytuje bezstavový režim, kde klientský DOM není uložen na serveru, protože v tomto režimu je stavový DOM částečně nebo úplně přestavěn na serveru, když jsou požadavky zpracovávány. AJAX požaduje a vyžaduje klient odeslat úplná data DOM o svém stavu; bezstavový režim může být také přátelský pro SEO, protože k této podpoře dochází při počátečním načítání stránky, aniž by byl ovlivněn stavovými režimy.

Existuje několik alternativ, jak zpřístupnit stránku procházení. Zahrnují vytvoření samostatných HTML stránek, které zrcadlí obsah SPA. Server může vytvořit verzi webu založenou na HTML a poskytnout ji prohledávačům, nebo je také možné použít bezhlavý prohlížeč, jako je PhantomJS, ke spuštění aplikací JavaScript a zobrazení výsledku v HTML.

Obě techniky vyžadují manuální práci a mohou skončit bolestí hlavy při údržbě složitých stránek. Existuje také několik SEO úskalí. pokud se vygenerovaný HTML ze serveru velmi liší od SPA obsahu, bude stránka penalizována. Spuštění PhantomJS pro zobrazení HTML může zpomalit rychlost odezvy stránek, což vyhledávače, zejména Google, snižuje vaše hodnocení. ]

Rozdělení kódu klient/server

Jedním ze způsobů, jak zvýšit množství kódu, který je třeba sdílet mezi servery a klienty, je použití nelogických šablon jako Moustache nebo Handlebars . Tyto šablony lze interpretovat v různých jazycích, jako je Ruby na serveru a JavaScript na klientovi, ale sdílení šablon vyžaduje duplikování obchodní logiky používané k výběru správných šablon a jejich naplnění daty. Interpretace těchto šablon může negativně ovlivnit výkon, když se aktualizuje pouze malá část stránky, stejně jako velmi velká vstupní hodnota textu v šabloně. Nahrazení celé šablony by také mohlo narušit výběr uživatele nebo pozici kurzoru, zatímco pouhá aktualizace dat ne. Aby se těmto problémům předešlo, používají aplikace datovou vazbu nebo granulární manipulaci DOM k aktualizaci pouze příslušných částí stránky namísto překreslování celé šablony.

Historie prohlížeče

Podle vlastní definice SPA jednostránková aplikace porušuje design prohlížečů, které používají tlačítka zpět/vpřed. To představuje překážku použitelnosti, když uživatel stiskne tlačítko Zpět, očekával by předchozí obrazovku SPA, ale místo toho by otevřel předchozí stránku, na kterou se dostal před vstupem do aplikace SPA.

Tradičním řešením pro SPA byla změna adresy URL prohlížeče pomocí hashe, který identifikuje fragment podle aktuálního stavu obrazovky. Toho lze dosáhnout pomocí JavaScriptu a způsobí zabudování událostí do historie URL prohlížeče. Dokud SPA dokáže překreslit stejnou obrazovku s informacemi obsaženými v hash URL adresy, očekávané chování je zachováno.

Aby se to vyřešilo jiným způsobem, specifikace HTML5 zavedly metody pushState a replaceState , které poskytují programový přístup k aktuální adrese URL a historii prohlížeče.

Analytics

Analytické nástroje, jako je Google Analytics, do značné míry spoléhají na načítání stránek v prohlížeči vyvolané změnou adresy URL. V SPA po načtení první stránky aplikace interně zpracovává všechny následující stránky a změny obsahu, takže prohlížeč nikdy nespustí úplné opětovné načtení stránky a ani se nepřidávají záznamy do historie prohlížeče. To je důvod, proč dotyčný analytický nástroj netuší, kdo co na dané stránce dělá.

Přidat načtení stránky do SPA

Události načítání lze přidat na web SPA pomocí funkcí historie HTML5; pomáhá to integrovat analytiku. Potíž je v jejich správě a zajištění toho, aby bylo vše přesně sledováno. To zahrnuje kontrolu chybějících sestav a dvojitých záznamů. Dobrou zprávou je, že není potřeba stavět vše od začátku. Existuje několik integrací analytických nástrojů s otevřeným zdrojovým kódem pro Angular, které jsou k dispozici na internetu a nacházejí většinu poskytovatelů analytických služeb. Vývojáři je musí integrovat do aplikace a ujistit se, že vše funguje správně, ale není třeba začínat vše od začátku. ]

Rychlost počátečního nabíjení

SPA mají nižší rychlost načítání než serverové aplikace. Je to proto, že první stažení musí načíst všechny rámce a kód aplikace, než nakreslí to, co je vyžadováno pro prohlížeč HTML. Serverová aplikace potřebuje pouze odeslat požadované HTML do prohlížeče, čímž se sníží latence a doba stahování.

Zvýšení počáteční rychlosti načítání

Existuje několik způsobů, jak zvýšit rychlost SPA, stejně jako moduly líného načítání, které je v případě potřeby stahují. Nemůžete se ale zbavit skutečnosti, že SPA si musí stáhnout frameworky, kód aplikace a pravděpodobně i API pro data, než cokoliv zobrazí v prohlížeči. Toto je do jisté míry scénář „zaplaťte mi nyní nebo zaplaťte později“. Otázka výkonu a čekací doby zůstává na rozhodnutí vývojáře.

Životní cyklus stránky

SPA se plně načte během počátečního načtení stránky a poté jsou oblasti nahrazeny nebo aktualizovány novými fragmenty stránky, jak požaduje server. Aby se zabránilo nadměrnému stahování nepoužívaných funkcí, SPA postupně stahuje funkce, jak jsou potřeba, mohou to být fragmenty stránek nebo celé moduly obrazovky.

Tímto způsobem existuje analogie mezi „stavy“ SPA a „stránkami“ tradiční webové stránky. Vzhledem k tomu, že navigace stavů na stejné stránce je analogická s navigací stránek, teoreticky by mohla být jakákoli webová stránka převedena na web s jednou stránkou nahrazením stránek pouze tam, kde způsobí změnu. Přístup SPA k webové stránce je podobný Single Document Interface (SDI), což je technika pro desktopové aplikace.

Externí odkazy

• Migrace vícestránkových webových aplikací na jednostránková rozhraní Ajax (Delft University of Technology): http://arxiv.org/abs/cs/0610094
• Manifest rozhraní jedné stránky
• AngularJS od Googlu
• Ember.js
• Reagovat na Facebooku
• Mikrorámec JEE pro vývoj služeb AJAX a Websocket: Brutusin-RPC