close

Jednostránková aplikace

Přejít na navigaci Přejít na hledání

V informatice s jednostránkovou aplikací (v italštině : aplikace na jedné stránce ) nebo ve zkratce SPA rozumíme webovou aplikaci nebo webovou stránku, kterou lze používat nebo konzultovat na jediné webové stránce s cílem poskytnout uživateli více zkušeností. tekuté a podobné desktopovým aplikacím tradičních operačních systémů .

V jednostránkové aplikaci je veškerý potřebný kód ( HTML , JavaScript a CSS ) načten při jediném načtení stránky nebo jsou příslušné zdroje dynamicky načteny a přidány na stránku v případě potřeby, obvykle v reakci na akce uživatele.

Image
Vlevo jednostránkový web. Vpravo vícestránkový

Stránka se v žádném okamžiku procesu znovu nenačte, ani neopustí kontrolu na jiné stránce, ačkoli moderní webové technologie, jako je pushState () API HTML5 , mohou poskytnout vnímání a navigaci na samostatných logických stránkách v aplikaci. Interakce s jednostránkovou aplikací často zahrnuje dynamickou komunikaci s webovým serverem .

Technické přístupy

Existují různé techniky, které umožňují prohlížeči zachovat jednu stránku, i když aplikace vyžaduje komunikaci se serverem.

JavaScript framework

Frameworky a knihovny JavaScriptu webových prohlížečů, jako jsou AngularJS, Ember.js, ExtJS, Knockout.js, Meteor.js, React, Vue.js a Svelte, přijaly principy SPA. Kromě ExtJS jsou všechny tyto open source.

  • AngularJS [1] je zcela klientský framework. Model AngularJS je založen na obousměrném vázání dat uživatelského rozhraní. Datová vazba je automatický způsob aktualizace pohledu při každé změně modelu a také aktualizace modelu při každé změně pohledu. HTML šablona se zkompiluje v prohlížeči. Doba kompilace vytváří čisté HTML, které prohlížeč vrací v zobrazení v reálném čase. Krok se opakuje pro další zobrazení stránky. V tradičním programování HTML na straně serveru koncepty jako řadič a model interagují v rámci procesu serveru a vytvářejí nové pohledy HTML. V rámci AngularJS jsou stavy řadiče a modelu udržovány v klientském prohlížeči. Proto lze nové stránky generovat bez jakékoli interakce se serverem.
  • Ember.js [2] je klientský webový JavaScript aplikační framework založený na modelu softwarové architektury MVC (model - view - controller). Umožňuje vývojářům vytvářet jednostránkové škálovatelné aplikace začleněním běžných idiomů a osvědčených postupů do rámce, který poskytuje bohatý objektový model, obousměrnou deklarativní datovou vazbu, vypočítané vlastnosti, modely automatické aktualizace založené na Handlebars.js a směrovač pro správa stavu aplikace.
    Snímek obrazovky ExtJs
    Snímek obrazovky ExtJs
  • ExtJS je také framework na straně klienta, který vám umožňuje vytvářet aplikace MVC. Má vlastní systém událostí, správu oken a rozvržení, správu stavu (obchody) a různé komponenty uživatelského rozhraní (mřížky, dialogy, prvky formuláře atd.). Má svůj vlastní třídní systém s dynamickým nebo statickým nakladačem. Aplikace postavená s ExtJS může existovat samostatně (se stavem v prohlížeči) nebo se serverem (například s REST API, které se používá k plnění jejích interních archivů). ExtJS má pouze vestavěnou funkci pro použití localStorage, takže větší aplikace vyžadují server k uložení stavu.
  • Knockout.js [3] je framework na straně klienta, který používá modely založené na vzoru Model-View-ViewModel.
  • Meteor.js [4] je full-stack (klient-server) JavaScript framework určený výhradně pro SPA. Vyznačuje se jednodušším vázáním dat než Angular, Ember nebo ReactJS a používá protokol Data Distribution a model publikování a předplatného k automatickému šíření změn dat klientům v reálném čase, aniž by vývojář musel psát jakýkoli synchronizační kód. Odezva celého zásobníku zajišťuje, že všechny vrstvy, od databáze po šablony, se v případě potřeby automaticky aktualizují. Ekosystémové balíčky jako Server Side Rendering [5] řeší problém optimalizace pro vyhledávače.
  • React [6] je JavaScriptová knihovna pro vytváření uživatelských rozhraní. Provozuje ho Facebook, Instagram a komunita jednotlivých vývojářů a společností. React používá nový jazyk, který je kombinací JS a HTML. Několik společností používá React with Redux (knihovna JavaScript), která přidává funkci správy stavu, která (s mnoha dalšími knihovnami) umožňuje vývojářům vytvářet složité aplikace.
  • Vue.js [7] je JavaScript framework pro vytváření uživatelských rozhraní. Vývojáři Vue také poskytují Vuex pro státní správu.
  • Svelte [8] je framework pro vytváření uživatelských rozhraní, který kompiluje Svelte kód pro JavaScript DOM manipulace, čímž se vyhne nutnosti sdružovat framework u klienta a umožňuje jednodušší syntaxi vývoje aplikací.

