Statický web, frontend a backend

Dva weby na obrazovke. Prvý je stránka s hrou: pole, skóre, tlačidlo "znova". Druhý je stránka dielne s formulárom "zadať objednávku". Oba sa otvárajú v prehliadači, oba sú poskladané z HTML, CSS a JavaScriptu, oba vyzerajú hotovo. Prvý sa zverejní za minútu: priečinok na hosting, odkaz je hotový. Pri druhom sa agent pravdepodobne zastaví a opýta sa, kde bude server a kam ukladať objednávky.

Rozdiel nie je v zložitosti ani v kráse. Je v tom, kto musí niečo urobiť, keď návštevník klikne na tlačidlo, a kde potom musia ležať dáta. Rozoberieme tri slová - statický web, frontend a backend - a pozrieme sa, kde žijú dáta a prečo od toho závisí spôsob publikovania. Na konci si povieme, čo sa agent opýta sám skôr, než poviete "publikuj", a čo stojí za to opýtať sa jeho.

1. Statický web

Statický web je web z hotových súborov: index.html, style.css, skripty, obrázky, fonty. Server ich uchováva a každému návštevníkovi posiela tie isté, nič nepočíta a nič si o návštevníkoch nepamätá. Celú prácu - zobraziť, spočítať, zareagovať na klik - robí prehliadač návštevníka na jeho počítači.

Zoberme si jednostránkové portfólio. V priečinku leží index.html s predstavením a zoznamom prác, style.css, desiatka obrázkov a malý skript. Návštevník otvorí odkaz, prehliadač stiahne súbory a poskladá z nich stránku. Klik na prácu zväčší obrázok, prepínač tmavého motívu zmení farby: robí to skript v prehliadači. Server sa po tom, čo súbory poslal, na dianí nezúčastňuje: je mu jedno, kto prišiel a na čo klikol. Pribudla nová práca - upravíte index.html, pridáte obrázok a priečinok zverejníte znova; iný spôsob, ako niečo zmeniť, tu nie je, a web meníte vy, nie návštevník.

Podľa rovnakej schémy fungujú:

• plagát koncertu alebo stretnutia: dátum, miesto, program, mapa; tlačidlo "kúpiť vstupenku" vedie na web predajcu vstupeniek, samotný plagát nič nepredáva;
• landing page produktu alebo služby, ak namiesto formulára ponúka telefón a e-mail;
• dokumentácia k projektu: desiatky stránok s menu a odkazmi medzi sebou, a napriek tomu sú to súbory;
• blog bez komentárov: každý príspevok je súbor, nový sa zverejňuje rovnako ako všetko ostatné;
• hra v prehliadači. Áno, aj hra: ťahy, skóre a animácie počíta prehliadač, server sa o ne nestará.

Kde statický web končí, je vidno, ak si prácu webu rozdelíme na dve polovice: tú, čo robí prehliadač, a tú, čo robí server. Tieto polovice majú svoje mená.

2. Frontend beží v prehliadači

Frontend je všetko, čo beží na počítači návštevníka: značkovanie, štýly a skripty, ktoré prehliadač dostal a spustil u seba. "Predná časť", tá, ktorú vidno. (Často sa jej hovorí "len layout", pritom je to celá časť webu, s ktorou má človek do činenia, pri statickom webe dokonca celý web.)

Frontend zvláda veľa: zobraziť stránku, spočítať ťahy v hre, overiť pred odoslaním, že pole formulára nie je prázdne, zapamätať si niečo do ďalšej návštevy - na to má prehliadač vlastné úložisko, agent ho nazve localStorage. Čo nevie - podeliť sa. Úložisko žije v tomto prehliadači na tomto zariadení, a nikde inde. Kde táto hranica prekáža a kde nie, je vidno na dvoch príkladoch.

Najlepšie skóre v hre. Hra sa skončila, skript porovnal výsledok s predošlým rekordom a nový zapísal do úložiska prehliadača. Zajtra hráč otvorí stránku v tom istom prehliadači na tom istom notebooku - rekord je tam. Otvorí ju na telefóne - je prázdno, telefón má svoje vlastné úložisko. Vy, autor hry, ten rekord neuvidíte nikdy. A nič sa nedeje: potrebuje ho len samotný hráč, a web zostáva statický.

Objednávka v dielni. Klient opísal, čo treba urobiť, nechal telefónne číslo, klikol "odoslať". Skript môže overiť, že polia sú vyplnené, a ďalej nemá kam: zapíše objednávku do úložiska prehliadača - objednávka zostane v telefóne klienta a majster sa o nej nedozvie. Objednávku má prečítať iný človek na inom zariadení, takže dáta musia odísť z počítača klienta a na druhej strane ich musí niekto prijať a uložiť. Web len zo súborov takého "niekoho" nemá.

Všetko, čo sa týka jedného návštevníka na jednom zariadení, robí frontend sám. Zvyšok je práca druhej polovice.

3. Backend beží na serveri

