Statický web, frontend a backend

Dva weby na obrazovce. První je stránka s hrou: hrací plocha, skóre, tlačítko "znovu". Druhý je web dílny s formulářem "zadat objednávku". Oba se otevírají v prohlížeči, oba jsou postavené z HTML, CSS a JavaScriptu, oba vypadají hotové. První zveřejníte za minutu: složku na hosting a odkaz je hotový. U druhého se agent nejspíš zastaví a zeptá se, kde bude server a kam ukládat objednávky.

Rozdíl není ve složitosti ani v kráse. Je v tom, kdo musí něco udělat, když návštěvník klikne na tlačítko, a kde pak musí ležet data. Projdeme si tři slova - statický web, frontend a backend - podíváme se, kde žijí data a proč na tom závisí způsob publikace. Na konci probereme, na co se agent zeptá sám, než mu řeknete "zveřejni to", a na co se vyplatí zeptat jeho.

1. Statický web

Statický web je web z hotových souborů: index.html, style.css, skripty, obrázky, fonty. Server je uchovává a každému návštěvníkovi posílá tytéž, nic nepočítá a nic si o návštěvnících nepamatuje. Veškerou práci - zobrazit, spočítat, reagovat na klik - dělá prohlížeč návštěvníka na jeho počítači.

Vezměme jednostránkové portfolio. Ve složce leží index.html s pár slovy o sobě a seznamem prací, style.css, desítka obrázků a malý skript. Návštěvník otevře odkaz, prohlížeč stáhne soubory a sestaví z nich stránku. Klik na práci otevře obrázek ve větším, přepínač tmavého motivu změní barvy: to dělá skript v prohlížeči. Jakmile server soubory pošle, na dalším dění se nepodílí: je mu jedno, kdo přišel a na co klikl. Přibude nová práce - upravíte index.html, přidáte vedle obrázek a složku zveřejníte znovu; jiný způsob, jak něco změnit, tu není, a web měníte vy, ne návštěvník.

Podle stejného schématu fungují:

• pozvánka na koncert nebo setkání: datum, místo, program, mapa cesty; tlačítko "koupit vstupenku" vede na web prodejce vstupenek, samotná pozvánka nic neprodává;
• landing page produktu nebo služby, pokud je na ní místo formuláře telefon a e-mail;
• dokumentace k projektu: desítky stránek s menu a odkazy mezi sebou, a přesto jsou to jen soubory;
• blog bez komentářů: každý příspěvek je soubor, nový se zveřejňuje stejně jako všechno ostatní;
• hra v prohlížeči. Ano, hra taky: tahy, skóre a animace se počítají v prohlížeči, serveru do toho nic není.

Kde statický web končí, je vidět, když práci webu rozdělíme na dvě poloviny: tu, kterou dělá prohlížeč, a tu, kterou dělá server. Tyto poloviny mají svá jména.

2. Frontend pracuje v prohlížeči

Frontend je všechno, co běží na počítači návštěvníka: značkování, styly a skripty, které prohlížeč přijal a spustil u sebe. "Přední část", ta, kterou je vidět. (Často se jí říká "jen vzhled", ale je to celá část webu, se kterou má člověk co do činění - u statického webu dokonce celý web.)

Frontend umí hodně: zobrazit stránku, spočítat tahy ve hře, ověřit před odesláním, že pole formuláře není prázdné, zapamatovat si něco do příští návštěvy - k tomu má prohlížeč vlastní úložiště, agent mu bude říkat localStorage. Co neumí, je podělit se. Úložiště žije v tomto prohlížeči na tomto zařízení, a nikde jinde. Kde tahle hranice vadí a kde ne, je vidět na dvou příkladech.

Nejlepší skóre ve hře. Hra skončila, skript porovnal výsledek s dřívějším rekordem a nový zapsal do úložiště prohlížeče. Zítra hráč otevře stránku ve stejném prohlížeči na stejném notebooku - rekord je na místě. Otevře ji na telefonu - tam je prázdno, telefon má vlastní úložiště. Vy jako autor hry tenhle rekord neuvidíte nikdy. A nevadí to: potřebuje ho jen hráč sám a web zůstává statický.

Objednávka v dílně. Klient popsal, co je potřeba udělat, nechal na sebe telefonní číslo, klikl na "odeslat". Skript může ověřit, že jsou pole vyplněná, a dál už nemá kam: když objednávku zapíše do úložiště prohlížeče, zůstane v telefonu klienta a mistr se o ní nedozví. Objednávku musí přečíst jiný člověk na jiném zařízení, takže data musí odejít z počítače klienta a na druhém konci je musí někdo přijmout a uložit. Web složený jen ze souborů takového "někoho" nemá.

Všechno, co se týká jednoho návštěvníka na jednom zařízení, dělá frontend sám. Zbytek je práce druhé poloviny.

