7.1 A modern webapplikáció architektúrája – nagy kép

Áttekintő

Amikor beírod a böngészőbe, hogy facebook.com, és megjelenik az oldal – mi történt közben?

Ez a kérdés nem triviális. Annyi réteg van a kattintás és a megjelenő adat között, hogy sok junior fejlesztő soha nem látja a teljes képet. Csak a saját kis darabjukon dolgoznak, és nem értik, hogyan illeszkednek a többihez.

Ez a fejezet azt mutatja meg, hogy egy webalkalmazásban mi hol fut, miért, és hogyan kommunikálnak egymással a részek. Nem mélyrepülés – hanem a nagy kép. Amire szükséged van, hogy ne nézzél zavartan a senior fejlesztőre, amikor azt mondja: „ez kliensoldalon fut le, nem kell szerverhívás."

Miért számít ez az állásinterjún?
Az egyik leggyakoribb junior interjúkérdés valamilyen formában: „Mi történik, amikor beírsz egy URL-t a böngészőbe?" Ha ezt értelmesen meg tudod válaszolni, azonnal kitűnsz a tömegből.

Miért számít ez production környezetben?
Ha nem tudod, hol fut a kód, nem tudod, hol kell keresni a hibát. Egy frontend hiba oka lehet a backendben. Egy lassú API mögött egy lassú adatbázislekérdezés áll. A nagy kép megértése nélkül vakon tapogatódzol.

Részletes leírás

A két alapszereplő: kliens és szerver

Mielőtt bármibe belemenünk, tisztázni kell két fogalmat, amelyeket sokszor felváltva, de pontatlanul használnak.

Kliens = az, aki kér valamit.
Szerver = az, aki kiszolgálja a kérést.

Ez nem hardverfogalom, hanem szerepfogalom. Egy szerver lehet a saját laptopod is (ha fejlesztési módban futtatod az alkalmazást). Egy kliens lehet egy mobilalkalmazás, egy böngésző, egy másik szerver – bármi, ami kérést küld.

A webalkalmazásokban a kliens tipikusan a böngésző (vagy a mobilapp), a szerver pedig valahol egy gépen futó backend program.

A kérés-válasz ciklus – lépésről lépésre

Nézzük végig, mi történik, amikor beírod: https://webshop.hu/termekek

1. DNS – a névre keresés

A böngésző nem tudja, hol van webshop.hu. Megkérdezi a DNS-szervert (Domain Name System): „Ki a webshop.hu?"

A DNS visszaad egy IP-címet, pl. 185.42.13.7. Ettől fogva a böngésző tudja, melyik számítógépre kell kapcsolódnia.

Analógia: A DNS olyan, mint egy telefonkönyv. A nevet tudod, de a számot ki kell keresned.

2. TCP kapcsolat kiépítése + HTTPS kézfogás

A böngésző kapcsolódik a szerver IP-címéhez a megadott porton (HTTPS = 443). Létrejön egy biztonságos, titkosított csatorna (erről részletesebben a 7.4 hálózati alfejezetben lesz szó).

3. HTTP kérés elküldése

A böngésző elküldi a tényleges kérést:

GET /termekek HTTP/1.1
Host: webshop.hu
Accept: text/html

Ez egy HTTP GET kérés – lényegében azt mondja: „Add meg a /termekek oldalt."

4. A szerver fogadja a kérést

A szerver oldalon fut a backend alkalmazás – PHP, Python, Node.js, Java, Go, C#, bármi. Ez a program fogadja a kérést, és elkezdi feldolgozni.

[Kérés érkezik] → [Router: melyik kódhoz tartozik a /termekek útvonal?] → [Controller]

5. Az adatbázis lekérdezése

A controller lekéri az adatokat az adatbázisból:

SELECT * FROM products WHERE is_active = 1;

Az adatbázis visszaadja a termékek listáját.

6. A válasz összerakása és visszaküldése

A backend összrakja a választ – lehet HTML, JSON, XML, bármi:

{
  "products": [
    {"id": 1, "name": "Kávéfőző", "price": 15000},
    {"id": 2, "name": "Vízforraló", "price": 8500}
  ]
}

A szerver visszaküldi a böngészőnek:

HTTP/1.1 200 OK
Content-Type: application/json
...
[adat]

7. A böngésző megjelenít

A böngésző megkapja a választ, és megjeleníti. Ha HTML-t kapott → rendereli. Ha JSON-t kapott → egy frontend JavaScript keretrendszer (React, Vue, stb.) megjeleníti.

Hol fut a kód?

