Skip to content

README.md

Latest commit

 

History

History
823 lines (646 loc) · 42 KB

README.md

File metadata and controls

823 lines (646 loc) · 42 KB

Vytvorenie bankovej aplikácie časť 1: HTML šablóny a trasy vo webovej aplikácii

journey
    title Vaša cesta vývoja bankovej aplikácie
    section Základy SPA
      Pochopiť jednotnú stránkovú aplikáciu: 3: Student
      Naučiť sa koncepty šablón: 4: Student
      Ovládnuť manipuláciu s DOM: 4: Student
    section Smerovacie systémy
      Implementovať smerovanie na strane klienta: 4: Student
      Spravovať históriu prehliadača: 5: Student
      Vytvoriť navigačné systémy: 5: Student
    section Profesionálne vzory
      Vybudovať modulárnu architektúru: 5: Student
      Použiť najlepšie praktiky: 5: Student
      Vytvoriť používateľské zážitky: 5: Student
Loading

Keď navigačný počítač Apollo 11 v roku 1969 smeroval na Mesiac, musel prepínať medzi rôznymi programami bez reštartu celého systému. Moderné webové aplikácie fungujú podobne – menia to, čo vidíte, bez znovunačítania všetkého od začiatku. To prináša plynulý a citlivý zážitok, aký dnes používatelia očakávajú.

Na rozdiel od tradičných webových stránok, ktoré pri každej interakcii načítajú celú stránku znova, moderné webové aplikácie aktualizujú iba časti, ktoré je potrebné zmeniť. Tento prístup, podobne ako misijné velenie prepínajúce medzi rôznymi displejmi a zároveň udržiavajúce neustálu komunikáciu, vytvára plynulý zážitok, na ktorý sme si zvykli.

Tu je, čo robí rozdiel tak dramatickým:

Tradičné viacstranové aplikácie Moderné jedno-stranové aplikácie
Navigácia Úplné načítanie stránky pre každú obrazovku
Výkon Pomalejšie kvôli kompletnému stiahnutiu HTML
Používateľský zážitok Trhané bliknutie stránok
Zdieľanie údajov Obtiažne medzi stránkami
Vývoj Viac HTML súborov na údržbu

Pochopenie vývoja:

  • Tradičné aplikácie vyžadujú požiadavky na server pri každej navigácii
  • Moderné SPA sa načítajú raz a obsah aktualizujú dynamicky pomocou JavaScriptu
  • Pokiaľ ide o očakávania používateľov, preferujú okamžité, bezproblémové interakcie
  • Výhody výkonu zahŕňajú zníženú spotrebu šírky pásma a rýchlejšie odpovede

V tejto lekcii vytvoríme bankovú aplikáciu s viacerými obrazovkami, ktoré plynulo spolupracujú. Rovnako ako vedci používajú modulárne prístroje, ktoré možno preexperimentovať na rôzne experimenty, použijeme HTML šablóny ako opakovane použiteľné komponenty, ktoré môžu byť zobrazené podľa potreby.

Budete pracovať s HTML šablónami (opakovane použiteľné vzory pre rôzne obrazovky), JavaScriptovým smerovaním (systém, ktorý prepína medzi obrazovkami) a rozhraním prehliadača pre históriu (ktoré zabezpečuje správnu funkciu tlačidla späť). Toto sú rovnaké základné techniky, ktoré používajú frameworky ako React, Vue a Angular.

Na konci budete mať funkčnú bankovú aplikáciu, ktorá demonštruje profesionálne princípy jedno-stranovej aplikácie.

mindmap
  root((Single-Page Applications))
    Architecture
      Template System
      Client-side Routing
      State Management
      Event Handling
    Templates
      Opakovane použiteľné komponenty
      Dynamický obsah
      Manipulácia s DOM
      Prepínanie obsahu
    Routing
      Správa URL
      História API
      Navigačná logika
      Integrácia prehliadača
    User Experience
      Rýchla navigácia
      Plynulé prechody
      Konzistentný stav
      Moderné interakcie
    Performance
      Znížené požiadavky na server
      Rýchlejšie prechody stránok
      Efektívne využitie zdrojov
      Lepšia odozva
Loading

Prednáškový kvíz

Prednáškový kvíz

Čo budete potrebovať

Budeme potrebovať lokálny webový server na testovanie našej bankovej aplikácie – nebojte sa, je to jednoduchšie, než to znie! Ak ešte nemáte server nastavený, jednoducho si nainštalujte Node.js a spustite npx lite-server zo svojho projektového priečinka. Tento užitočný príkaz spustí lokálny server a automaticky otvorí vašu aplikáciu v prehliadači.

Príprava

Na vašom počítači vytvorte priečinok s názvom bank a vo vnútri súbor index.html. Začneme touto HTML vzorovou štruktúrou:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bank App</title>
  </head>
  <body>
    <!-- This is where you'll work -->
  </body>
</html>

Čo táto východisková štruktúra poskytuje:

  • Zavádza štruktúru dokumentu HTML5 so správnym vyhlásením DOCTYPE
  • Nastavuje kódovanie znakov na UTF-8 pre medzinárodnú podporu textu
  • Umožňuje responzívny dizajn pomocou meta značky viewport pre kompatibilitu s mobilom
  • Nastavuje popisný názov, ktorý sa zobrazí na záložke prehliadača
  • Vytvára čisté telo dokumentu, kde budeme budovať našu aplikáciu

📁 Náhľad štruktúry projektu

Na konci tejto lekcie bude váš projekt obsahovať:

bank/
├── index.html      <!-- Main HTML with templates -->
├── app.js          <!-- Routing and navigation logic -->
└── style.css       <!-- (Optional for future lessons) -->

Zodpovednosť súborov:

  • index.html: Obsahuje všetky šablóny a poskytuje štruktúru aplikácie
  • app.js: Riadi smerovanie, navigáciu a správu šablón
  • Šablóny: Definujú používateľské rozhranie pre prihlasovanie, dashboard a ďalšie obrazovky

HTML šablóny

Šablóny riešia základný problém vo webovom vývoji. Keď Gutenberg vynašiel pohyblivú tlač v 1440. rokoch, uvedomil si, že namiesto vyrezávania celých stránok môže vytvárať opakovane použiteľné písmenkové bloky a usporadúvať ich podľa potreby. HTML šablóny fungujú na rovnakom princípe – namiesto vytvárania samostatných HTML súborov pre každú obrazovku definujete opakovane použiteľné štruktúry, ktoré sa môžu zobraziť podľa potreby.

flowchart TD
    A["📋 Definícia šablóny"] --> B["💬 Skryté v DOM"]
    B --> C["🔍 JavaScript nájde šablónu"]
    C --> D["📋 Klonovanie obsahu šablóny"]
    D --> E["🔗 Pripojenie do viditeľného DOM"]
    E --> F["👁️ Používateľ vidí obsah"]
    
    G["Prihlasovacia šablóna"] --> A
    H["Šablóna panelu"] --> A
    I["Budúce šablóny"] --> A
    
    style A fill:#e3f2fd
    style D fill:#e8f5e8
    style F fill:#fff3e0
    style B fill:#f3e5f5
Loading

Predstavte si šablóny ako plány pre rôzne časti vašej aplikácie. Rovnako ako architekt vytvára jeden plán a používa ho viackrát namiesto prekrikovania tých istých miestností, my vytvárame šablóny raz a následne ich podľa potreby vytvárame. Prehliadač tieto šablóny drží skryté, až kým ich neaktivuje JavaScript.

Ak chcete vytvoriť viacero obrazoviek pre webovú stránku, jedným riešením je vytvoriť jeden HTML súbor pre každú obrazovku, ktorú chcete zobraziť. Toto riešenie však prináša určité nevýhody:

  • Pri prepínaní obrazoviek je potrebné načítať celé HTML znova, čo môže byť pomalé.
  • Je ťažké zdieľať údaje medzi rôznymi obrazovkami.

Iná možnosť je mať len jeden HTML súbor a definovať viacero HTML šablón pomocou prvku <template>. Šablóna je opakovane použiteľný HTML blok, ktorý prehliadač nezobrazuje a musí byť vytvorený za behu pomocou JavaScriptu.

Poďme to zostrojiť

Vytvoríme bankovú aplikáciu s dvoma hlavnými obrazovkami: prihlasovacou stránkou a dashboardom. Najprv pridáme do nášho HTML tela prvok zástupcu – tu sa budú zobrazovať všetky naše rôzne obrazovky:

<div id="app">Loading...</div>

Čo tento zástupca znamená:

  • Vytvára kontajner s ID "app", kde sa budú zobrazovať všetky obrazovky
  • Zobrazuje správu o načítavaní, kým JavaScript nespustí prvú obrazovku
  • Poskytuje jedno miesto, kde sa zobrazí náš dynamický obsah
  • Umožňuje jednoduché cielenie z JavaScriptu cez document.getElementById()

💡 Tip pre odborníkov: Keďže sa obsah tohto prvku bude nahrádzať, môžeme tam dať správu o načítavaní alebo indikátor, ktorý sa zobrazí počas načítavania aplikácie.

Ďalej pridáme pod tým HTML šablónu pre prihlasovaciu stránku. Zatiaľ tam len vložíme nadpis a sekciu obsahujúcu odkaz, ktorý použijeme na navigáciu.

<template id="login">
  <h1>Bank App</h1>
  <section>
    <a href="/dashboard">Login</a>
  </section>
</template>

Analýza tejto prihlasovacej šablóny:

  • Definuje šablónu s unikátnym identifikátorom "login" pre snímanie JavaScriptom
  • Obsahuje hlavný nadpis, ktorý ustanovuje značku aplikácie
  • Obsahuje sémantický prvok <section> na zoskupenie súvisiaceho obsahu
  • Poskytuje navigačný odkaz, ktorý presmeruje používateľov na dashboard

Potom pridáme ďalšiu HTML šablónu pre dashboard. Táto stránka bude obsahovať rôzne sekcie:

  • Hlavičku s titulkom a odkazom na odhlásenie
  • Aktuálny zostatok bankového účtu
  • Zoznam transakcií zobrazený v tabuľke
<template id="dashboard">
  <header>
    <h1>Bank App</h1>
    <a href="/login">Logout</a>
  </header>
  <section>
    Balance: 100$
  </section>
  <section>
    <h2>Transactions</h2>
    <table>
      <thead>
        <tr>
          <th>Date</th>
          <th>Object</th>
          <th>Amount</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </section>
</template>

Porozumejme každej časti dashboardu:

  • Štruktúruje stránku pomocou sémantického prvku <header> obsahujúceho navigáciu
  • Zobrazuje názov aplikácie konzistentne na všetkých obrazovkách pre branding
  • Poskytuje odkaz na odhlásenie, ktorý vedie späť na prihlasovaciu obrazovku
  • Zobrazuje aktuálny stav účtu v samostatnej sekcii
  • Organizuje dáta transakcií pomocou správne štruktúrovanej HTML tabuľky
  • Definuje hlavičky stĺpcov tabuľky pre Dátum, Objekt a Sumu
  • Necháva telo tabuľky prázdne pre dynamické dopĺňanie obsahu neskôr

