Webové Technologie Flashcards
(11 cards)
CSS metodiky
Adaptivní webdesign
CSS preprocesory a postprocesory
AMP
Accelerated mobile pages - projekt od Googlu, který má za cíl zrychlovat načítání webových stránek na mobilních zařízeních. Projekt znikl 2015 a první amp webovky se objevily ve vyhledávání v násl 2016.
Zrychlení je dosaženo jednak díky omezení zdrojových kódů, amp-html, amp-js načítáno asynchronně, amp-css - vlastní osekaný jazyk. striktní pravidla.
Dále amp dosahuje zrychlení díky šikovnému cachování do mezipaměti. Vlastní amp cache na cdn server (cloudfare)
- vývojář vytvoří webovky za pomocí omezeného amp html a amp js snažíce se dodržet povolené standardy aby byla webovky kompatibilní.
- googlebot najde amp stránku, uloží ji do amp cache, kde ji dále analyzuje, ověří validitu a optimalizuje (minifikace, přednačítání, odstranění blokujícího js)
- v google amp cache se stránka uloží pod specifickým url google.com/amp/example.com/article.html
- když uživatel klikne na amp stránku, nenačte se ze serveru vydavatele, ale z cdn serveru
- používá se geograficky blízký cdn server, extrémně rychlé načítání, menší zatížení původního serveru, nízká latence
nevýhody - přepsání url, uživatelé ztrácí kontrolu nad statistikami, pomalejší aktualizace stránek, stránka se musí aktualizovat na serveru
kritika, že google získá kontrolu nad webem a manipuluje s vyhledávání, v reakci na to google zveřejnil kód a fungování je součástí OpenJS foundation 2019. google zvýhodňoval amp stránky ve vyhledávání, bylo to součást SEO, ale v roce 2021 to ze SEO odebral. postupně se používání velmi snižuje, některé vyhledávače přestaly amp podporovat a obcházet. s pokrokem technologií je amp dost omezující, vývojáři se nyní přiklánějí spíše k progressive web apps - PWA
navrženo pro statické obsahové weby, jako zpravodajství a blogy, kde je potřeba načítat velký obsah rychle. dále pro weby cílené na rozvojový trh, kde je pomalejší internet.
i když je amp odebráno z seo, zrychlení načítání pořád obohacuje user experience, takže to v důsledku seo přidává.
nevhodné pro interaktivní webovky, sociální sítě, eshopy, kde je amp dost omezující. moderní weby používající PWA, lazy loading a další moderní prvky, se můžou obejít bez amp
HTML API
Pokročilé možnosti JS
JS frameworky
JS aplikace
Šablonovací a ORM systémy
- šablon systémy se používají pro rychlou tvorbu webových aplikací, u kterých odděluje aplikační a prezentační vrstvu, neboli odděluje kód a vzhled, takže programátoři a designéři mohou pracovat zvlášť nezávisle na sobě
- usnadňuje generování dynamického HTML na základě statických šablon a dynamických dat databáze
- renderování šablon probíhá na straně serveru, klientovi odesílán hotový kód HTML
- populární zejména při vývoji webových aplikací, kde je potřeba generovat obsah na základě serverové logiky (server-side rendering)
- zjednodušení vývoje, údržby a čitelnosti kódu
+ jednoduchá syntax, zvýšení bezpečnosti, možnost dědičnosti šablon
př. Twig - populární šablonovací systém pro PHP, čistá a čitelná syntax
Jinja2 - Python
Mustache - minimalistický, univerzální
Blade - PHP Laravel
Smarty - PHP
Razor - C#
ORM - technika umožňující mpřevod dat mezi OO jazyky a relačními databázemi
- pomáhá řešit problém rozdílnosti OO objektů a dat, aby spolu korespondovaly
ORM poskytuje vrstvu, která mapuje objekty aplikace na řádky v DB tabulkách
- umožňuje práci s těmito objekty přímo bez nutnosti psaní složitého SQL, neboli eliminuje potřebu psaní SQL pro běžné CRUD operace
Doctrie2 - knihovna pro PHP
- podporuje různé databáze - MySql, PostgreSQL, SQLite
- silná podpora transakcí - více operací v rámci jedné transakce
- podp. lazy loading
- migrace pro updatování modelů či databází
- dědičnost - mapování dědičných vztahů objektů na DB tables
př. dalších:
Eloquent - PHP Laravel
Mongoose - JS MongoDB
SQLAlchemy - Python
node.js
- runtime prostředí umožňující spouštět javascript přímo na serveru namísto v prohlížeči, jak tomu bylo zpočátku
- běží na V8 enginu od Googlu, open source, platformově nezávislé
- pro fullstack vývoj webových aplikací - nabízí nástroje pokrývající celý proces vývoje webových aplikací
- Asynchronní událostmi řízený přístup zpracovávání požadavků na jednom vlákně. Non-blocking I/O - operace jsou zpracovávány asynchronně, bez blokování hlavního vlákna, které může pokračovat ve své práci. Event loop - stará se o zpracovávání požadavků pro jednoduchost a rychlost
- cyklus událostí spouští I/O operace asynchronně, ty po skončení signalizují Callback či Promise pro zpracování výsledků
- optimalizovaný výkon díky V8 enginu
- integruje NPM - node package manager - správce balíčků pro nodeJS - jedním z nejdůležitějších nástrojů v ekosystému nodeJS, výrazně usnadňuje vytváření webových aplikací, poskytuje přístup k obrovské knihovně open-source balíčků
populární nodeJS frameworky jsou ExpressJS a NestJS.
ExpressJS - minimalistický framework, cílí na jednoduchost a flexibilitu
NestJS - pokročilejší framework, inspirovaný Angularem, používá typescript
- obsáhlý, nabízí více funkcí - pro některé případy až příliš
- v praxi ExpressJS často s MongoDB
Při psaní článku na blog, odešleme požadavek POST na server, server (nodeJS) požadavek zpracuje a uloží data do databáze. Pokud chce uživatel článek zobrazit, pošle požadavek GET na server, načtou se data z DB, odešlou se ve formě json či html a návštěvník článek zobrazí.
SEO