Ez az egyik legfontosabb distinkció, amit junior fejlesztőknek meg kell érteniük.

Kód	Hol fut?	Ki futtatja?	Mikor?
HTML, CSS, JavaScript (frontend)	Felhasználó böngészőjében	Böngésző	Letöltés után
Backend kód (PHP, Python, Node, stb.)	Szerveren	Szerver OS	Kérés érkezésekor
SQL lekérdezés	Adatbázis szerveren	Adatbázis motor	Backend hívja

Fontos következmény: A frontend kódot a felhasználó látja és módosíthatja. A backend kódot nem. Ezért soha nem bízhatsz a kliensről érkező adatokban.

A három fő réteg

A legtöbb webalkalmazás három rétegre bontható:

┌─────────────────────────────────────┐
│           KLIENS (Frontend)         │
│   Böngésző – HTML, CSS, JavaScript  │
│   Amit a felhasználó lát és kezel   │
└────────────────┬────────────────────┘
                 │ HTTP kérések (API hívások)
┌────────────────▼────────────────────┐
│          SZERVER (Backend)          │
│  PHP / Python / Node.js / Java stb. │
│  Üzleti logika, autentikáció, stb.  │
└────────────────┬────────────────────┘
                 │ SQL / ORM
┌────────────────▼────────────────────┐
│         ADATBÁZIS                   │
│  PostgreSQL / MySQL / MongoDB stb.  │
│  Adat tartós tárolása               │
└─────────────────────────────────────┘

Ez a klasszikus háromrétegű architektúra. A valóság ennél bonyolultabb lehet (cache, message queue, CDN, stb.), de ez az alap, amire minden ráépül.

API – a rétegek közötti szerződés

Az API (Application Programming Interface) az a „szerződés", amiben rögzítve van:

milyen kéréseket fogad a szerver
milyen formátumban kell küldeni az adatot
milyen választ küld vissza

Amikor a frontend JavaScript kód adatot kér a backendtől, API-n keresztül kommunikál – nem közvetlenül az adatbázishoz, és nem közvetlenül fájlokat olvas. Az API ez a közbülső réteg.

Miért fontos ez? Mert ugyanazt az API-t használhatja a webes frontend és a mobilapp is. A backend egyszer van megírva, de több kliens éri el.

Monolith vs. Microservice – nagyvonalakban

Amikor a backend kódbázisáról van szó, két alapvető megközelítés létezik.

Monolith

Egy nagy alkalmazás, amelybe minden be van építve: felhasználókezelés, termékkezelés, fizetés, értesítések – minden egy kódbázisban, egy processzen belül fut.

Jellemzők:

Egyszerűbb fejleszteni és deployolni (legalábbis eleinte)
Könnyebb debuggolni (egy helyen van minden)
A legtöbb startup és kis csapat ezzel kezdi
Ha egy része lassul, az egész lassulhat

Microservice

Sok kis, független alkalmazás, amelyek egymással kommunikálnak. A felhasználókezelés külön service, a termékek külön, a fizetés külön.

Jellemzők:

Jobb skálázhatóság (csak a szűk keresztmetszetet kell növelni)
Komplexebb infrastruktúra (sok service = sok dolog romolhat el)
Debugging nehezebb (egy kérés több service-en megy át)
Nagy cégek (Netflix, Amazon) használják sikerrel

Junior fejlesztőként legfontosabb tudnivaló: A legtöbb első munkahelyen monolithba kerülsz. A microservice fogalmát értened kell (standup-okon hallani fogod), de nem kell expertnek lenned benne.

Pragmatikus ökölszabály: Amíg a csapat kisebb mint 20 fő és a rendszer „kiszámítható" méretű, a monolith a jobb választás. A microservice nem csodaszer – rengeteg extra komplexitást hoz.

Életszerű példák

1. példa: „Frontend hiba" – de hol a valódi probléma?

Képzeld el, hogy egy webshopba bejelentkezel, és nem jelennek meg a termékek. Fehér az oldal, nincs hibaüzenet.

Junior fejlesztőként mi a teendő? A nagy kép megértésével:

Böngésző konzol → JavaScript hiba? → Ha igen: frontend probléma
Hálózati tab → API hívás visszajött? → Ha 500-as hiba: backend probléma
Backend logok → adatbázislekérdezés sikeres volt? → Ha nem: DB probléma

Ha nem érted, hol futnak a rétegek, nem tudod, hol keresd a hibát. Véletlenszerűen nézel kódot, és nem találod.

2. példa: Standup szituáció

