Így lesz a tervekből működő weboldal – a frontend fejlesztés kulisszatitkai

Hogyan lesz a tervekből működő funkció? A kulcs a frontend. Széll Csaba Senior Frontend Developer segítségével megvizsgáljuk a frontend fejlesztők munkáját, eláruljuk mire van szükség ezen a területen és azt is megmutatjuk, mi az előnye a full stack tudásnak és miért nem fogja még évtizedekig veszélyeztetni az AI ezt a területet.

Kezdjük az elején. Mit csinál egy frontend fejlesztő?

A frontend fejlesztő tulajdonképpen azért felelős, hogy a szoftverek megtervezett felhasználói interfészét implementálja. Ez így elég technikai megfogalmazás. Magyarra fordítva, az a dolga, hogy a grafikusok által megálmodott felületekből olyan kód készüljön, ami pontosan ugyanazt tükrözi, amit ők megterveztek.

Azért fogalmazok kicsit ködösen, mert a frontend nem csak a webes frontendet takarja. Az autó műszerfala is egy frontend, ugyanígy mondjuk a gyárakban a gépek kezelőfelületei, de akár a wifis nyomtatók kijelzője is az, ahol szabályozni lehet a működést. A kurzuson kifejezetten a webes frontenddel fogunk foglalkozni, de csavarok rajta egyet, mert ez nem csak azt jelenti, hogy valami a böngészőben jelenik meg, hanem lehet akár olyan okoseszközön is, amin nincs böngésző.

Tegyük fel, hogy van egy banki applikáció, ahol egy grafikus megtervezi, hogy legyen benne egy piros gomb, ami aztán csinál valamit. A frontend fejlesztők azok, akik megvalósítják ezt?

Én azt mondanám, hogy az, hogy mi történjen, már közös munka a backend fejlesztőkkel, az adatmodellezőkkel és a rendszertervezőkkel. A frontend fejlesztő azért felelős, hogy a gomb megjelenjen és reakcióba lépjen valamivel, tovább menjen a folyamat következő állomására. Ez lehet az is, hogy megjelenjen egy másik gomb, de akár az is, hogy elindul egy utalás. Utóbbi már csapatmunka, itt már a backend is belép a képbe.

Képzések ebben a témában:

Frontendfejlesztés az alapoktól

Csaba Széll

Senior Frontend Developer, Tech Leader @ Starschema

A képzésről

Egy-egy applikáció- vagy weboldalfejlesztés tulajdonképpen csapatmunka a backend és a frontend fejlesztők között?

Ez egy csapatmunka, nagyon sok szakterület között. Az egész onnan indul, hogy az üzleti elemzők, projektmenedzserek összegyűjtik az ügyfelektől jövő igényeket. Jó, ha már ekkor ott van egy felülettervező, így az információkat biztosan pontosan kapja meg. Egy felülettervező egyébként nem csak azt tervezi meg, amit az ügyfél akar.

A tervezők a munka során számba veszik mindazt, amit az ügyfél kér, de számba veszik azt is, ami az elmúlt 25 évben történt a felülettervezés területén. Ebből terveznek egy layoutot, egy oldalvázat, ami tartalmazza a megfelelő információkat, a megfelelő gombokat, a megfelelő leírásokat a felhasználóknak. Ez az alap. Hogyha egy mélyebb, alaposabb tervezésről beszélünk, akkor akár animációk is kerülhetnek bele, amik segítik a felület használatát. Tervezhetnek bele viselkedéseket és az sem ritka, hogy egy-egy elem pontos működése akkor lesz világos, amikor meglátjuk a felülettervet.

Lehet, hogy az ügyfél nem fogalmazta meg elég konkrétan vagy a menedzser nem adta át egyértelműen, de a felülettervező az összes szakértelmét bevetve kitalálja, hogy ennek a gombnak így kell működni, ennek és ennek kell történnie. Azt nyilván nem a felülettervező mondja meg, hogy történjenek az utalások egy banki applikációban, ő inkább a felhasználói felület használatát segítő döntéseket tud meghozni.

Ezután kerül ez az egész – és itt most a folyamat nagyon le van egyszerűsítve – egy frontend fejlesztő elé, illetve inkább egy fejlesztőcsapat elé, akik a mélyebb működéseket is meg tudják valósítani. Amikor egy felülettervből egy weboldal megszületik, akkor még egyáltalán nem interaktív. Tényleges webes technológiákkal készül, de ha rákattintunk egy gombra, akkor nem történik semmi.

Ezt hívjuk site buildnek, ami a frontend fejlesztés közel 50%-át teszik ki. A site build az, amikor HTML-lel és CSS-sel előállítjuk azt a kinézetet, amit ténylegesen megálmodott a fejlesztő vagy a felülettervező csapat. A következő lépés pedig, hogy ezt a felületet interaktívvá tegyük, és elkezdjen működni, elkezdjen reakcióba lépni a backend oldallal.

