Úvod do moderního frontendového vývoje

Předpokládáme, že máš základní znalosti webového vývoje (HTML, CSS a JavaScript) a chceš si rozšířit znalosti o pokročilejší témata.

Poznámka: Tento článek bude používat primárně TypeScript místo JavaScriptu, protože TypeScript je v moderním frontendovém vývoji široce adoptován a měl/a/o bys mu rozumět.

Požadování dat z API

Moderní aplikace dnes zřídka fungují samostatně - často se spoléhají na API (Application Programming Interfaces) pro získávání a odesílání dat. Ať už si vytváříš vlastní backend nebo integruje se službou třetí strany, požadování dat z API je základní součástí moderního webového vývoje.

Jak se vyměňují data

Většina dnešních API používá pro komunikaci protokol HTTP a data se obvykle přenášejí ve formátu JSON kvůli jeho lehké struktuře a kompatibilitě s JavaScriptem. Některá API však mohou také používat XML nebo GraphQL dotazy, ale ty jsou dnes méně běžné ve srovnání s RESTful API a pro naše potřeby stačí JSON.

(HTTP request and response flow [Zdroj: Tobias Kleinert])

Metody pro vytváření požadavků

V prohlížeči existuje několik způsobů, jak vytvářet HTTP požadavky:

Fetch API (nativní)
- Vestavěné v moderních prohlížečích.
- Vrací Promise a bezproblémově funguje s async/await.
- Lehké a nevyžaduje externí závislosti.
Axios (knihovna třetí strany)
- Poskytuje bohatší API než Fetch.
- Podporuje zrušení požadavků, automatické parsování JSON, interceptory pro zpracování autentifikace nebo chyb a podporu starších prohlížečů.
- Užitečné při práci na větších projektech, kde je potřeba další flexibilita.

Příklad s Fetch API

Zde je jednoduchá znovupoužitelná utility funkce používající fetch pro požadování dat:

async function fetchData<T>(url: string): Promise<T> {
  const response = await fetch(url, {
    headers: {
      'Content-Type': 'application/json'
    }
  });
  if (!response.ok) {
    throw new Error(`Síťová odpověď nebyla v pořádku: ${response.status}`);
  }
  return response.json() as Promise<T>;
}

Další témata k prostudování

Autentifikace
- Mnoho moderních API vyžaduje autentifikaci, často pomocí tokenů (jako JWT) nebo OAuth.
- JWT tokeny a session data můžeš obvykle ukládat do cookies nebo local storage.
Zpracování chyb
- Vždy zpracovávej chyby - jak síťové chyby, tak chyby specifické pro API.
- Používej try/catch bloky s async/await nebo `.catch()` s `Promise`.

Tailwind CSS

Stylování tvé aplikace je velkou částí frontendového vývoje. Tradičně vývojáři psali obyčejné CSS nebo používali CSS frameworky jako Bootstrap. V dnešní době se utility-first frameworky jako Tailwind CSS staly extrémně populárními, protože poskytují rychlý a flexibilní způsob budování uživatelských rozhraní.

Místo psaní vlastních CSS tříd pro každou komponentu používáš předdefinované třídy přímo ve svém HTML nebo JSX. Tyto třídy jsou nízkoúrovňové stavební bloky (např. `p-4` pro padding, `bg-blue-500` pro barvu pozadí, `text-center` pro zarovnání textu), které můžeš kombinovat k návrhu jakéhokoliv rozhraní, aniž bys odbíhal pryč od svého HTML.

Tento přístup udržuje stylování konzistentní, odstraňuje potřebu velkých vlastních CSS souborů a usnadňuje rychlé úpravy designu.

Porovnání Tailwind CSS vs. tradiční CSS:

V tradičním CSS bys mohl napsat:

<style>
.button {
  background-color: #3b82f6;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
}
</style>
<button class="button">Klikni na mě</button>

Ale v Tailwind CSS bys napsal:

<button class="bg-blue-500 text-white px-4 py-2 rounded-md">
  Klikni na mě
</button>

Hover, Focus a stavové varianty

Můžeš také snadno stylovat elementy na základě stavů jako **hover** nebo **focus**.

<button class="bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-400">
  Odeslat
</button>

Tmavý režim

Stojí také za zmínku, že Tailwind CSS rovnou podporuje tmavý režim. Můžeš použít prefix dark: k aplikování stylů, když má uživatel povolený tmavý režim.

<button class="bg-gray-800 text-white dark:bg-gray-700 dark:text-gray-300">
  Klikni na mě
</button>

Nevýhody

Ačkoliv je Tailwind CSS mocný, může zahlcovat tvé HTML příliš mnoha třídami, což ho činí méně čitelným. K zmírnění tohoto problému můžeš používat rozšíření ve svém IDE pro skrytí tříd. Může také pomoci používat framework, který ti umožňuje psát komponenty strukturovanějším způsobem, jako je React nebo Vue.js, místo používání obyčejného HTML.

