WEB DEVELOPMENT

• ARIA atributy a best practices
• Escape charaktery
• Základní formuláře v HTML

Výstupy z lekce: Máš povědomí o přístupnosti webových aplikací a základních pravidlech, umíš napsat registrační formulář s využitím různých formulářových stylů.

Praktické cvičení: Vytvoř pull request ve svém projektu a přidej HTML stránku s tabulkou s ID „data“, která má sloupce jméno, příjmení, e-mail a telefon. Na stránku přidej formulář pro zadání těchto údajů, kde každé pole má ID „first_name“, „last_name“, „e-mail“ a „phone“. Implementuj odeslání formuláře tak, aby po vyplnění a stisknutí tlačítka přidal nový řádek do tabulky.

• Stylování webové stránky, selektory
• Rozvržení pomocí flexbox, grid
• Media query

Výstupy z lekce: Umíš použít CSS pro formátování a dokážeš aplikovat různé styly na stránce v závislosti na typu zobrazovacího zařízení a jeho vlastnostech.

Praktické cvičení: Přidej do svého projektu pull request s CSS souborem a styly stránky. Rozliš sudé a liché řádky tabulky různou barvou a přidej hover efekt, který mění barvu řádku při najetí myši. Použij flexbox nebo grid pro formulář a zajisti responzivní rozvržení: na velkých displejích celý formulář na jednu stránku, na středních na dvě řádky a na malých každý prvek na samostatný řádek.

• Event loop
• Datové typy, let vs var vs const, globalní objekt, null vs undefined
• Funkce, čisté (pure) funkce
• Scope, hoisting, callback, this
• Desktruktorování objektů a polí
• Debuggování v DevTools / IDE

Výstupy z lekce: Máš znalost datových typů v JavaScriptu, umíš napsat a debuggovat funkci v JavaScriptu a rozumíš scope pro práci s proměnnými.

• Řídicí struktury, práce s polem, práce s řetězci
• Regulární výrazy
• Dědičnost, prototypy, třídy

Výstupy z lekce: Ovládáš řídicí struktury, jako jsou if/else, for/while smyčky, switch a with. Umíš provádět základní manipulaci s řetězcem, používat regulární výrazy pro extrakci nebo nahrazení částí řetězce. Máš znalost nejčastějších metod pro práci s polem, jako jsou forEach, map, reduce, filter, some, every, push, pop a concat.

• Asynchronní kód
• Práce s HTML stránkou, zpracování událostí
• Validace formuláře

Výstupy z lekce: Máš znalost práce s asynchronním kódem pomocí callbacků, promises a async/await. Umíš manipulovat s DOM, vybírat elementy a modifikovat je pomocí JavaScriptu. Dokážeš zkontrolovat formulář po jeho odeslání uživatelem a rozumíš rozdílu mezi event capture a event bubbling.

Praktické cvičení: Přidej do projektu pull request s novou HTML stránkou obsahující formulář s textovým polem a tlačítkem pro zadání až tří měst oddělených čárkou nebo středníkem. Po odeslání formuláře načti předpověď počasí na jeden den pro zadaná města pomocí AccuWeather API, ošetři chyby a optimalizuj volání API. Zobraz minimální a maximální teploty pro každé město na stránce a při novém zadání odstraň předchozí výsledky. Vizuální styl řešit nemusíš.

• Co je to TypeScript (TS)
• Základní možnosti jak definovat typ proměnných, funkcí
• Práce s generics
• Pomocné typy – Partial, Pick, Record, ReturnType, Omit…

Výstupy z lekce: Umíš správně používat TypeScript pro běžné činnosti a rozumíš jeho výhodám. Dokážeš pracovat s JS kódem v TypeScriptu a máš schopnost efektivně refaktorovat kód v TS.

• Co je to React, na co se hodí a proč?
• Vytvoření první aplikace v Reactu
• JSX, práce s komponentami, props
• React Fragment, práce s poli
• Psaní testů pro React komponenty

Výstupy z lekce: Máš znalost principů komponentového frameworku a rozumíš jeho výhodám pro vývoj webových aplikací. Umíš psát HTML kód pomocí JSX, vytvořit jednoduchou komponentu a napsat unit test pro komponentu i aplikační logiku.

Praktické cvičení: Vytvoř React aplikaci pomocí npx create-react-app front-end --template typescript. Napiš komponentu „Event“, která zobrazí místo, název a tabulku hlasování o účasti. Komponenta přijme 3 props: location, title a dates (seznam dat s účastí). V tabulce budou jména účastníků a jejich účast pro jednotlivé dny. Zobraz jen existující data, žádná interakce není potřeba. Ošetři různé scénáře podle TS typů a rozděl je na menší komponenty, pokud to dává smysl.

• State management, prop drilling, React Context
• UseState, useRef, useEffect, useMemo, React.memo
• React Router
• React Dev Tools a optimalizace