💡 Tip pre odborníkov: Pri tvorbe HTML šablón, ak chcete vidieť, ako bude vyzerať, môžete zakomentovať riadky <template> a </template> pomocou <!-- -->.

🔄 Pedagogická kontrola

Pochopenie šablónového systému: Pred implementáciou JavaScriptu sa uistite, že rozumiete:

  • ✅ Ako sa šablóny líšia od bežných HTML prvkov
  • ✅ Prečo sú šablóny skryté, až kým ich JavaScript neaktivuje
  • ✅ Význame sémantickej HTML štruktúry v šablónach
  • ✅ Ako šablóny umožňujú opakovane použiteľné UI komponenty

Rýchly seba-test: Čo sa stane, ak odstránite značky <template> okolo vášho HTML? Odpoveď: Obsah sa okamžite zobrazí a stratí funkciu šablóny

Výhody architektúry: Šablóny prinášajú:

  • Opakovateľnosť: Jedna definícia, viac inštancií
  • Výkon: Žiadne opakované parsovanie HTML
  • Údržba: Centralizovaná UI štruktúra
  • Flexibilita: Dynamické prepínanie obsahu

✅ Prečo podľa vás používame id atribúty na šablónach? Mohli by sme použiť niečo iné, napríklad triedy?

Oživenie šablón pomocou JavaScriptu

Teraz potrebujeme spraviť naše šablóny funkčnými. Rovnako ako 3D tlačiareň vezme digitálny plán a vytvorí fyzický predmet, JavaScript vezme naše skryté šablóny a vytvorí viditeľné, interaktívne prvky, ktoré môžu používatelia vidieť a používať.

Proces nasleduje tri konzistentné kroky, ktoré tvoria základ moderného webového vývoja. Keď tento vzor pochopíte, rozpoznáte ho v mnohých frameworkoch a knižniciach.

Ak vyskúšate aktuálny HTML súbor v prehliadači, uvidíte, že zostáva zobrazená správa Loading.... Je to preto, že potrebujeme pridať JavaScriptový kód na vytvorenie a zobrazenie HTML šablón.

Vytvorenie šablóny zvyčajne prebieha v 3 krokoch:

  1. Načítať šablónový prvok v DOM, napríklad pomocou document.getElementById.
  2. Naklonovať šablónový prvok pomocou cloneNode.
  3. Pripojiť ho k DOM pod viditeľný prvok, napríklad pomocou appendChild.
flowchart TD
    A[🔍 Krok 1: Nájsť šablónu] --> B[📋 Krok 2: Klonovať šablónu]
    B --> C[🔗 Krok 3: Pripojiť k DOM]
    
    A1["document.getElementById('login')"] --> A
    B1["template.content.cloneNode(true)"] --> B  
    C1["app.appendChild(view)"] --> C
    
    C --> D[👁️ Šablóna viditeľná používateľovi]
    
    style A fill:#e1f5fe
    style B fill:#f3e5f5
    style C fill:#e8f5e8
    style D fill:#fff3e0
Loading

Vizuálne rozdelenie procesu:

  • Krok 1 lokalizuje skrytú šablónu v štruktúre DOM
  • Krok 2 vytvára pracovnú kópiu, ktorú možno bezpečne upravovať
  • Krok 3 vloží kópiu do viditeľnej časti stránky
  • Výsledok je funkčná obrazovka, s ktorou môžu používatelia pracovať

✅ Prečo je potrebné naklonovať šablónu pred pripojením k DOM? Čo podľa vás nastane, ak tento krok vynecháme?

Úloha

Vytvorte nový súbor app.js vo vašom projektovom priečinku a naimportujte ho v <head> sekcii vášho HTML:

<script src="app.js" defer></script>

Čo tento import skriptu znamená:

  • Prepojuje JavaScriptový súbor s naším HTML dokumentom
  • Používa atribút defer, aby sa skript spustil po dokončení parsovania HTML
  • Umožňuje prístup ku všetkým DOM prvkom, keďže sú pred vykonaním skriptu kompletne načítané
  • Postupuje podľa moderných najlepších praktík načítavania skriptov pre výkon

Teraz v app.js vytvoríme novú funkciu updateRoute:

function updateRoute(templateId) {
  const template = document.getElementById(templateId);
  const view = template.content.cloneNode(true);
  const app = document.getElementById('app');
  app.innerHTML = '';
  app.appendChild(view);
}

Krok za krokom, čo sa deje:

  • Lokalizuje šablónový prvok pomocou jeho jedinečného ID
  • Vytvára hlbokú kópiu obsahu šablóny pomocou cloneNode(true)
  • Nájde kontajner aplikácie, kde sa bude obsah zobrazovať
  • Vyčistí existujúci obsah kontajnera aplikácie
  • Vloží naklonovaný obsah šablóny do viditeľného DOM

Teraz túto funkciu zavolajte s jednou zo šablón a pozrite sa na výsledok.

updateRoute('login');

Čo toto volanie funkcie dosahuje:

  • Aktivuje prihlasovaciu šablónu tým, že odovzdá jej ID ako parameter
  • Demonštruje, ako programovo prepínať medzi rôznymi obrazovkami aplikácie
  • Zobrazí prihlasovaciu obrazovku namiesto správy „Loading...“

✅ Aký je účel tohto kódu app.innerHTML = '';? Čo sa stane bez neho?

Vytváranie trás