Senior fejlesztő azt mondja: „Az API endpoint gyorsítótárazva van, a cache 5 percig él, ezért a friss adat csak késve jelenik meg a kliensnek."

Ha nem érted az architektúrát: → Nem tudod, mit jelent, és nem mersz kérdezni.

Ha érted: → Tudod, hogy a szerver (backend) cache-eli a választ, nem az adatbázis és nem a böngésző. Tudod, hogy 5 percen belül a kliensek régi adatot kapnak. Tudod, kinek jelents bugot (backend csapat).

3. példa: Állásinterjú kérdés

Kérdés: „Mi a különbség a frontend és a backend között?"

Gyenge válasz: „Frontend az, amit a felhasználó lát, backend az, ami mögötte van."

Erős válasz: „A frontend a böngészőben futó kód – HTML, CSS, JavaScript – ami az adatok megjelenítéséért és a felhasználói interakcióért felelős. A backend a szerveren futó kód, ami az üzleti logikát végzi, az adatbázissal kommunikál, és API-n keresztül szolgálja ki a frontendet. A kettő HTTP kérés-válasz cikluson keresztül kommunikál egymással."

Példafeladat

Az alábbi leírások mindegyike egy kódrészletet jellemez. Azonosítsd, hogy az adott kód a kliensen (böngészőben) fut-e, a szerveren, vagy az adatbázisban!

Indokold is a döntésed egy mondatban.

A) kód:

Megkapja a felhasználó_id paramétert, lekérdezi az adatbázisból az adott felhasználó rendeléseit, majd JSON formátumban visszaadja azokat.

B) kód:

Figyeli, hogy a felhasználó rákattintott-e a „Kosárba" gombra, és ha igen, megjelenít egy értesítést a képernyő sarkában.

C) kód:

Összesíti az összes lezárt rendelés értékét, és visszaadja az átlagot.

D) kód:

Ellenőrzi, hogy a beérkező kérés tartalmaz-e érvényes autentikációs tokent, és ha nem, visszaad egy 401-es hibakódot.

E) kód:

Animálja a navigációs menüt: kinyílik, ha rákattintasz a hamburger ikonra.

Megoldások:

Kód	Hol fut	Indok
A	Szerver (backend)	Adatbázist kérdez le, kérést dolgoz fel, JSON-t ad vissza
B	Kliens (böngésző)	Kattintás eseményfigyelő, vizuális visszajelzés – browser-oldali JS
C	Adatbázis	Aggregáció (összesítés, átlag) – ezt az adatbázis motor végzi
D	Szerver (backend)	HTTP kérés ellenőrzése, 401-es válasz küldése – backend middleware
E	Kliens (böngésző)	DOM animáció, UI interakció – böngészőben futó JavaScript

Tesztkérdések

1. kérdés

Egy felhasználó beírja a böngészőbe: https://pelda.hu/profil. Sorold fel a helyes sorrendben a kérés útját!

A) Szerver fogadja a kérést → DNS → Böngésző elküld kérést → Adatbázis lekérdezés → Válasz visszaküldése
B) Böngésző DNS-t kérdez → Kapcsolat kiépítés → Böngésző HTTP kérést küld → Szerver feldolgozza → Adatbázis lekérdezés → Válasz vissza → Böngésző megjelenít
C) Böngésző HTTP kérést küld → DNS megkeresi az IP-t → Szerver fogadja → Adatbázis lekérdezés → Válasz
D) DNS → Adatbázis → Szerver → Böngésző → Megjelenítés

Helyes válasz

B – A DNS-feloldás az első lépés (megtudja az IP-t), utána épül ki a kapcsolat, majd jön a tényleges HTTP kérés, szerver feldolgozás, adatbázis lekérdezés, válasz és megjelenítés.

2. kérdés

Melyik állítás helyes a kliens-szerver modellben?

A) A kliens mindig a felhasználó böngészője
B) A szerver mindig egy dedikált fizikai gép adatközpontban
C) A kliens az, aki kérést küld, a szerver az, aki válaszol – ez szerepfogalom, nem hardverfogalom
D) Kliens és szerver nem kommunikálhatnak JSON-ban

Helyes válasz

C – Kliens és szerver szerepek, nem eszközök. A saját laptopod is lehet szerver fejlesztési módban.

3. kérdés

Melyik NEM a backend feladata egy tipikus webalkalmazásban?

A) Adatbázisból adatot kiolvasni
B) Felhasználó hitelesítése (autentikáció)
C) Gomb animáció megjelenítése kattintásra
D) API végpontok kiszolgálása

Helyes válasz

