Frontend vs backend: mi a különbség?

A frontend az alkalmazás azon része, amely a felhasználó böngészőjében fut: az oldalak, gombok, űrlapok és animációk, amiket lát és kattint. A backend az a rész, amely a felhasználó számára láthatatlan szerveren fut: tárolja és lekérdezi az adatokat, alkalmazza az üzleti szabályokat, ellenőrzi, ki mit tehet meg, és olyan szolgáltatásokkal kommunikál, mint a fizetés vagy az e-mail. A kettő egy API-n keresztül beszél egymással, és az adatbázissal együtt alkotja a „full stack” alkalmazást.

Miért fontos ez AI-val való építésnél?

Amikor egy AI-építőnek leírsz egy alkalmazást, akkor – akár tudatosan, akár nem – mindkét felet egyszerre írod le. Az „a vendégek foglalhatnak időpontot” mondat egy foglalási űrlapot (frontend), az üres időpontok szabályait (backend) és egy helyet, ahol a foglalásokat tárolni lehet (adatbázis).

A felosztás ismerete három gyakorlati dologban segít:

1. Biztonság. A frontenden lévő bármit lát és módosíthat a felhasználó. A szabályoknak és a titkos kulcsoknak a backendben kell lakniuk.
2. Hibakeresés. A „a gomb nem reagál” és a „a gomb reagál, de semmi nem mentődik” más-más felet jelöl. Ha megmondod, mit látsz, az AI gyorsabban megtalálja az okot.
3. Hosting és költség. Egy csak frontendes oldal olcsón és egyszerűen üzemeltethető. A backendnek valahol futnia kell, ez befolyásolja, mennyibe kerül, és hogyan viselkedik az alkalmazás üresjáratban.

Egy mindennapi hasonlat

Gondolj egy étteremre.

A frontend az étterem terme: az étlap, az asztalok, a dekoráció, a pincér, aki felveszi a rendelést. Úgy készült, hogy a vendégek lássák és megérintsék.

A backend a konyha és az iroda: a szakácsok, a raktár, a pénztár, a vezető szabályai arról, ki kap kedvezményt. A vendégek nem mennek be oda, és nem is kellene nekik.

Az API a kettő közötti átadóablak: ahol a rendelések egyeztetett formában be-, az ételek kikerülnek. Az adatbázis a raktár és a rendelési könyv.

A vendég átírhatja a rendelőlapját (a frontend az ő kezében van), de a konyha továbbra is eldönti, mit főz és mennyiért. Ezért a fontos ellenőrzések hátul, a backendben vannak.

Mit csinál a két oldal?

Néhány keretrendszer elmossa a határt. A Next.js például lehetővé teszi, hogy egy projekt böngészős és szerveroldali kódot is tartalmazzon. Az elv ugyanaz: mindig az a kérdés, hogy ez a rész hol fut?

Egy kidolgozott példa: óra foglalása

Íme, mi történik, amikor valaki foglal egy jógaórára, lépésenként.

Figyeld meg a 4. és a 6. lépést: a bemenetet kétszer ellenőrzik. A frontend-ellenőrzés azonnali visszajelzést ad; a backend-ellenőrzés az, ami ténylegesen számít, mert egy elszánt felhasználó teljesen megkerülheti a frontendet.

Gyakori fogalmak magyarázata

Kell a te alkalmazásodnak backend?

Gyakori hibák és tévhitek

• Titkos kulcsok a frontendben. Bárki látja, aki megnyitja a böngésző fejlesztői eszközeit. Ez a legelterjedtebb komoly hiba az AI-val épített alkalmazásokban.
• Szabályok csak a frontenden. Ha a „törlés” gombot nem adminoknak elrejted, az nem védelem; a backendnek kell visszautasítania a kérést.
• Azt hinni, hogy a backend „csak az adatbázis”. Az adatbázis tárolja az adatot. A backend dönti el, ki olvashatja és változtathatja, és hogyan.
• Azt hinni, hogy a JavaScript egyenlő a frontenddel. A JavaScript és a TypeScript a Node.js-szel szervereken is fut.
• Rossz felet okolni. Ha az oldal jól néz ki, de az adat hibás, a probléma általában a backendben vagy az adatbázisban van, nem a dizájnban.
• Túlépíteni. Egy portfóliónak nincs szüksége egyedi backendre. Ha mégis hozzáadod, többe kerül, és több mozgó alkatrész lesz.

Mit kérj az AI-építődtől?

• „Melyik része fut a böngészőben, és melyik a szerveren?”
• „Vidd át az API-kulcsokat a backendbe, és olvasd őket környezeti változókból.”
• „Minden űrlapot ellenőrízz a szerveren is, nem csak a böngészőben.”
• „A backenden érvényesítsd, hogy csak az adminok törölhessenek foglalásokat.”
• „Az oldal jól néz ki, de az adat nem mentődik – nézd meg a backend naplóit a kérésre.”
• „Ez egy egyszerű marketingoldal; maradjon csak frontend, hacsak nem kell backend.”

Frontend és backend a Mythexben

Az új Mythex-projekt egy Vite, React, TypeScript és Tailwind frontenddel indul, a backendet pedig az ügynök adja hozzá, amikor az alkalmazásodnak szüksége van rá – vagy kérhetsz külön API-t Node-ban, Pythonban (FastAPI), C#-ban vagy Java-ban, a frontend mellett, ugyanabban a projektben. Az előnézetben át tudsz váltani a weboldal és az API-szerver között, a publikálás pedig mindkettőt telepíti, szükség esetén adatbázissal és fájltárolással kiegészítve. A többszolgáltatásos alkalmazásokról a dokumentáció ad részletet, a webhosting útmutató azt írja le, hol fut mindkét rész élesben, az app-sablonok pedig gyors példák a full-stack alkalmazásokra.

Kérdések