Smerovanie je v podstate prepojenie URL na správny obsah. Predstavte si, ako v minulosti telefonní operátori používali prepínače na prepojenie hovorov – prijali prichádzajúcu požiadavku a poslali ju na správnu destináciu. Webový routing funguje podobne, preberá URL požiadavku a rozhoduje, aký obsah sa má zobraziť.

flowchart LR
    A["🌐 Cesta URL<br/>/dashboard"] --> B["🗺️ Objekt trás<br/>Vyhľadávanie"]
    B --> C["🎯 ID šablóny<br/>'dashboard'"]
    C --> D["📌 Nájsť šablónu<br/>getElementById"]
    D --> E["👁️ Zobraziť obrazovku<br/>Klonovať a pripojiť"]
    
    F["📍 /prihlasenie"] --> G["🎯 'prihlasenie'"]
    H["📍 /neznáme"] --> I["❌ Nenájdené"]
    I --> J["🔄 Presmerovať na /prihlasenie"]
    
    style B fill:#e3f2fd
    style E fill:#e8f5e8
    style I fill:#ffebee
    style J fill:#fff3e0
Loading

Tradične webové servery zvládali toto servírovaním rôznych HTML súborov pre rôzne URL. Keďže ale vytvárame jednoplatformovú aplikáciu, musíme to smerovanie riešiť sami pomocou JavaScriptu. Tento prístup nám dáva väčšiu kontrolu nad používateľským zážitkom a výkonom.

flowchart LR
    A["🌐 Cesta URL<br/>/dashboard"] --> B["🗺️ Objekt trás<br/>Vyhľadávanie"]
    B --> C["🎯 ID šablóny<br/>'dashboard'"]
    C --> D["📄 Nájsť šablónu<br/>getElementById"]
    D --> E["👁️ Zobraziť obrazovku<br/>Klonovať a pridať"]
    
    F["📍 /login"] --> G["🎯 'login'"]
    H["📍 /unknown"] --> I["❌ Nenašlo sa"]
    I --> J["🔄 Presmerovať na /login"]
    
    style B fill:#e3f2fd
    style E fill:#e8f5e8
    style I fill:#ffebee
    style J fill:#fff3e0
Loading

Ako prebieha tok smerovania:

  • Zmena URL spustí vyhľadávanie v našom konfiguračnom objekte trás
  • Platné trasy mapujú na konkrétne ID šablón pre vykreslenie
  • Neplatné trasy spustia záložné správanie, aby sa predišlo chybným stavom
  • Vykreslenie šablóny nasleduje trojkrokový proces, ktorý sme sa naučili skôr

Keď hovoríme o webovej aplikácii, Routing voláme zámer mapovať URL na konkrétne obrazovky, ktoré sa majú zobraziť. Na webovej stránke s viacerými HTML súbormi sa to deje automaticky, keďže cesty k súborom sa premietajú do URL. Napríklad s týmito súbormi vo vašom projektovom priečinku:

mywebsite/index.html
mywebsite/login.html
mywebsite/admin/index.html

Ak vytvoríte webový server so zázemím mywebsite, mapovanie URL bude:

https://site.com            --> mywebsite/index.html
https://site.com/login.html --> mywebsite/login.html
https://site.com/admin/     --> mywebsite/admin/index.html

Avšak pre našu webovú aplikáciu používame jeden HTML súbor obsahujúci všetky obrazovky, takže toto predvolené správanie nám nepomôže. Musíme túto mapu vytvoriť manuálne a aktualizovať zobrazenú šablónu pomocou JavaScriptu.

Úloha

Použijeme jednoduchý objekt na implementáciu mapy medzi URL cestami a našimi šablónami. Pridajte tento objekt na začiatok vášho súboru app.js.

const routes = {
  '/login': { templateId: 'login' },
  '/dashboard': { templateId: 'dashboard' },
};

Čo táto konfigurácia trás znamená:

  • Definuje mapovanie medzi URL cestami a identifikátormi šablón
  • Používa syntaktický objekt, kde kľúče sú URL cesty a hodnoty obsahujú informácie o šablóne
  • Umožňuje jednoduché vyhľadanie, ktorá šablóna sa má zobraziť pre danú URL
  • Poskytuje škálovateľnú štruktúru pre pridanie nových trás v budúcnosti Teraz trochu upravme funkciu updateRoute. Namiesto priameho odovzdávania templateId ako argumentu ho chceme načítať tak, že najskôr pozrieme na aktuálnu URL a potom použijeme našu mapu na získanie zodpovedajúcej hodnoty ID šablóny. Môžeme použiť window.location.pathname na získanie iba časti cesty z URL.
function updateRoute() {
  const path = window.location.pathname;
  const route = routes[path];

  const template = document.getElementById(route.templateId);
  const view = template.content.cloneNode(true);
  const app = document.getElementById('app');
  app.innerHTML = '';
  app.appendChild(view);
}

Rozloženie, čo sa tu deje:

  • Extrahuje aktuálnu cestu z URL prehliadača pomocou window.location.pathname
  • Vyhľadáva zodpovedajúcu konfiguráciu trasy v našom objekte routes
  • Získava ID šablóny z konfigurácie trasy
  • Nasleduje rovnaký proces vykresľovania šablón ako predtým
  • Vytvára dynamický systém, ktorý reaguje na zmeny URL

Tu sme napasovali deklarované trasy na zodpovedajúcu šablónu. Môžete si to vyskúšať a zistiť, že funguje správne manuálnou zmenou URL vo vašom prehliadači.

✅ Čo sa stane, ak zadáte neznámu cestu v URL? Ako by sme to mohli vyriešiť?

