24 Flashcards
(5 cards)
Základní princip klient server
Klient-server popisuje vztah mezi dvěma počítačovými programy, v nichž první program, klient, žádá o služby jiný program zvaný server. Každá instance klienta může posílat žádost o data jednomu nebo více připojeným serverům. Na druhé straně, servery mohou akceptovat tyto žádosti, zpracovat je a vrátit klientovi požadovaná data. Příkladem je třeba webový prohlížeč, tj. klientský program na uživatelském počítači, který může přistupovat k informacím na libovolném webovém serveru na světě.
Technologie na straně klienta
základem je trojice HTML5, JavaScript, CSS. Dalšími technologiemi mohou být např. javascriptové knihovny (jQuery) a nakonec frontendové frameworky (React, Angular, u angularu se používá TypeScript, což je vylepšená verze JavaScriptu využívající typy a třídy a také např. SASS, což je kompilovaný jazyk rozšiřující CSS o proměnné, cykly, podmínky, funkce atd.)
Technologie na straně serveru
v dnešní době se využívají často nějaké backendové frameworky (ASP.NET, PERL, Express), ale pro chod serveru se dá využít téměř jakéhokoliv programovacího jazyka (PHP, Python, Java, C# i JavaScript - NodeJS). Server často ukládá i nějaká data a potřebuje přistupovat k datům, tím pádem využívá nějaký databázový server (MySQL, MSSQL, Oracle, NoSQL servery)
Udržování kontextu mezi klientem a serverem
Kontext lze udržovat mezi klientem a serverem např. skrz session nebo cookies, obě dvě jsou používány pro ukládání kontextu uživatele. Session tvoří dočasný soubor key-value hodnot (directory), který je dostupný na straně klienta i serveru. Data session proměnné jsou dostupná ve všech views a soubor se session informacemi je pak smazán při zavření prohlížeče, okna nebo po nějakém timeoutu. Cookies jsou pak soubory uložené jen na straně klienta, bývají zaslány do prohlížeče serverem a slouží pro uchovávání informací o klientovi, drží tak jeho kontext a při další návštěvě se nemusí např. přihlašovat, jelikož v cookies bude uloženo jeho jméno i heslo. Zobrazení nového kontextu se pak dělá buď reloadnutím celé stránky nebo aktualizováním dynamicky jen té části webu, která to potřebuje. Klient vždy zasílá dotaz na server, který jej zpracuje a odpoví. Při obdržení nového kontextu od serveru je potřeba buď reloadnout stránku na straně klienta, aby se kontext zobrazil nebo pomocí JavaScriptu a asynchronního programování vytvořit skript, který aktualizuje jen potřebná data a elementy, stránka se tak nemusí znovu celá načítat. Klient tak nemusí znovu načítat zbytečná data, které již měl načtené a nemusí čekat na znovuvykreslení stránky.
Ukládání dat na straně klienta
Aplikační cahce paměť (AppCache)
- Lze do ní uložit HTML, CSS, JavaScript i jiné soubory, které aplikace potřebuje ke svému fungování
- Podporují ji všechny hlavní prohlížeče
- Cache pamět prohlížeče ukládá obsah stránek pro rychlejší načítání, tedy vše, co by mohlo zrychlit další načítání stránky. Pro použití je potřeba být online, je nespolehlivá, protože nevíme, které části webové stránky se ukládají a kdy se ukládají. AppCache ukládá jen ty části webové stránky, které jsou definované v souboru manifest a data jsou dostupná i offline. Je určena speciálně pro webové aplikace, a ne informační weby. Je ovladatelná programově, programátor tak může lépe ovládat co se uloží, kdy se to uloží a co se tedy děje v aplikaci, a to i když je uživatel offline. Soubor se nejčastěji pojmenovává .manifest
- Manifest musí začínat řádkem CACHE MANIFEST a následně na dalších řádcích je vypsán seznam souborů, které se mají do AppCache ukládat.
CACHE MANIFEST
styles.css
script.js
index.html
- Aby HTML stránka použila AppCache, tak se musí definovat v html tagu <html manifest="cache.manifest">
- S AppCache pamětí se pak pracuje skrz JavaScipt, lze naslouchat na změny AppCache, vykonávat nad ní operace, aktualizovat obsah.
WebStorage
- Lze použít ve všech prohlížečích, ikdyž není vždy uplně dokonale podporované
- WebStorage definuje dvě úložiště, které jsou identické až na jednu věc a tou je jejich perzistence, tedy jak dlouho data v daném úložišti zůstanou. Prvním úložištěm je LocalStorage, které ukládá data v prohlížeči napořád, data zde zůstanou uložena, dokud nejsou smazána skriptem. Druhé úložiště je SessionStorage, které ukládá data jen po dobu trvání dané session, tedy zhruba po dobu, než uživatel zavře prohlížeč, okno nebo záložku s danou webovou stránkou.
- Úložiště pracují jako jednoduchá key-value databáze hodnot a jejich fungování lze přirovnat k asociativním polím, tedy polím dat, které nejsou indexovány číselnou hodnotou, ale obecným klíčem (často řetězcem).
- Ukládání dat v prohlížeči ve WebStorage může připomínat cookies, ale je zde jeden zásadní rozdíl a to, že cookies jsou primárně určeny pro data, která si chce server uložit do klientského prohlížeče pro své účely. Posílají se v hlavičkách HTTP dotazů a odpovědí a jejich velikost je neomezená. Data uložená ve WebStorage zůstávájí v prohlížeči a nikam se neposílají. Velikost WebStorage bývá omezená prohlížečem a bývá většinou 5 – 10 MB pro každou doménu.
- Pro přístup do jednotlivých WebStorage lze využít javascriptu a WebStorage API metod nebo je také možné přistupovat k databázi jako k poli (v tomto pířpadě jsou volány metody WebStorage API na pozadí)
S využitím WebStorage API metod:
setItem(key, value) - uložení záznamu (kombinace klíč-hodnota)
getItem(key) - získání záznamu podle klíče
clear() - odstranění všeho
removeItem(key) - odstraní záznam s daným klíčem
Úložiště jako pole:
sessionStorage[“name”] = “Jakub Horák”; - uložení záznamu
var version = localStorage[“version”]; - získání záznamu podle klíče
- Jelikož AppCache i WebStorage jsou schopny uchovávat data i offline, tak je možné vytvořit zcela offline webovou aplikaci. Pro zjištění, zda je uživatel offline nebo online slouží WEB API hodnota Navigator.onLine, která je true, když je prohlížeč online. Mimo to je možné využít ještě obsluhy události online/offline, která je vyvolávána v DOM dokumentu a podle toho změnit fungování aplikace. ( document.body.addEventListener(“online”, function () {…}, false); )