C – A gomb animáció UI interakció, ez a kliensen (böngészőben) futó JavaScript feladata.

4. kérdés

Egy junior fejlesztő azt mondja: „Ellenőriztem a frontend kódban, hogy az email cím érvényes-e, szóval nem kell szerveren is ellenőrizni."

Mi a probléma ezzel a hozzáállással?

A) Nincs probléma, ha a frontend validál, az elegendő
B) A frontend kódot a felhasználó módosíthatja vagy megkerülheti, ezért a szerver oldali validáció elmaradhatatlan
C) A szerver oldali validáció lassabb, ezért helyesebb kizárólag frontenden validálni
D) Az email-validáció kizárólag adatbázis szinten lehetséges

Helyes válasz

B – A kliensoldalon futó kód a felhasználó eszközén fut, bármikor megkerülhető (pl. böngésző DevTools, API direkthívás). A szerver oldali validáció nem opcionális.

5. kérdés

Mi az API szerepe egy háromrétegű webalkalmazásban?

A) Az adatbázis alternatívája, ahol az adatok tárolódnak
B) A frontend és a backend közötti kommunikációs szerződés és interfész
C) Egy külön szerver, ami a biztonságért felel
D) A böngészőben futó JavaScript keretrendszer

Helyes válasz

B – Az API (Application Programming Interface) definiálja, hogy a frontend milyen kéréseket küldhet a backendnek, milyen formátumban, és milyen választ kap vissza.

6. kérdés

Párosítsd össze a fogalmakat a helyes definícióval!

Fogalom	Definíció
1. DNS	A. Adatok tartós tárolása, lekérdezése
2. Frontend	B. Névből IP-cím meghatározása
3. Backend	C. Böngészőben futó megjelenítési réteg
4. Adatbázis	D. Szerveren futó üzleti logika

Helyes válasz

1–B, 2–C, 3–D, 4–A

7. kérdés

Egy webalkalmazásnál azt tapasztalod, hogy a bejelentkezési oldal megjelenik, de a bejelentkezési gombra kattintva nem történik semmi. A böngésző konzolban nincs hiba. Mi a logikus következő lépés?

A) Újraírni az egész bejelentkezési logikát
B) Megnézni a hálózati tabon, hogy küldött-e a böngésző HTTP kérést, és ha igen, milyen választ kapott
C) Azonnal az adatbázis logokat ellenőrizni
D) Újraindítani a szervert

Helyes válasz

B – A rétegek szisztematikus végigkövetése a helyes megközelítés. Ha a kérés el sem ment (hálózati tab üres), frontend probléma. Ha elküldte és hibaválaszt kapott, backend probléma. A többi lépés csak ezután következik.

8. kérdés

Mi a legfontosabb különbség a monolith és a microservice architektúra között?

A) A monolith csak kis cégeknek való, a microservice minden esetben jobb
B) A monolith egyetlen kódbázisban tartja az összes funkciót, a microservice sok kis, egymástól független service-re bontja azokat
C) A microservice csak Docker-rel működik, a monolith nem
D) A monolith nem tud adatbázist használni, a microservice igen

Helyes válasz

B – A monolith = egy egységes alkalmazás. A microservice = sok kis, egymástól független, hálózaton kommunikáló service. A többi állítás hamis.

9. kérdés

Melyik rétegben fut a következő kód?

SELECT COUNT(*) FROM orders WHERE status = 'completed' AND user_id = 42;

A) Frontend (böngésző)
B) Backend (szerver)
C) Adatbázis
D) DNS szerver

Helyes válasz

C – Ez SQL lekérdezés, amit az adatbázis motor hajt végre. (A backend küldi a lekérdezést, de futtatja az adatbázis.)

10. kérdés

Egy interjún megkérdezik: „Mi történik, amikor beírsz egy URL-t a böngészőbe?" Melyik válasz a legjobb egy junior fejlesztőtől?

A) „A böngésző megnyitja az oldalt."
B) „A szerver visszaküldi a HTML-t."
C) „A böngésző DNS-en keresztül megtalálja a szerver IP-címét, HTTP kérést küld, a szerver feldolgozza (esetleg adatbázist kérdez le), visszaküldi a választ, a böngésző pedig megjeleníti."
D) „Ez nagyon összetett, nem tudom pontosan."

Helyes válasz

C – Ez mutatja, hogy érted a teljes kérés-válasz ciklust, az egyes rétegek szerepét, és képes vagy strukturáltan kommunikálni technikai folyamatokról. Az A és B túl felszínes, a D feladja a kérdést.