2020.06.04.

Ki az a frontend fejlesztő és mit kell tudnia?

mit-kell-tudnia-egy-frontend-fejlesztonek

A weboldalkészítésnek több különböző rétege van, például webdesign, programozás, online marketing, stb. A programozási réteget is további részekre lehet bontani. Minden, ami a “motorháztető alatt” történik a backend fejlesztéshez tartozik. A frontend a webfejlesztésnek az a rétege, ami kívülről látszik, amivel a felhasználó találkozik és interakcióba lép. Ennek a része a weboldal vizuális megjelenése, a navigáció, a gombok, a hivatkozások, a különböző felhasználó által kiváltott események, stb.

Mivel foglalkoznak a frontend fejlesztők?

Elsősorban felhasználói felületek készítésével foglalkoznak, a web (UX) designer által megtervezett felületeket valósítják meg HTML, CSS és JavaScript nyelvek segítségével. Ebbe nem csak a honlap tervek tartoznak bele, hanem az alábbi feladatkörök is:

  • felhasználói élmény optimalizálása és testreszabása
  • webalkalmazási felületek módosítása és karbantartása
  • reszponzív tervezés megvalósítása mobil kijelzőkön
  • weboldal kiegészítők fejlesztése
  • Technikai SEO jól bevált gyakorlatainak alkalmazása
  • HTML e-mailek, hírlevelek, bannerek készítése

Kiből lehet frontendes?

A frontend valójában nem tartozik a nehéz programozási feladatkörök közé, viszonylag hamar, akár 1 év alatt (igen, ez hamar) el lehet sajátítani. Honlap készítés terén nincs szükséged masszív programozói tudásra, hiszen nem vállalatirányítási rendszereket fejlesztünk “csak” honlapokat.

Azonban nem lehet bárkiből frontend fejlesztő, mint ahogyan nem lehet mindenkiből művész, autószerelő, balett-táncos sem. Tudom azzal adják el most a képzések 90%-át, hogy bárki lehet bármi, de ki kell, hogy ábrándítsalak, ez nem egy olyan terület, amit bárki képes megtanulni és egy pillanatig sem szeretném ezt sugallani senkinek. Nem, sajnos nem elég hozzá, ha hiszel magadban.

Egy ilyen szakterületbe mint a frontend, azoknak érdemes bele vágni, akik hajlandók és képesek is azt a rengeteg időt beletenni a tanulásba, amire nemcsak a tanfolyamok alatt, hanem utána is szükség van. A rááldozott időn túl pedig elengedhetetlen a logikus gondolkodásmód és az átlagon felüli problémamegoldó képesség, hiszen ezekre nap mint nap szükség van. Bár a frontendben sok a visszatérően megoldandó feladat, sokszor nem egy kikövezett úton kell haladni, hanem neked kell a köveket lerakni és kitalálni a megoldást. Ezért is hívják ezt az egészet “fejlesztésnek”.

Oké, de akkor mégis kinek való ez?

Ahhoz, hogy ezen a területen sikeres lehessen valaki, elsősorban erős alaptudással kell rendelkeznie. Ez az alaptudás főként logikai és matematikai tudást jelent. Ha Te egy “mindig is hülye voltam matekból” ember vagy, akkor valószínűleg nagy nehézségekbe fogsz ütközni. Nem kell nagyon bonyolult dolgokra gondolni, nem kell integrált számolni, sem deriválni, de az alapvető matematikai műveleteket és műveleti szabályokat ismerni kell.

A másik nagyon fontos dolog az informatikai alaptudás. Röviden, ne legyél digitális analfabéta. Magabiztosan el kell boldogulnod az interneten, tudnod kell hogyan működnek a webböngészők. Az sem árt, ha minimálisan ismered a webdesign alapjait és a vizuális elemek funkcióit. Nem kell designernek, sem grafikusnak lenned, de át kell látnod a grafikai terveket, hogy azokat egységekre tudd bontani. Mielőtt belevág valaki a weboldalak kódolásába, legalább belépő szinten érteni kell a népszerűbb grafikus tervezőeszközökhöz, amelyekkel a grafikai tervek készülnek. Például Sketch, Figma, Adobe XD, vagy Illusztrátor. Ha a fenti alapismeretek birtokában vagy, akkor elsajátíthatod a webfejlesztés alapjait.

Milyen technológiákat kell ismerned?

A front-end fejlesztők elsősorban az alábbi három kódolási nyelvet használják munkájuk során, mikor weboldalakat és webalapú alkalmazásokat fejlesztenek:

  • HTML
  • CSS
  • JavaScript

HTML/CSS