A feladatokat, folyamatokat látva szerinted milyen skillek szükségesek ahhoz, hogy valaki jó frontend fejlesztő lehessen?

Ezt elég hosszan lehetne sorolni. Ahogy említettem, a frontend körülbelül 50%-a a site build, a másik 50%-ot pedig a működés teszi ki. Mert önmagában egy gomb nem fog reakcióba lépni a back enddel, a háttérben elég komoly programozásra van szükség. De leginkább nem a programozás képessége fontos – úgy gondolom ahhoz, hogy valaki jó szakember legyen, nagyfokú elhivatottságra van szükség. Enélkül csak daráló lesz az egész. Ugyanakkor sok a sikerélmény is, hiszen amit fejlesztek az azonnal megjelenik. Átírok egy karaktert, egy gomb pirosról kékre változik és így tovább.

Amit még hangsúlyozni szoktam, hogy fontos a részletekre való odafigyelés. A frontend fejlesztés egy nagyon széles terület, a jó eredményhez sok-sok tapasztalat kombinációjára van szükség. Annak, hogy egy gomb milyen messze van a másiktól, pontos okai vannak. Ha egy kicsit is elcsúszik, akkor az már nem ugyanazt a felhasználói élményt nyújtja. A felület valószínűleg így is használható lesz, de lehet, hogy pont ez hajtja majd a konkurenciához a felhasználókat.

Éppen ezért fontos a precíz implementáció, hogy a végeredmény pontosan olyan legyen, mint amit a grafikus megtervezett. Ha ő szakmailag úgy látja, hogy ez a felépítés lesz a legjobb a felhasználóknak, akkor én mindenkitől azt várom el, hogy valóban pontosan ott legyenek az egyes elemek, a gombok, a szöveg ugyanolyan méretű legyen, még a betűk közötti távolság is tizedre pontosan ugyanolyan legyen, mint amit a grafikusok megálmodtak. A részletekre való odafigyelés éppen ezért nagyon fontos.

A programozáshoz emellett analitikus gondolkodásra van szükség. Ezt lassan már klisé és mindenki ezt mondja, de tényleg igaz. Némiképp összefügg a részletekre való odafigyeléssel. Van egy nagyon absztrakt fogalom: a mintaillesztési képesség. Mit jelent ez?

Tegyük fel, hogy van két azonos fotó, de a fényképész elrejtett rajtuk néhány különbséget – ezt ismerjük, vannak ilyen rejtvények. Aki nagyon gyorsan fel tudja fedezni a különbségeket, az képes arra, hogy a részleteket jól átlássa. Ezt ki kell hangsúlyoznom, hogy ez az én véleményen, nincs erről sehol semmilyen tudományos cikk. Viszont nekem az a tapasztalatom, hogy az analitikus gondolkodás és a részletek iránti figyelem egymást erősítik. 

A frontend technológiák emellett nagyfokú türelmet is kívánnak. Ennek történelmi okai is vannak. A programozási nyelveket egészen 1991-től fejlesztik és volt néhány úgymond „sötét időszak”, amikor napi szintűek voltak a viták azon, hogy melyik böngésző hogyan jeleníti meg ugyanazt a programkódot, ugyanazt a felépítést.

Szerencsére ezek már kisimultak, de azt gondolom, a szakma nem lett teljesen mentes a hasonló vitáktól. Türelem tehát mindenképp kell. És ahogy korábban említettem, elhivatottságra is szükség van. Én azokkal a fejlesztőkkel tudtam eddig jól együtt dolgozni, és azok a fejlesztők raktak le az asztalra kiváló munkákat, akik hivatásnak tekintették a munkát.

A lelkünket is bele kell vinni valamennyire, de ezt meghálálja. Az eredmény azonnal látszik, azonnal kapunk a visszajelzést, hogy valami jó vagy nem. Emellett indirekt módon is kapunk visszacsatolást, amikor a felhasználók elé kerül a fejlesztés és azt látjuk, hogy valóban úgy használják a felületet, ahogy azt mi megterveztük – ez is pozitív visszajelzés. Itt kicsit most átkalandoztam a felülettervezéshez is – ami mindig is érdekelt, csak lusta vagyok megtanulni.

Számomra nagyon hálás feladat, amikor azt látom, hogy a felület, amit megalkottunk, a lehető legkényelmesebb a használói számára és mindenféle magyarázat nélkül azt és úgy csinálják, amit mi elképzeltünk. Ez igazán jó élmény. Ugyanez a közvetlen visszajelzés egy backend fejlesztőnél nincs meg, hiszen ő nem emberekkel áll kapcsolatban, hanem az adatbázissal, a frontenddel – ott nincs ilyen közvetlen pozitív visszacsatolás.

Mindig külön említed a back- és frontend fejlesztőket, de van rá példa, hogy valaki mindkettőt csinálja?