Backend je program, ktorý beží na serveri a odpovedá na požiadavky prehliadačov. Prijať objednávku a uložiť ju. Overiť prihlasovacie meno a heslo. Vrátiť zoznam tovaru. Pracuje aj vtedy, keď návštevník už zavrel kartu, a musí bežať stále, rovnako ako samotný server - počítač, ktorý sa nevypína.

Na schéme sú dve cesty rovnakého tvaru: klik, práca, výsledok. Líšia sa strednou plôškou - kto robí prácu a čo presne. Hore po ťahu v hre JavaScript v prehliadači počíta skóre, uloží rekord a prekreslí pole, a to všetko na počítači návštevníka. Dole sa klik na "odoslať" mení na požiadavku, požiadavka odíde na server, program ju prijme, uloží objednávku u seba na serveri a odpovie prehliadaču, a až jeho odpoveď sa objaví na obrazovke. Kde presne na serveri objednávka leží, je téma ďalšej časti. Otázka "kto robí prácu" je práve hranica medzi dvoma typmi webov.

Tri rozpoznateľné znaky, že sa bez backendu nezaobídete:

• prihlásenie heslom: niekto musí heslá uchovávať a overovať, a to nemôže byť prehliadač návštevníka;
• dáta, ktoré musia vidieť iní: komentáre, objednávky, spoločný zoznam;
• akcia vaším menom: odoslať e-mail, spracovať platbu, zapísať niečo do cudzej služby pomocou vášho kľúča.

Jazyk backendu môže byť akýkoľvek: JavaScript (vtedy je to Node.js), Python, Java, desiatka ďalších. Pre tento článok nie je dôležité toto, ale to, že program musí niekde bežať nepretržite, a toto "niekde" nie je prehliadač. Adresa webu vedie na miesto na serveri, rovnako ako pri statickom webe, len na tomto mieste teraz nie je súbor, ale program, ktorý zostavuje odpoveď za behu.

4. Kde žijú dáta

O tom, kto má robiť prácu po kliknutí, rozhodujú dáta: kde ležia a kto ich má vidieť. Nie vzhľad webu ani jeho zložitosť. Miesta sú tri.

V súboroch projektu. Text stránky, obrázky, pravidlá hry. Rovnaké pre všetkých návštevníkov a menia sa len novým nasadením: opravíte súbor, zverejníte znova.

V prehliadači návštevníka. Nastavenia, najlepšie skóre, koncept formulára, ktorý by ste nechceli stratiť pri obnovení. Vidí ich len tento návštevník na tomto zariadení. Zmiznú pri vymazaní dát webu, v súkromnom okne nie sú, v inom prehliadači a na inom zariadení tiež nie, a vy o nich neviete nič.

V databáze na serveri. Objednávky, komentáre, účty. Vidia ich všetci oprávnení, a vy tiež. Žijú bez ohľadu na to, či má niekto otvorenú kartu. Aby sa tam niečo dostalo, treba program na serveri, ktorý dáta prijme a zapíše.

Na schéme sú tie isté dva svety ako na schéme vyššie, len teraz v nich namiesto vykonávateľov práce ležia dáta. Súbory webu putujú ku každému návštevníkovi ako kópia, preto majú všetci rovnakú stránku. Úložisko prehliadača je jediná plôška bez šípok: dáta v ňom sú, ale zo zariadenia neodchádzajú, a vy ich neuvidíte. Do databázy sa dáta dostanú len cez program, zato odtiaľ ich vidia všetci oprávnení.

Namiesto teórie si položte jednu otázku: má to, čo zadal tento návštevník, vidieť aj niekto iný? "Zapamätať si najlepšie skóre" - nie, teda úložisko prehliadača, a web zostáva statický. "Uložiť objednávku" - áno, teda databáza a program, ktorý do nej zapisuje. Otázka má jednu výnimku, ktorá sa dát netýka: kľúč k cudzej službe. Ak kľúč existuje, odpoveď "nie" nepomôže: v súboroch ležať nesmie, takže je potrebný program na serveri, ktorý sa na cudziu službu obracia vaším menom, alebo cudzia sprostredkovateľská služba, ktorá to urobí za vás.

Býva aj stredná cesta. Formulár objednávky môže za vás prijímať cudzia služba: návštevník klikne "odoslať", dáta neodchádzajú na váš server, ale k nim, a odtiaľ vám prídu emailom. Aj to je backend, len nie váš. Agent vám takú službu pomenuje, ak sa opýtate; teraz je dôležité pochopiť, že formulár bez niečieho programu na serveri nefunguje.

5. Prečo sú spôsoby nasadenia rôzne

Statický web sa publikuje kopírovaním: priečinok sa skopíruje na hosting (cudzí server, ktorý vaše súbory posiela každému záujemcovi), odkaz je hotový, aktualizácia znamená skopírovať znova. To je všetko.

Pri backende je to inak. Na serveri musí byť nainštalované prostredie pre jazyk programu - samotný Python alebo Node.js, bez ktorých nemá kód čo spustiť. Program musí bežať a po páde sa musí reštartovať. Popri tom musí fungovať databáza. Kľúče k databáze a k cudzím službám musia ležať tak, aby ich čítal program, a nie návštevníci. Každá z týchto častí sa aktualizuje zvlášť a kazí sa po svojom.