3. Backend pracuje na serveru

Backend je program, který běží na serveru a odpovídá na požadavky prohlížečů. Přijmout objednávku a uložit ji. Ověřit přihlašovací jméno a heslo. Poslat seznam produktů. Pracuje i ve chvíli, kdy návštěvník už zavřel kartu, a musí běžet pořád, stejně jako samotný server - počítač, který se nevypíná.

Na schématu jsou dvě cesty stejného tvaru: klik, práce, výsledek. Liší se prostředním obdélníkem - kdo dělá práci a co přesně. Nahoře po tahu ve hře JavaScript v prohlížeči počítá skóre, ukládá rekord a překresluje plochu, a to vše na počítači návštěvníka. Dole se klik na "odeslat" mění v požadavek, požadavek odchází na server, program ho přijme, uloží objednávku u sebe na serveru a odpoví prohlížeči, a na obrazovku se dostane až jeho odpověď. Kde přesně na serveru objednávka leží, rozebírá další sekce. Otázka "kdo dělá práci" je právě ta hranice mezi dvěma typy webů.

Tři rozpoznatelné znaky, že se bez backendu neobejdete:

• přihlášení heslem: někdo musí hesla uchovávat a ověřovat je, a to nemůže být prohlížeč návštěvníka;
• data, která musí vidět ostatní: komentáře, objednávky, sdílený seznam;
• akce vaším jménem: odeslat e-mail, provést platbu, zapsat něco do cizí služby pomocí vašeho klíče.

Jazyk backendu může být jakýkoli: JavaScript (pak je to Node.js), Python, Java, desítka dalších. Pro tento článek není důležitý jazyk, ale to, že program musí někde běžet neustále, a tohle "někde" není prohlížeč. Adresa webu vede na místo na serveru stejně jako u statického webu, jen na tomto místě teď není soubor, ale program, který odpověď skládá za běhu.

4. Kde žijí data

Kdo musí dělat práci po kliknutí, rozhodují data: kde leží a kdo je má vidět. Ne vzhled webu ani jeho složitost. Místa jsou tři.

V souborech projektu. Text stránky, obrázky, pravidla hry. Jsou stejné pro všechny návštěvníky a mění se jen novým nasazením: upravíte soubor, zveřejníte znovu.

V prohlížeči návštěvníka. Nastavení, nejlepší skóre, rozepsaný formulář, o který nechcete přijít při obnovení stránky. Vidí je jen tento návštěvník na tomto zařízení. Zmizí při vymazání dat webu, v anonymním okně nejsou, v jiném prohlížeči a na jiném zařízení taky ne, a vy o nich nevíte vůbec nic.

V databázi na serveru. Objednávky, komentáře, účty. Vidí je všichni, komu jsou určená, a vy také. Existují bez ohledu na to, jestli má někdo otevřenou kartu prohlížeče. Aby se tam něco dostalo, potřebujete program na serveru, který data přijme a zapíše.

Na schématu jsou stejné dva světy jako na schématu výše, jen v nich teď nepracují vykonavatelé, ale leží data. Soubory webu putují ke každému návštěvníkovi jako kopie, proto mají všichni stejnou stránku. Úložiště prohlížeče je jediný obdélník bez šipek: data v něm jsou, ale ze zařízení neodcházejí a vy je neuvidíte. Do databáze se data dostávají jen přes program, zato odtud je vidí všichni, komu jsou určená.

Místo teorie si položte jednu otázku: má to, co zadal tento člověk, vidět i někdo jiný? "Zapamatovat nejlepší skóre" - ne, takže úložiště prohlížeče, a web zůstává statický. "Uložit objednávku" - ano, takže databáze a program, který do ní zapisuje. Otázka má jednu výjimku a ta se dat netýká: klíč k cizí službě. Pokud klíč máte, odpověď "ne" nepomůže: v souborech ležet nesmí, takže je potřeba program na serveru, který chodí do cizí služby vaším jménem, nebo cizí zprostředkující služba, která to udělá za vás.

Existuje i něco mezi. Formulář objednávky za vás může přijímat cizí služba: návštěvník klikne na "odeslat", data neodejdou na váš server, ale k ní, a odtamtud vám přijdou e-mailem. Pořád je to backend, jen ne váš. Agent vám takovou službu doporučí, když se zeptáte; teď je důležité pochopit, že formulář bez něčího programu na serveru nefunguje.

5. Proč se způsoby nasazení liší

Statický web se zveřejňuje kopírováním: složka putuje na hosting (cizí server, který vaše soubory posílá všem zájemcům), odkaz je hotový, aktualizace znamená zkopírovat znovu. A je to.