Praktické cvičení: Máš znalost různých možností předávání parametrů komponentě, umíš používat základní hooky v Reactu a orientuješ se v React Dev Tools. Dokážeš optimalizovat vykreslování komponent z hlediska výkonu.

• Formuláře v React, validace a odeslání
• Řízené a neřízené komponenty
• Volání REST API
• Zpracování asynchronních událostí v Reactu
• Vytváření vlastního React hook
• Mockování v testech

Výstupy z lekce: Umíš napsat formulář pomocí React knihovny, validovat formulář a zobrazovat uživateli chyby. Dokážeš zpracovat data z REST API v React komponentě a vytvořit vlastní React Hook pro znovupoužitelnost kódu. Umíš také testovat komponenty s potřebou mockování REST API.

Praktické cvičení: Přidej do svého projektu formou pull requestu v aplikaci „front-end“ tři stránky pomocí React Routeru: „/events“, „/events/“ a „/events/new“. Na stránce „/events“ zobraz seznam událostí jako list s odkazy na detailní stránku každé události, kde zahrneš komponentu s tabulkou účastníků a dat a komponentu pro aktuální počasí, implementovanou pomocí vlastního hooku.

Na stránce „/events/new“ vytvoř formulář pro přidání nové události s názvem, popiskem, místem a daty pro hlasování, který po odeslání odešle data na endpoint POST /api/events. Nakonec otestuj komponenty včetně chybových stavů.

• Seznámení s Express.js a generátorem
• Použití Express.js pro statické soubory
• Routování v Express.js
• Návrh a implementace REST API, query parametry

Výstupy z lekce: Umíš vytvořit aplikaci s Express.js serverem, rozumíš tvorbě REST API v Express.js a dokážeš zpracovat HTTP požadavek.

Praktické cvičení: Přidej do projektu pull request s novou složkou „server“, kde vytvoříš aplikaci pomocí express-generator a nastavíš port na 4000. Přidej endpointy GET /api/events pro seznam událostí, GET /api/events/:id pro detail události a POST /api/events pro přidání nové události. Použij tato API ve svých React komponentách EventsList a detailu události. Ošetři chybové stavy vhodnými HTTP kódy a odpověďmi.

• Zpracování binárních dat
• Použití HTTP hlaviček – content negotiation, loggování
• CORS http hlavičky
• Použití Swagger specifikace pro REST API

Výstupy z lekce: Máš znalost práce s URL a jeho částmi, stejně tak rozumíš významu HTTP hlaviček. Umíš implementovat REST endpoint pro nahrávání obrázků a chápeš CORS omezení při volání REST API z jiných domén, včetně toho, jak takové volání správně implementovat.

Praktické cvičení: Přidej do projektu pull request, ve kterém vytvoříš Swagger specifikace pro API událostí a na jejich základě vygeneruj HTML dokumentaci.

• Přihlašování – session – pomocí Express.js
• Základy OAuth, autentizace/autorizace
• Využití Passport.js
• Škálování pomocí PM2

Výstupy z lekce: Umíš používat middleware v Express.js a dokážeš implementovat REST API, které vrací informace o přihlášeném uživateli pomocí Google účtu.

• WebSocket komunikace pro okamžitou komunikaci; její výhody a nevýhody
• Server Side Event pro jednostrannou komunikaci; jeho výhody a nevýhody
• Možnosti škálování
• Zotavení při problémech

Výstupy z lekce: Umíš implementovat jednoduchý WebSocket endpoint i jednoduchý SSE endpoint. Rozumíš výhodám a nevýhodám WebSocketů a SSE ve srovnání s REST API.

• Základy SQL relačních databází
• Primární klíč, cizí klíč, index
• Relace, normální formy

Výstupy z lekce: Máš znalost základních principů relační databáze a dokážeš navrhnout strukturu základní databáze s propojenými tabulkami.

• Práce s daty v relační databázi v Node.js
• Práce s SQLite
• Využití REST API pro manipulaci dat

Výstupy z lekce: Umíš zapisovat a číst data z relační databáze v prostředí Node.js a dokážeš implementovat REST API pro manipulaci s daty.

Praktické cvičení: Přidej do svého projektu formou pull requestu použití balíčku better-sqlite3 pro jednoduchou databázi uloženou do souboru. Navrhni databázový model pro svou aplikaci, například tabulky pro události, odpovědi a další potřebné entity. Ve svých REST API endpointech nahraď ukládání a čtení dat z proměnných použitím databáze.

• Logování/trasování v komplexních systémech
• Práce CI/CD
• Vydávání nových verzí, Docker

Výstupy z lekce: Seznámíš se s GitHub Actions a zvládneš je využít pro vytvoření CI/CD pipeline. Dokážeš také vytvořit Docker image pro naši aplikaci.

• Studentská volba tématu
  Možnosti:
  • End-to-end testování a testování přístupnosti webů
  • Návrh uživatelských rozhraní – procesy a základní pravidla
  • Dark patterns v UI
• Q&A session