Pridanie navigácie

Keď máme nastavené smerovanie, používatelia potrebujú spôsob, ako sa v aplikácii pohybovať. Tradičné webové stránky pri kliknutí na odkazy načítavajú celé stránky znova, ale my chceme aktualizovať URL aj obsah bez obnovenia stránky. To vytvára plynulejší zážitok podobný tomu, ako desktopové aplikácie prepínajú medzi rôznymi zobrazeniami.

Musíme koordinovať dve veci: aktualizovať URL prehliadača, aby používatelia mohli záložkovať stránky a zdieľať odkazy, a zároveň zobraziť príslušný obsah. Pri správnej implementácii to vytvára hladkú navigáciu, akú používatelia očakávajú od moderných aplikácií.

sequenceDiagram
    participant User
    participant Browser
    participant App
    participant Template
    
    User->>Browser: Klikne na odkaz "Prihlásiť sa"
    Browser->>App: spustená udalosť onclick
    App->>App: preventDefault() & naviguj na('/dashboard')
    App->>Browser: history.pushState('/dashboard')
    Browser->>Browser: URL sa aktualizuje na /dashboard
    App->>App: volá sa updateRoute()
    App->>Template: Nájdite a skopírujte šablónu dashboardu
    Template->>App: Vráti klonovaný obsah
    App->>Browser: Nahradí obsah aplikácie šablónou
    Browser->>User: Zobraziť obrazovku dashboardu
    
    Note over User,Template: Používateľ klikne na tlačidlo späť v prehliadači
    
    User->>Browser: Klikne na tlačidlo späť
    Browser->>Browser: História sa posunie späť na /login
    Browser->>App: spustená udalosť popstate
    App->>App: updateRoute() volané automaticky
    App->>Template: Nájdite a skopírujte šablónu prihlásenia
    Template->>App: Vráti klonovaný obsah
    App->>Browser: Nahradí obsah aplikácie šablónou
    Browser->>User: Zobraziť obrazovku prihlásenia
Loading

🔄 Pedagogická kontrola

Architektúra Single-Page Application: Overte si svoje pochopenie celého systému:

  • ✅ Ako sa líši klientské smerovanie od tradičného serverového smerovania?
  • ✅ Prečo je API histórie nevyhnutné pre správnu navigáciu v SPA?
  • ✅ Ako šablóny umožňujú dynamický obsah bez obnovenia stránky?
  • ✅ Akú úlohu zohráva spracovanie udalostí pri zachytávaní navigácie?

Integrácia systému: Vaša SPA demonštruje:

  • Správu šablón: znovupoužiteľné UI komponenty s dynamickým obsahom
  • Klientské smerovanie: správa URL bez požiadaviek na server
  • Udalostne riadenú architektúru: responzívna navigácia a používateľské interakcie
  • Integráciu s prehliadačom: podpora histórie a tlačidiel späť/vpred
  • Optimalizáciu výkonu: rýchle prechody a znížené zaťaženie servera

Profesionálne vzory: Implementovali ste:

  • Oddelenie modelu a zobrazenia: šablóny oddelené od aplikačnej logiky
  • Správu stavu: stav URL synchronizovaný so zobrazovaným obsahom
  • Progresívne vylepšenie: JavaScript rozširuje základnú funkcionalitu HTML
  • Používateľskú skúsenosť: hladká, aplikačná navigácia bez obnovenia stránky

� Pohľad do architektúry: Komponenty navigačného systému

Čo budujete:

  • 🔄 Správa URL: aktualizuje adresný riadok prehliadača bez obnovy stránky
  • 📋 Systém šablón: dynamicky vymieňa obsah podľa aktuálnej trasy
  • 📚 Integrácia histórie: udržiava funkčnosť tlačidiel späť/vpred
  • 🛡️ Spracovanie chýb: elegantné záložné riešenia pre neplatné alebo chýbajúce trasy

Ako komponenty spolupracujú:

  • Počúva na udalosti navigácie (kliknutia, zmeny histórie)
  • Aktualizuje URL pomocou History API
  • Vykresľuje príslušnú šablónu pre novú trasu
  • Zabezpečuje bezproblémový používateľský zážitok

Ďalším krokom pre našu aplikáciu je pridať možnosť navigovať medzi stránkami bez potreby manuálne meniť URL. Znamená to dve veci:

  1. Aktualizovať aktuálnu URL
  2. Aktualizovať zobrazenú šablónu na základe novej URL

Druhú časť sme už pokryli funkciou updateRoute, takže teraz musíme vymyslieť, ako aktualizovať aktuálnu URL.

Budeme musieť použiť JavaScript, konkrétne history.pushState, ktorý umožňuje aktualizovať URL a vytvoriť nový záznam v histórii prehliadača bez obnovenia HTML.

⚠️ Dôležitá poznámka: HTML prvok kotevného odkazu <a href> môže byť použitý samostatne na vytváranie hyperodkazov na rôzne URL, ale predvolene spôsobí obnovenie stránky. Pri spracovaní smerovania vlastným javascriptom je potrebné tomuto správaniu zabrániť pomocou funkcie preventDefault() pri udalosti kliknutia.

Úloha

Vytvorme novú funkciu, ktorú môžeme použiť na navigáciu v našej aplikácii:

function navigate(path) {
  window.history.pushState({}, path, path);
  updateRoute();
}