Ajax

Od roku 2006 byla nejdůležitější používaná technika Ajax [9] . Ajax zahrnuje použití asynchronních požadavků na server pro data XML nebo JSON, jako je JavaScript XMLHttpRequest nebo modernější načítání () (od roku 2017) nebo zastaralý objekt ActiveX. Na rozdíl od deklarativního přístupu většiny rámců SPA, s Ajaxem web přímo používá JavaScript nebo knihovnu JavaScript, jako je jQuery, k manipulaci s DOM a úpravě prvků HTML. Ajax byl dále popularizován knihovnami jako jQuery, který poskytuje jednodušší syntaxi a normalizuje chování Ajaxu v různých prohlížečích, které se historicky chovaly jinak.

WebSocket

WebSockets jsou obousměrná technologie komunikace klient-server v reálném čase, která je součástí specifikace HTML5. Pro komunikaci v reálném čase je jejich použití lepší než Ajax z hlediska výkonu a jednoduchosti [10] .

Přenos dat (XML, JSON a AJAX)

Požadavky na server obvykle vedou buď k nezpracovaným datům (např. XML nebo JSON), nebo zpětnému HTML. V případě, že server vrátí HTML, JavaScript na klientovi aktualizuje částečnou oblast DOM (Document Object Model [11] ). Když jsou vrácena nezpracovaná data, proces JavaScript XML / (XSL) na straně klienta (a v případě JSON šablona) se často používá k překladu nezpracovaných dat do HTML, které se pak používá k aktualizaci dílčí oblasti DOM.

Události odeslané serverem

Server Sent Events (SSE) je technika, pomocí které mohou servery zahájit přenos dat klientům prohlížeče. Jakmile je navázáno počáteční připojení, tok událostí zůstává otevřený, dokud jej klient neuzavře. SSE jsou odesílány přes tradiční HTTP a mají řadu funkcí, které WebSockets postrádají, jako je automatické opětovné připojení, ID událostí a možnost odesílat libovolné události.

Plugin prohlížeče

Asynchronních serverových volání lze také dosáhnout pomocí technologií plug-in prohlížeče, jako je Silverlight, Flash nebo nyní zastaralé Java applety.

Architektura serveru

Architektura tenkého serveru

SPA přesouvá logiku ze serveru na klienta, přičemž role webového serveru se vyvine v čistě datové API nebo webovou službu. Tato architektonická změna byla v některých prostředích nazývána „architektura tenkého serveru“, aby se ukázalo, že složitost se přesunula ze serveru na klienta.

Silná architektura se stavem serveru

Server udržuje potřebný stav v paměti klienta stavu stránky. Tímto způsobem, když na server zasáhne jakýkoli požadavek (obvykle akce uživatele), server odešle příslušný HTML a / nebo JavaScript s konkrétními změnami, aby uvedl klienta do nového požadovaného stavu (obvykle přidání / smazání / aktualizace části DOM klient). Současně se aktualizuje stav na serveru. Většina logiky se provádí na serveru a HTML se obvykle zobrazuje také na serveru. V jistém smyslu server simuluje webový prohlížeč, přijímá události a provádí rozdílové změny stavu serveru, které se automaticky šíří klientovi.