U backendu je to jinak. Na serveru musí být prostředí pro jazyk programu - samotný Python nebo Node.js, bez kterých není čím kód spustit. Program musí běžet a musí se restartovat, pokud spadne. Vedle musí fungovat databáze. Klíče k databázi a k cizím službám musí ležet tak, aby je četl program, ale ne návštěvníci. Každá z těchto částí se aktualizuje zvlášť a rozbíjí se po svém.

Proto je potřeba i jiný hosting: takový, který umí spouštět programy, ne jen posílat soubory. Tam se obvykle platí za čas, po který program běží, a za místo pro databázi. Bezplatné varianty existují, ale s výhradami, které se mění častěji než tento článek.

Jedno upřesnění k řádku o tajných údajích. Klíč k hostingu, pokud jste si ho založili kvůli trvalému odkazu, statický web má, ale leží odděleně od složky webu a do ní se nedává.

"Zprovoznit server" zní v odpovědi agenta všedně, jako "vytvořit soubor". Za touto frází stojí celý pravý sloupec tabulky a skoro každý jeho řádek pak bude potřeba udržovat.

6. Kam zveřejnit statický web

Protože se statický web zveřejňuje kopírováním, hostingů pro něj je hodně a většina je pro malou stránku zdarma. Tady je pět nejběžnějších. V tabulce narazíte na slovo "repozitář": zatím stačí chápat ho jako složku projektu pod kontrolou verzí, podrobněji jindy.

Jak vybírat. Ukázat a probrat - ten, kde se odkaz objeví bez registrace. Nechat ho běžet dlouhodobě - kterýkoli, kde jste si založili účet. Projekt leží v repozitáři - ten, který se připojuje k repozitáři a aktualizuje se sám při každé změně. Na to, jak vypadá publikovaná stránka, výběr vliv nemá: soubory jsou stejné.

Pokud má web backend

Program potřebuje hosting, který umí nejen posílat soubory, ale i spustit váš kód a udržet ho v běhu: na vstupu nechce složku, ale program, a prostředí pro něj si připraví sám. Část služeb z tabulky výše má takový režim taky, ale obvykle se začíná u dvou, které jsou stavěné přímo pro programy:

Bezplatný backend má vždycky svou cenu: u jedné služby program usíná a první návštěvník po pauze čeká, než se probudí, u jiné dochází kredit. Když návštěvníků přibude, za trvalý provoz se začne platit. U statického webu tenhle problém není: soubory nespí.

Podmínky a limity se u všech služeb mění a produkty se přejmenovávají a slučují: Cloudflare například už doporučuje začínat nové projekty ne v Pages, ale ve Workers, kde se statické soubory nahrávají stejně. Čísla se do žádné z tabulek záměrně nedostala: před výběrem se podívejte na stránku s tarify.

7. Na co se zeptat agenta před publikací

Agent se podívá na složku a obvykle sám pojmenuje typ projektu. Soubory bez programu - navrhne hosting pro statické weby, i kdyby mezi soubory byl formulář, který nemá kam odesílat: toho si nevšimne vždycky. Je tam server.js nebo app.py - řekne, že je potřeba server, a zeptá se, kde bude. Pokud to neřekl nebo to řekl příliš rychle, zeptejte se sami:

Podívej se na projekt a řekni, jestli je to statický web, nebo jestli potřebuje server.
Vypiš v bodech, co přesně vyžaduje server.
U každého bodu napiš, jestli se dá obejít bez serveru, nebo jestli ho lze odložit.

Odpověď závisí na projektu, proto ji tu neuvádíme. Pár věcí ale stojí za to sledovat v jakékoli odpovědi.

• Na "je potřeba server" nekývejte bez rozmyslu. Zeptejte se, co přesně to vyžaduje a jestli se to dá udělat v prohlížeči nebo odložit - například vydat první verzi bez formuláře. Agent rád staví backend tam, kde by stačilo úložiště prohlížeče.
• A naopak: pokud mají být data sdílená, agent nejspíš řekne, že statický web nestačí. Není to komplikování, ale nazývání věcí pravými jmény. tady není o čem se přít.
• U klíče k cizí službě se vás agent zeptá, kam ho uložit. Odpověď "do souboru webu" je špatná a dobrý agent to řekne sám. Pro takové klíče existuje místo mimo soubory webu a agent ho má sám pojmenovat, ne navrhovat, abyste klíč vepsali do stránky.
• Před nasazením statického webu agent potřebuje složku. Před nasazením backendu ještě odpovědi na otázky o databázi, prostředí a tajných klíčích. Pokud žádné otázky nepadly a server se přesto "zprovoznil", podívejte se, co přesně udělal a kde.

Slova "statický web" a "backend" nepopisují složitost, ale místo: kde se odehrává práce a kde žijí data. Když víte, kde to místo je, způsob publikace z toho vyplyne sám.

Podmínky hostingů se časem mění, ověřujte si je na stránkách s tarify.