Pochopenie tejto navigačnej funkcie:

  • Aktualizuje URL prehliadača na novú cestu pomocou history.pushState
  • Pridáva nový záznam do zásobníka histórie pre správnu podporu tlačidiel späť/vpred
  • Vyvoláva funkciu updateRoute() na zobrazenie zodpovedajúcej šablóny
  • Zachováva zážitok single-page aplikácie bez obnovenia stránky

Táto metóda najskôr aktualizuje aktuálnu URL na základe danej cesty, potom aktualizuje šablónu. Vlastnosť window.location.origin vracia koreň URL, čo nám umožňuje zostaviť úplnú URL z danej cesty.

Keď už máme túto funkciu, môžeme sa postarať o problém, ktorý nastane, ak cesta nezodpovedá žiadnej definovanej trase. Upraviť funkciu updateRoute tak, že pridáme záložné riešenie na niektorú z existujúcich trás, ak nenájdeme zhody.

function updateRoute() {
  const path = window.location.pathname;
  const route = routes[path];

  if (!route) {
    return navigate('/login');
  }

  const template = document.getElementById(route.templateId);
  const view = template.content.cloneNode(true);
  const app = document.getElementById('app');
  app.innerHTML = '';
  app.appendChild(view);
}

Kľúčové body na zapamätanie:

  • Kontroluje, či cesta má definovanú trasu
  • Presmeruje na prihlasovaciu stránku, keď sa pristupuje k neplatnej trase
  • Poskytuje záložný mechanizmus, ktorý zabraňuje prerušenému navigovaniu
  • Zabezpečuje, že používatelia vždy vidia platnú obrazovku, aj pri nesprávnych URL

Ak trasu nenájdeme, teraz presmerujeme na stránku login.

Teraz vytvorme funkciu, ktorá získa URL pri kliknutí na odkaz a zabráni predvolenému správaniu prehliadača:

function onLinkClick(event) {
  event.preventDefault();
  navigate(event.target.href);
}

Rozloženie tejto funkcie spracovania kliknutia:

  • Zabraňuje predvolenému správaniu prehliadača pomocou preventDefault()
  • Zisťuje cieľovú URL z kliknutého prvku odkazu
  • Volá našu vlastnú navigačnú funkciu namiesto obnovenia stránky
  • Zachováva plynulý zážitok single-page aplikácie
<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
...
<a href="/login" onclick="onLinkClick(event)">Logout</a>

Čo toto pripojenie onclick dosahuje:

  • Pripája každý odkaz k nášmu vlastnému navigačnému systému
  • Odovzdáva udalosti kliknutia do funkcie onLinkClick na spracovanie
  • Umožňuje plynulú navigáciu bez obnovenia stránky
  • Zabezpečuje správnu štruktúru URL, ktorú môžu používatelia záložkovať alebo zdieľať

Atribút onclick viaže udalosť click na JavaScriptový kód, tu volanie funkcie navigate().

Skúste kliknúť na tieto odkazy, teraz by ste mali vedieť prechádzať medzi rôznymi obrazovkami vašej aplikácie.