Tento přístup vyžaduje více paměti a zpracování serveru, ale výhodou je zjednodušený model vývoje, protože aplikace je na serveru plně šifrována a data a stav uživatelského rozhraní na serveru jsou sdíleny ve stejném prostoru.

Tlustý bezstavový server architektura

Toto je varianta "stavového" přístupu serveru. Klientská stránka odesílá data představující její aktuální stav na server, obvykle prostřednictvím požadavků Ajax. Pomocí těchto dat je server schopen rekonstruovat stav klienta té části stránky, kterou je třeba upravit, a může vygenerovat potřebná data nebo kód (např. JSON nebo JavaScript), který se vrátí klientovi, aby jej uvedl do nový stav , obvykle změnou DOM stránky na základě akce klienta, který provedl požadavek.

Tento přístup vyžaduje odeslání většího množství dat na server a může vyžadovat více prostředků k částečné nebo úplné obnově stavu stránky klienta na serveru. Zároveň je tento přístup snadněji škálovatelný, protože na serveru nejsou uložena žádná data stránek pro klienty, takže požadavky Ajax lze posílat různým serverovým uzlům bez nutnosti sdílení dat relace nebo afinity k serveru.

Místní spuštění

Některé SPA lze spustit z místního souboru pomocí schématu URI souboru. To dává uživatelům možnost stáhnout SPA ze serveru a spustit soubor z místního úložného zařízení bez závislosti na připojení k serveru. Pokud si SPA přeje ukládat a aktualizovat data, musí používat webové úložiště založené na prohlížeči. Tyto aplikace těží z HTML5 [12] .

Výzvy s modelem SPA

Protože SPA je evolucí z bezstavového modelu redesignu stránek, pro který byly prohlížeče původně navrženy, objevily se některé nové výzvy. Mezi možná řešení (různé složitosti, úplnosti a kontroly autora) patří:

  • Knihovny JavaScriptu na straně klienta.
  • Webové rámce na straně serveru se specializují na model SPA [13] [14] [15] .
  • Evoluce prohlížečů a specifikace HTML5, navržená pro model SPA.

Kritika

Existuje několik kritik jednostránkových webů [16] [17] :

  • Jednostránkové webové stránky jsou navrženy podle ústředního tématu nebo tématu, takže mohou indexovat pouze jednu větu.
  • Pokud se návštěvník potřebuje dozvědět více o produktu, službě nebo obsahu zobrazeném na webu, bude pro jednostránkový web obtížné zobrazit více obsahu potřebného k tomu, aby se dozvěděl více o jednom nebo více tématech.
  • Jednostránkový web má pouze jednu sadu metadat, takže poskytuje pouze jednu značku H1 a jednu značku „description“. Není tedy možné silo [18] ani členit web do tematických sekcí na základě klíčových slov [19] .
  • Velké množství obsahu na jedné stránce znamená, že může být těžkopádné a načítání trvat déle než web s více stránkami.
  • SEO upřednostňuje webové stránky s vysokým počtem odkazů, interních i externích. Jednostránkové webové stránky mají omezenou schopnost zahrnovat mnoho interních odkazů.
  • Tlačítka prohlížeče „vpřed“ nebo „zpět“ ve výchozím nastavení nefungují. To představuje překážku použitelnosti, když uživatel stiskne tlačítko Zpět a očekává stav předchozí obrazovky v rámci SPA, namísto toho se v historii prohlížeče zobrazí předchozí stránka, nikoli webová stránka samotná (jak se to stalo u webových stránek vytvořených v Adobe Flash ) . . Tradičním řešením pro SPA byla změna identifikátoru hash fragmentu URL prohlížeče na základě aktuálního stavu obrazovky. Toho lze dosáhnout pomocí JavaScriptu a způsobí , že se v prohlížeči vytvoří události historie URL . Dokud je SPA schopno obnovit stejný stav obrazovky z informací obsažených v hash URL adresy, očekávané chování tlačítka Zpět je zachováno. Aby se to dále řešilo, specifikace HTML5 zavedla pushState a replaceState poskytující programový přístup ke skutečné URL a historii prohlížeče.
  • Analytické nástroje, jako je Google Analytics , do značné míry spoléhají na načítání celých nových stránek v prohlížeči. Lázně takto nefungují. Po načtení první stránky jsou všechny následné změny stránky a obsahu interně zpracovávány aplikací, která by měla jednoduše zavolat funkci pro aktualizaci balíčku analýzy. Tím, že se nepodaří tuto funkci zavolat, prohlížeč nikdy nespustí nové načtení stránky, nic se nepřidá do historie prohlížeče a analytický nástroj netuší, kdo co na webu dělá. Události načítání stránky můžete do SPA přidat pomocí rozhraní API „History“ HTML5; to pomůže integrovat analýzu. Obtížné je to zvládnout a zajistit, aby bylo vše přesně sledováno - to zahrnuje kontrolu chybějících sestav a dvojitých záznamů. Některé rámce poskytují integraci analýzy open source zaměřenou na většinu hlavních poskytovatelů analýzy. Vývojáři je mohou integrovat do aplikace a zajistit, aby vše fungovalo dobře, ale nemusíte vše spouštět od začátku.