Moderní webový design

Responzivita

Když navrhuješ svou aplikaci, je důležité přemýšlet o tom, jak si ji ostatní otevřou. Proto musíme zajistit, aby naše aplikace byly responzivní, což znamená, že se přizpůsobí různým velikostem obrazovek a zařízením. Tailwind CSS poskytuje responzivní utility třídy, které ti umožňují aplikovat styly podmíněně na základě velikosti obrazovky.

Například můžeš použít md:bg-blue-500 k aplikování modrého pozadí pouze na středně velké obrazovky a větší.

<!-- Můžeš také použít sm:; md: nebo lg: -->
<div class="bg-gray-200 md:bg-blue-500 lg:bg-green-500">
  Tento div bude mít šedé pozadí na malých obrazovkách, modré na středních a zelené na velkých obrazovkách.
</div>

Co také může pomoci s responzivitou je používání Gridu nebo Flexboxu, které se automaticky přizpůsobí na základě dostupného prostoru. Tyto funkce CSS ti umožňují vytvářet složité layouty, aniž bys se spoléhal na pevné šířky nebo výšky.

Tipy

Používej relativní jednotky jako em, rem, nebo procenta místo pevných pixelových hodnot.
Testuj své návrhy na více zařízeních a velikostech obrazovek.
- Vývojářské nástroje v prohlížečích jako Chrome a Firefox ti umožňují simulovat různá zařízení.
Zvaž používání mobile-first přístupu, kde nejprve navrhuješ pro menší obrazovky a poté postupně vylepšuješ design pro větší obrazovky.

Figma

Figma je velmi populární návrhářský nástroj používaný pro vytváření layoutů, prototypů a designů pro tvé frontendové aplikace. Umožňuje ti rychle vytvářet makety a spolupracovat s ostatními, aniž bys psal jakýkoliv kód. To umožňuje i netechnickým členům týmu přispívat k procesu navrhování.

Brand manuál

Brand manuál je soubor pravidel a zdrojů, které definují, jak se značka prezentuje vizuálně a verbálně. Pro frontendové vývojáře poskytuje tento manuál základ pro konzistentní a profesionálně vyhlížející UI.

Typicky zahrnuje:

Barvy: Primární, sekundární a akcentové barvy s jasnými pravidly použití.
Typografie: Písma, velikosti písma a hierarchie pro nadpisy, odstavce a UI elementy.
Loga a ikony: Schválené verze log, pravidla minimálního odstupu a sady ikonografie.
Komponenty: Standardizovaná tlačítka, formuláře, modály a navigační panely.

JavaScript Frameworks

V současnosti většina frontendových vývojářů nepíše obyčejný JavaScript a HTML, ale spíše používá frameworky, které jim pomáhají budovat složité aplikace snadněji. Tyto frameworky poskytují strukturovaný způsob budování uživatelských rozhraní, správy stavu a zpracování routingu.

Některé populární JavaScript frameworky zahrnují:

React: Knihovna pro budování uživatelských rozhraní, spravovaná Facebookem. Umožňuje vývojářům vytvářet znovupoužitelné UI komponenty a efektivně spravovat stav aplikace.
Vue.js: Progresivní framework pro budování uživatelských rozhraní. Je navržen tak, aby byl postupně adoptovatelný, což usnadňuje integraci s jinými projekty.

Používání těchto frameworků může výrazně urychlit čas vývoje a zlepšit udržovatelnost kódu. Podívejme se krátce na to, jak bys mohl používat React a Vue.js v moderní frontendové aplikaci. Zde je jednoduchý příklad React komponenty:

import React from 'react';

const Button = () => {
  // Používáme Tailwind CSS třídy přímo v JSX!
  return (
    <button className="bg-blue-500 text-white px-4 py-2 rounded-md">
      Klikni na mě
    </button>
  )
}

Poznámka: V Reactu můžeš používat JSX syntax, která ti umožňuje psát kód podobný HTML v JavaScriptu. To usnadňuje vizualizaci struktury tvých komponent.

Zde je jednoduchý příklad Vue.js komponenty:

<template>
  <button class="bg-blue-500 text-white px-4 py-2 rounded-md">
    Klikni na mě
  </button>
</template>

Závěr

Technologie, které dnes používáme pro frontend se neustále vyvíjí. Je důležité abys zůstal informovaný o nejnovějších trendech a nástrojích. Tento článek ti poskytl základní přehled o některých klíčových aspektech moderního frontendového vývoje, včetně požadování dat z API, používání Tailwind CSS, moderního webového designu a JavaScript frameworků. Pokračuj ve zkoumání těchto témat a experimentuj s různými nástroji, abys našel to, co nejlépe vyhovuje tvým potřebám a projektům.

Pamatuj: Practice makes perfect!

Happy coding!