✅ Metóda history.pushState je súčasťou štandardu HTML5 a je implementovaná vo všetkých moderných prehliadačoch. Ak vytvárate webovú aplikáciu pre staršie prehliadače, existuje trik, ktorý môžete použiť namiesto tohto API: použitie hash (#) pred cestou umožní implementovať smerovanie, ktoré funguje s bežnou navigáciou odkazov a stránka sa neobnovuje, keďže účelom bolo vytvárať vnútorné odkazy v rámci jednej stránky.

Ako spraviť, aby tlačidlá späť a vpred fungovali

Tlačidlá späť a vpred sú základom prehliadania webu, podobne ako majú kontrolóri misií NASA možnosť prezerať si predchádzajúce stavy systému počas vesmírnych misií. Používatelia očakávajú, že tieto tlačidlá budú fungovať, a keď tak nie je, narúša to očakávaný spôsob prehliadania.

Naša single-page aplikácia potrebuje dodatočnú konfiguráciu na podporu tohto správania. Prehliadač spravuje zásobník histórie (do ktorého sme pridávali pomocou history.pushState), ale keď používatelia navigujú v tejto histórii, naša aplikácia musí reagovať aktualizáciou zobrazovaného obsahu.

sequenceDiagram
    participant User
    participant Browser
    participant App
    participant Template
    
    User->>Browser: Klikne na odkaz "Prihlásenie"
    Browser->>App: udalost onclick spustená
    App->>App: preventDefault() & navigovať('/dashboard')
    App->>Browser: history.pushState('/dashboard')
    Browser->>Browser: URL sa aktualizuje na /dashboard
    App->>App: zavolané updateRoute()
    App->>Template: Nájdť a skopírovať šablónu dashboardu
    Template->>App: Vracia skopírovaný obsah
    App->>Browser: Nahradiť obsah app šablónou
    Browser->>User: Zobraziť obrazovku dashboardu
    
    Note over User,Template: Používateľ klikne na tlačidlo späť prehliadača
    
    User->>Browser: Klikne na tlačidlo späť
    Browser->>Browser: História sa posunie späť na /login
    Browser->>App: udalosť popstate vyvolaná
    App->>App: automaticky zavolané updateRoute()
    App->>Template: Nájdť a skopírovať šablónu prihlásenia
    Template->>App: Vracia skopírovaný obsah
    App->>Browser: Nahradiť obsah app šablónou
    Browser->>User: Zobraziť obrazovku prihlásenia
Loading

Kľúčové body interakcie:

  • Používateľské akcie vyvolávajú navigáciu kliknutiami alebo tlačidlami prehliadača
  • Aplikácia zachytáva kliknutia na odkazy, aby zabránila obnove stránky
  • API histórie riadi zmeny URL a zásobník histórie prehliadača
  • Šablóny poskytujú štruktúru obsahu pre každú obrazovku
  • Poslucháči udalostí zabezpečujú reakciu aplikácie na všetky typy navigácie

Použitie history.pushState vytvára nové zápisy v histórii prehliadača. Môžete to overiť podržaním tlačidla späť vo vašom prehliadači, malo by vám to zobraziť niečo takéto:

Screenshot of navigation history

Ak kliknete na tlačidlo späť niekoľkokrát, uvidíte, že sa mení aktuálna URL a história sa aktualizuje, ale stále sa zobrazuje tá istá šablóna.

Je to preto, lebo aplikácia nevie, že treba volať updateRoute() vždy, keď sa história zmení. Ak sa pozriete na dokumentáciu k history.pushState, uvidíte, že ak sa stav zmení - teda ak sme sa presunuli na inú URL - vyvolá sa udalosť popstate. Túto udalosť využijeme na vyriešenie tohto problému.

Úloha

Aby sme zaistili, že zobrazovaná šablóna sa aktualizuje, keď sa zmení história prehliadača, pripojíme novú funkciu, ktorá zavolá updateRoute(). Urobíme to na konci nášho súboru app.js:

window.onpopstate = () => updateRoute();
updateRoute();

Pochopenie tejto integrácie histórie:

  • Počúva udalosti popstate, ktoré vznikajú, keď používatelia navigujú pomocou tlačidiel prehliadača
  • Používa šípkovú funkciu pre stručný zápis spracovateľa udalosti
  • Automaticky volá updateRoute() vždy, keď sa zmení stav histórie
  • Inicializuje aplikáciu volaním updateRoute() pri prvom načítaní stránky
  • Zabezpečuje správne zobrazenie šablóny bez ohľadu na spôsob navigácie používateľov

💡 Profesionálna rada: Tu sme použili šípkovú funkciu na deklarovanie spracovateľa udalosti popstate pre zjednodušenie, ale obyčajná funkcia by fungovala rovnako.

Tu je krátke video o šípkových funkciách:

Šípkové funkcie

🎥 Kliknite na obrázok vyššie pre video o šípkových funkciách.

Teraz vyskúšajte používať tlačidlá späť a vpred vášho prehliadača a skontrolujte, či sa zobrazovaná trasa tentokrát správne aktualizuje.

⚡ Čo môžete spraviť v najbližších 5 minútach

  • Otestovať navigáciu vašej bankovej aplikácie pomocou tlačidiel späť/vpred v prehliadači
  • Manuálne skúsiť zadávať rôzne URL do adresného riadku a testovať smerovanie
  • Otvoriť vývojárske nástroje prehliadača a pozrieť, ako sa šablóny klonujú do DOMu
  • Vyskúšať pridávanie console.log vyhlásení na sledovanie toku smerovania

🎯 Čo môžete dosiahnuť v tejto hodine

  • Dokončiť kvíz po lekcii a pochopiť koncepcie architektúry SPA
  • Pridať CSS štýly, aby šablóny bankovej aplikácie vyzerali profesionálne
  • Implementovať výzvu s chybovou stránkou 404 so správnym spracovaním chýb
  • Vytvoriť výzvu s kredity stránky s dodatočnou funkčnosťou smerovania
  • Pridať stav načítavania a prechody medzi prepínačmi šablón

📅 Váš týždeň vývoja SPA

  • Dokončiť kompletnú bankovú aplikáciu s formulármi, správou dát a perzistenciou
  • Pridať pokročilé funkcie smerovania ako parametre trasy a vnorené trasy
  • Implementovať strážcov navigácie a smerovanie založené na autentifikácii
  • Vytvoriť znovupoužiteľné komponenty šablón a knižnicu komponentov
  • Pridať animácie a prechody pre plynulejší používateľský zážitok
  • Nasadiť vašu SPA na hostingovú platformu a správne nakonfigurovať smerovanie

🌟 Vaša mesačná cesta majstrovstva frontendu

  • Stavať komplexné SPA pomocou moderných frameworkov ako React, Vue alebo Angular
  • Naučiť sa pokročilé vzory správy stavu a knižnice
  • Ovládnuť nástroje pre buildovanie a pracovné postupy vývoja SPA
  • Implementovať funkcie progresívnych webových aplikácií a offline režim
  • Študovať techniky optimalizácie výkonu pre rozsiahle SPA
  • Prispievať k open source SPA projektom a zdieľať svoje vedomosti

🎯 Časová os vášho majstrovstva Single-Page Application

timeline
    title Vývoj SPA & Učenie modernej webovej architektúry
    
    section Základy (20 minút)
        Šablónové systémy: HTML šablónové elementy
                        : Manipulácia s DOM
                        : Klonovanie obsahu
                        : Dynamické vykresľovanie
        
    section Základy smerovania (30 minút)
        Navigácia na strane klienta: Správa URL
                              : História API
                              : Mapovanie trás
                              : Spracovanie udalostí
        
    section Používateľský zážitok (40 minút)
        Vylepšenie navigácie: Integrácia prehliadača
                         : Podpora tlačidla späť
                         : Spracovanie chýb
                         : Plynulé prechody
        
    section Architektonické vzory (50 minút)
        Profesionálne SPA: Komponentové systémy
                         : Manažment stavu
                         : Optimalizácia výkonu
                         : Hraničné chyby
        
    section Pokročilé techniky (1 týždeň)
        Integrácia frameworkov: React Router
                             : Vue Router
                             : Angular Router
                             : Knižnice pre správu stavu
        
    section Produkčné zručnosti (1 mesiac)
        Podnikový vývoj: Systémy zostavenia
                              : Testovacie stratégie
                              : Deployment pipeline
                              : Monitorovanie výkonu
Loading

🛠️ Zhrnutie vášho vývojárskeho nástroja pre SPA

Po dokončení tejto lekcie ovládate:

  • Architektúru šablón: znovupoužiteľné HTML komponenty s dynamickým vykresľovaním obsahu
  • Klientské smerovanie: správa URL a navigácia bez obnovy stránky
  • Integráciu s prehliadačom: použitie History API a podpora tlačidiel späť/vpred
  • Udalostne riadené systémy: spracovanie navigácie a riadenie užívateľských interakcií
  • Manipuláciu s DOM: klonovanie šablón, prepínanie obsahu a správa prvkov
  • Spracovanie chýb: elegantné záložné riešenia pre neplatné trasy a chýbajúci obsah
  • Vzory pre výkon: efektívne načítavanie a vykresľovanie obsahu

Aplikácie v reálnom svete: Vaše zručnosti vo vývoji SPA sa priamo hodia na:

  • Moderné webové aplikácie: vývoj v React, Vue, Angular a iných frameworkoch
  • Progresívne webové aplikácie: aplikácie s offline režimom a zážitkom podobným aplikáciám
  • Podnikové dashboardy: komplexné biznis aplikácie s viacerými zobrazeniami
  • E-commerce platformy: katalógy produktov, nákupné košíky a priechod na pokladňu
  • Správa obsahu: tvorba a úprava dynamického obsahu
  • Mobilný vývoj: hybridné aplikácie využívajúce webové technológie

Získané profesionálne schopnosti: Teraz viete:

  • Navrhnúť single-page aplikácie so správnym rozdelením zodpovedností
  • Implementovať klientské routing systémy škálovateľné s komplexnosťou aplikácie
  • Ladiť zložité navigačné toky pomocou nástrojov pre vývojárov v prehliadači
  • Optimalizovať výkon aplikácie prostredníctvom efektívneho manažmentu šablón
  • Navrhnúť používateľské zážitky, ktoré pôsobia natívne a responzívne

Ovládnuté koncepty frontend vývoja:

  • Architektúra komponentov: Znovupoužiteľné UI vzory a šablónové systémy
  • Synchronizácia stavu: Riadenie stavu cez URL a história prehliadača
  • Programovanie riadené udalosťami: Spracovanie interakcií používateľa a navigácia
  • Optimalizácia výkonu: Efektívna manipulácia s DOM a načítanie obsahu
  • Dizajn používateľského zážitku: Plynulé prechody a intuitívna navigácia

Ďalšia úroveň: Ste pripravení preskúmať moderné frontend frameworky, pokročilé riadenie stavu alebo vytvoriť komplexné podnikové aplikácie!

🌟 Dosiahnutý úspech: Vybudovali ste profesionálny základ pre single-page aplikácie s modernými webovými architektonickými vzormi!

Výzva GitHub Copilot Agenta 🚀

Použite režim Agenta na dokončenie nasledujúcej výzvy:

Popis: Vylepšite bankovú aplikáciu implementovaním spracovania chýb a šablóny 404 stránky pre neplatné trasy, čím zlepšíte používateľský zážitok pri navigácii na neexistujúce stránky.

Prompt: Vytvorte novú HTML šablónu s id "not-found", ktorá zobrazí užívateľsky prívetivú 404 chybovú stránku so štýlmi. Potom upravte JavaScript logiku routovania tak, aby sa táto šablóna zobrazila, keď používatelia navštívia neplatné URL, a pridajte tlačidlo "Ísť domov" na návrat na prihlasovaciu stránku.

Viac o režime agenta sa dozviete tu.

🚀 Výzva

Pridajte novú šablónu a trasu pre tretiu stránku, ktorá zobrazuje kredity tejto aplikácie.

Ciele výzvy:

  • Vytvoriť novú HTML šablónu s vhodnou obsahovou štruktúrou
  • Pridať novú trasu do konfigurácie vašich trás
  • Zahŕňať navigačné odkazy na a zo stránky kreditov
  • Otestovať správnu funkčnosť navigácie s históriou prehliadača

Kvíz po prednáške

Kvíz po prednáške

Prehľad & Samostatné štúdium

Routing je jednou zo zložitejších častí webového vývoja, najmä keď sa web posúva od obnovovania stránok k obnovovaniu stránok v rámci Single Page Application. Prečítajte si niečo o tom, ako služba Azure Static Web App spracúva routing. Viete vysvetliť, prečo sú niektoré rozhodnutia opísané v tomto dokumente nevyhnutné?

Ďalšie vzdelávacie zdroje:

  • Preskúmať, ako populárne frameworky ako React Router a Vue Router implementujú klientský routing
  • Preskúmať rozdiely medzi routingom založeným na heši a routingom pomocou History API
  • Naučiť sa o server-side renderingu (SSR) a jeho vplyve na routingové stratégie
  • Preskúmať, ako Progressive Web Apps (PWA) zvládajú routing a navigáciu

Zadanie

Vylepšiť routing

Zrieknutie sa zodpovednosti: Tento dokument bol preložený pomocou AI prekladateľskej služby Co-op Translator. Hoci sa snažíme o presnosť, majte prosím na pamäti, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Originálny dokument v jeho pôvodnom jazyku by mal byť považovaný za rozhodujúci zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za žiadne nedorozumenia alebo mylné interpretácie vyplývajúce z použitia tohto prekladu.