Poznámky

  1. ^ AngularJS - Superheroic JavaScript MVW Framework , na angularjs.org . Staženo 1. června 2022 .
  2. ^ Ember.js – framework pro ambiciózní webové vývojáře , na emberjs.com . Staženo 1. června 2022 .
  3. ^ Knockout: Home , na knockoutjs.com . Staženo 1. června 2022 .
  4. ^ Meteor Software: Platforma pro vytváření, hostování, nasazování a škálování full-stack Javascript aplikací , na www.meteor.com . Staženo 1. června 2022 .
  5. ^ Serverové vykreslování pro Meteor | MeteorHacks , na web.archive.org , 20. března 2015. Staženo 18. ledna 2021 (archivováno z originálu 20. března 2015) .
  6. ^ React - Knihovna JavaScriptu pro vytváření uživatelských rozhraní na adrese respondjs.org . Staženo 1. června 2022 .
  7. ^ Vue.js – Progresivní rámec JavaScriptu | Vue.js na vuejs.org . Staženo 1. června 2022 .
  8. ^ Svelte • Kyberneticky vylepšené webové aplikace na svelte.dev . Staženo 1. června 2022 .
  9. ^ David Flanagan , JavaScript: The Definitive Guide: The Definitive Guide , "O'Reilly Media, Inc.", 17. srpna 2006, ISBN  978-0-596-55447-7 . Staženo 18. ledna 2021 .
  10. ^ CSDL | IEEE Computer Society , na computer.org . Staženo 18. ledna 2021 .
  11. ^ Pomocí InnerHTML , na webrocketx.com . Staženo 18. ledna 2021 .
  12. ^ nehostované webové aplikace na unhosted.org . Staženo 18. ledna 2021 .
  13. ^ DerbyJS , na derbyjs.com . Staženo 18. ledna 2021 .
  14. ^ balderdashy / sails . Balderdash, 18. ledna 2021. Staženo 18. ledna 2021 .
  15. ^ ItsNat , na itsnat.sourceforge.net . Staženo 18. ledna 2021 .
  16. ^ Sean , 5 nejlepších důvodů, proč jsou jednostránkové weby špatné pro SEO , na SEO Hacker | Společnost SEO založená na Filipínách , 27. června 2018. Načteno 18. ledna 2021 .
  17. ^ Nevýhody jednostránkových webů | Flavioweb.net , na flavioweb.net . Staženo 18. ledna 2021 .
  18. ^ Salvatore Capolupo, The art of siloing – How to structure your website , on capolooper.it , 13 December 2020. Staženo dne 18. ledna 2021 .
  19. ^ Seo Siloing: SEO ve struktuře webových stránek , na AvantGrade , 9. ledna 2020. Staženo 18. ledna 2021 .

Externí odkazy

Převzato z " https://it.wikipedia.org/w/index.php?title=Single-page_application&oldid=127693796 "