Igen, ha felkeressük bármelyik álláskereső portált, akkor találunk backend fejlesztő állásokat, frontend fejlesztő állásokat és full stack fejlesztő pozíciókat. Ez utóbbi azt jelenti, hogy mindkét területhez, a back- és frontendhez is ért. Én ezt annyival árnyalnám – ami megint klisé – hogy aki mindenhez ért, az igazából semmihez sem ért. Maga a frontend és a backend is önmagában olyan széles témakör és olyan bonyolult technológiákat foglal magába, amit meglehetősen nehéz valóban professzionális módon elsajátítani. Nagyon ritka és kivételesen tehetséges az, aki tényleg mindkét területhez ért.

Miért keresnek a cégek mégis full stack fejlesztőket?

Ha nagyon prózai okot akarok mondani, akkor azért, mert olcsóbb egy embert felvenni, mint külön back- és frontend fejlesztőt is. Ugyanakkor azt is látom, hogy a modern fejlesztői csapatokban úgynevezett cross functional, azaz keresztfunkciós teameket építenek fel. Ennek az a lényege, hogy a csapatban dolgozik néhány UX-es, van front- és backendes és van datás meg tesztelő. Ez öt terület és nagyjából 7-8 főig tud jól működni egy ilyen csapat. A lényeg az, hogy ha mindegyikből próbálsz egyet-egyet felvenni, akkor a helyettesítés nehezen lesz megoldható. Nem lehet azonban mindenkit megduplázni, mert akkor meg túl nagy lenne a csapat.

Ezért, ha mondjuk a csapatban van három full stackes, akkor ők júl tudják egymást helyettesíteni, belelátnak egymás munkájába. Én is ezt az elvet képviselem a csapatomon belül. Ha valakinek csak egy területen van gyakorlata, akkor az első feladat, hogy „felhúzzuk” őt a többiből is – ne legyen olyan, hogy egy területhez csak egy ember ért. A full stackesek esetében én azt látom, hogy emberileg nagyon sok energiát igényel, hogy valaki tényleg értsen a teljes területhez.

Viszont, ha valaki eléri ezt a szintet, akkor válogathat az ajánlatok közül?

Válogathatna, ha akarna. Alapvetően vannak back- és frontendes állások és vannak full stackes állások. A full stackes a full stack pozíciókat fogja megpályázni, mivel amelyik oldallal nem foglalkozol eleget, az a tudás el fog kopni. Vagyi ha egy jó full stackes elkezd backendezni, akkor néhány év múlva már nem lesz jó full stackes. A technológia annyira gyorsan fejlődik, hogy egyszerűen, aki kimarad, az lemarad. A full stackesek tehát leginkább úgy keresnek pozíciót, hogy minden terület érintett legyen. Ugyanakkor nyilvánvalóan ehhez egy magasabb bérezés is tartozik.

Még egy kérdés van, amit ma mindenképp fel kell tenni: az AI megjelenésével sokan azt vizionálják, hogy a programozók, fejlesztők kiválthatók lesznek. Ez persze nincs így, de fejtsük ki kicsit, hogy miért nem kell ettől tartani.

Az, aki ismeri, hogy hogyan működnek a mai AI megoldások, az azonnal tudja a választ. Igyekszem nagyon egyszerűen megfogalmazni, még akkor is, ha ezzel kiváltom a szakmai haragját: a mobilodon vagy egy billentyűzet, ami egy ún. szövegpredikcióval működik. Beírsz néhány betűt, amiből megpróbálja kitalálni, hogy mi is lehet a következő szó. Ennek többféle alapja lehet.

Az egyik az, hogy mi a leggyakrabban használt szó a szótárban. De tudja azt is alapul venni, hogy te milyen szavakat használsz leggyakrabban vagy, hogy mi szerepel a szó előtt, amit elkezdtél írni – kvázi kontextust ad neki. Most képzeld azt el, hogy az AI (nagyon leegyszerűsítve persze) megnézi az előző háromezer szót, és anélkül, hogy egy betűt is beütnél megpróbálja kitalálni ez alapján, hogy mit is akarsz írni.

Ez gyakorlatilag egy predikciós rendszer, viszont ez önmagában nem intelligencia. Itt még nincs gondolkodás, csupán a múltbéli tapasztalatokból derivál valamit. Ez nem gondolkodás, ez statisztika – és ez az a pont, ahol kihívom magam ellen az AI fejlesztők haragját...

De az intelligencia sokkal több ennél, és ennek még csak a felszínét sem kapargatjuk. A következő szint az lesz, amikor képesek leszünk olyan algoritmusokat létrehozni, amik elérik az emberi gondolkodás szintjét. Ez szerintem még ötven évig nem valószínű. Miért gondolom ezt? A tavalyi nagy hype, a ChatGPT alapjait azaz, hogy létezhet gépi tanulás, nagyjából 1985-ben rakták le. Aztán eltelt 37 év, mire ebből a publikum által fogyasztható eredmény lett. Azt pedig még el sem kezdtük, hogy a ténylegesen az emberi gondolkodást megvalósító gépet alkossunk.