Legelőször meg kell ismerkedned a weboldalak alkotóelemeivel és azok formázási lehetőségeivel. A webfejlesztés alapja a HTML, ez határozza meg weboldalak strukturális felépítését, ezzel kell legelőször megismerkedned. A weboldalon látható összes tartalom HTML elemekbe tartozik. Meg kell ismerned a különböző layout technológiákat, a mobilbarát kialakítás mikéntjét, és hogy hogyan tudsz stílust adni az egyes elemeknek. A jó hír az, hogy ezek az alapok mindössze néhány hét alatt el sajátíthatók.

JavaScript

A weboldalak speciális funkcióit és interaktív megoldásait JavaScripttel lehet megvalósítani. A JavaScript – és annak különböző keretrendszerei – dinamikus funkciókat biztosítanak a statikus HTML elemeknek. Ezekkel tudod a felhasználói viselkedésekhez igazítani a megjelenést és a funkciókat. Ez a világ egyik legnépszerűbb programozási nyelve, tehát függetlenül a karrier terveidtől érdemes meg tanulni.

CSS előfeldolgozók

A CSS preprocesszorok (előfeldolgozók) segítenek gyorsabb, hatékonyabb, könnyebben karbantartható kódot írni, és jelentősen csökkenteni a kézzel megírandó CSS mennyiségét. Ilyen előfeldolgozó nyelv például a LESS, a SASS, vagy Stylus. Ezek mindegyike hagyományos CSS-be fordul át, így a böngészőben már CSS-t fájlt fogsz látni, amit a preprocesszor fordítója készít el.

CSS keretrendszerek

A CSS keretrendszerek megkönnyítik a munkát, hiszen előre kialakított (használatra kész) frontend komponenseket kínálnak, amelyeket összepakolva egyszerűen fel lehet építeni egy reszponzív webinterfészt. Továbbá rugalmasak és a könnyű használat mellett rengeteg dokumentáció van hozzájuk. A Bootstrap, a Foundation, és a Bulma a legismertebb keretrendszerek közé tartozik.

JavaScript keretrendszerek

A JavaScript keretrendszerek segítenek a fejlesztőknek abban, hogy gyorsan, előre elkészített megoldásokkal, komponensekkel készíthessenek webinterfészeket. Tehát ezek lényegesen meggyorsítják a munkafolyamatokat, mert nem kell “nulláról” kezdeni a kódolást és strukturáltabbá válik. Különböző típusú JavaScript frameworkok léteznek különböző igényekhez, a legnépszerűbbek a React, az Angular, a Vue és a jQuery.

Reszponzív technológia

A mobil eszközök elterjedésével a weboldalaknak automatikusan igazodnia kell a megjelenítő eszköz felbontásához. A reszponzív technológia tulajdonképpen egy tervezési technika, amelynek célja, hogy a weboldal minden platformon jól használható és optimális vizuális élmény legyen. A fejlesztőknek ismerniük kell a reszponzív kialakítás mikéntjét.

Tartalomkezelő rendszerek és E-kereskedelmi platformok

Manapság már elképzelhetetlen a weboldal készítés valamilyen tartalomkezelő rendszer nélkül. A legnépszerűbbek a WordPress és a Joomla CMS-ek. Érdemes specializálódni valamelyikre és megtanulni a struktúrájához illeszkedő kiegészítőket, sablonokat fejleszteni. A webshopok, e-kereskedelmi megoldások megvalósításához is léteznek előre elkészített kész rendszerek, amiket kimondottan erre a funkcionalitásra fejlesztettek. Érdemes elsajátítanod a WooCommerce, a Magento, a Prestashop, vagy valamelyik népszerű webshop rendszer használatát.

Verziókövető rendszerek

A verziókövető rendszerek lehetővé teszik a programkód változásainak követését, így a webfejlesztési projektben résztvevők látják, milyen módosítások történtek a kódban korábban. Csapatmunka során rendkívül hasznos. A másik nagy előnye, hogy lehetővé teszi, hogy vissza álljunk a projekt egy korábbi változatára, így nagyon hatékonyan lehet kezelni a webfejlesztés egyes fázisait. A legnépszerűbb verziókezelő a Git.



Tetszett a bejegyzés?

Iratkozz fel és küldök Neked E-mail értesítőt, ha ehhez hasonló új cikk kerül fel a blogra.

.
Nekem való?

Maradtak még kérdéseid?

Ha nem vagy biztos benne, hogy ez Neked való, vagy további kérdéseid vannak a kurzusokkal kapcsolatban,
írd meg chaten és 48 órán belül válaszolok!

Kérdezek!

Kövesd közösségi csatornáinkat is!

Beavatlak a frontend fejlesztői munka rejtelmeibe, mesélek a szabadúszáról, mutatok hasznos kódrészeleteket és engem is jobban megismerhetsz.