Odtiaľ pochádza aj iný hosting: taký, ktorý spúšťa programy, nielen posiela súbory. Tam sa zvyčajne platí za čas, počas ktorého program beží, a za miesto pre databázu. Bezplatné varianty existujú, ale s výhradami, ktoré sa menia častejšie než tento článok.

Jedno spresnenie k riadku o tajomstvách. Kľúč k hostingu, ak ste si ho založili kvôli stálemu odkazu, statický web má, ale žije oddelene od priečinka webu a doňho sa neukladá.

"Rozbehnúť server" znie v odpovedi agenta všedne, ako "vytvoriť súbor". Za touto frázou stojí celý pravý stĺpec tabuľky a takmer každý riadok potom bude treba udržiavať.

6. Kam publikovať statický web

Keďže sa statický web publikuje kopírovaním, hostingov preň je veľa a väčšina je pre malú stránku zadarmo. Tu je päť, ktoré sa vyskytujú najčastejšie. V tabuľke sa objaví slovo "repozitár": zatiaľ stačí chápať ho ako priečinok projektu pod kontrolou verzií, podrobnejšie nie teraz.

Ako vyberať. Ukázať a prediskutovať - ten, kde odkaz vznikne bez registrácie. Nechať dlhodobo - ktorýkoľvek, kde máte účet. Projekt leží v repozitári - ten, čo sa pripojí k repozitáru a aktualizuje sa sám pri každej zmene. Na to, ako vyzerá publikovaná stránka, výber nemá vplyv: súbory sú tie isté.

Ak má web backend

Program potrebuje hosting, ktorý vie nielen posielať súbory, ale aj spustiť váš kód a udržať ho v chode: na vstupe nemá priečinok, ale program, a prostredie preň si nainštaluje sám. Časť služieb z tabuľky vyššie má takýto režim tiež, ale zvyčajne sa začína dvoma, ktoré sú určené priamo pre programy:

Bezplatný backend má vždy svoju cenu: u jednej služby program zaspáva a prvý návštevník po pauze čaká, kým sa zobudí, u druhej dochádza kredit. Keď návštevníkov pribúda, za nepretržitú prevádzku sa začína platiť. Pri statickom webe tento problém nie je: súbory nespia.

Podmienky a limity sa u všetkých služieb menia a produkty sa premenúvajú a zlučujú: Cloudflare napríklad už navrhuje začínať nové projekty nie v Pages, ale vo Workers, kde sa statické súbory nasadzujú rovnako. Čísla sme do oboch tabuliek zámerne nedali: pred výberom sa pozrite na stránku s cenníkom.

7. Čo sa opýtať agenta pred publikovaním

Agent sa pozrie na priečinok a zvyčajne sám pomenuje typ projektu. Súbory bez programu - navrhne hosting pre statické weby, aj keď je medzi súbormi formulár, ktorý nemá kam odosielať: to si nevšimne vždy. Je tam server.js alebo app.py - povie, že treba server, a opýta sa, kde bude. Ak to nepovedal alebo povedal príliš rýchlo, opýtajte sa sami:

Pozri sa na projekt a povedz, či je to statický web, alebo potrebuje server.
Vypíš po bodoch, čo presne vyžaduje server.
Pri každom bode navrhni, či sa dá zaobísť bez servera, alebo to odložiť.

Odpoveď závisí od projektu, preto tu nie je. Sú tu ale veci, na ktoré stojí za to pozrieť sa v každej odpovedi.

• S "treba server" nesúhlaste naslepo. Opýtajte sa, čo presne to vyžaduje a či sa to dá urobiť v prehliadači alebo odložiť - napríklad vydať prvú verziu bez formulára. Agent rád stavia backend tam, kde by stačilo úložisko prehliadača.
• A naopak: ak majú byť dáta spoločné, agent pravdepodobne povie, že statický web nestačí. Nie je to komplikovanie, len pomenovanie vecí pravými menami. Tu sa niet o čom hádať.
• Na kľúč k cudzej službe sa agent opýta, kam ho uložiť. Odpoveď "do súboru webu" je nesprávna, a dobrý agent to sám povie. Takéto kľúče majú miesto mimo súborov webu, a agent ho má pomenovať sám, nie navrhnúť zapísať kľúč do stránky.
• Pred nasadením statického webu agent potrebuje priečinok. Pred nasadením backendu ešte aj odpovede o databáze, prostredí a tajných kľúčoch. Ak otázky neboli a server sa "rozbehol", pozrite sa, čo presne urobil a kde.

Slová "statický web" a "backend" nepopisujú zložitosť, ale miesto: kde prebieha práca a kde žijú dáta. Keď je toto miesto známe, spôsob publikovania sa vyberie sám.

Podmienky hostingov sa časom menia, overujte si ich na stránkach s cenníkom.