Mi kell ahhoz, hogy front-end fejlesztő lehessek?

A front-end a webfejlesztés azon területe, amely elsősorban a felhasználókkal, user-ekkel kapcsolatban álló felületek leprogramozásáért felelős. A front-end fejlesztő a grafikusoktól kapott design tervekből HTML, CSS és Javascript programozási nyelvek segítségével egy kattintható, működőképes felületet alkot.

Ha felmész egy weboldalra, akkor az, amit a böngésződben látsz, mind a front-end fejlesztő munkája: a reszponzív működés, a navigáció, a nyomógombok, a menüpontok … stb.

Ha szimpatikus számodra a webfejlesztés ezen ága, akkor olvass tovább, mert alábbi cikkemben minden fontos tudnivalót megpróbáltam összeszedni róla.

Milyen képességekkel rendelkezik egy front-end fejlesztő?

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

• HTML
• CSS
• Javascript

Az általuk fejlesztett kód, nevezhetjük programnak is, a felhasználó böngészőjében fut le. A webfejlesztés területek többségében tulajdonképpen a közös pontot maga a futtató platform, vagyis a böngésző program jelenti.

Nézzük ezt a három nyelvet illetve a kapcsolódó kompetenciákat egy kicsit részletesebben:

HTML / CSS

A HTML (Hyper Text Markup Language) és a CSS (Cascading Style Sheets) a front-en fejlesztés két alapnyelve. Nélkülük nem léteznének weboldalak, nem tudnál egy egyszerű szöveget sem megformázni vagy akár képet beszúrni egy oldalba.

Mielőtt front-end fejlesztőnek állsz, az első, hogy a HTML és a CSS nyelvet a lehető legmagasabb szinten elsajátítsd. A jó hír, hogy ezek nem bonyolult nyelvek, néhány napon belül képes leszel egy alap weboldalt összeállítani és pár hónapon belül magas szintet tudsz elérni.

JavaScript

A Javascript rengeteg új izgalmas funkciót képes hozzáadni egy alap HTML weboldalhoz, de még egyszerűbb web alkalmazásokat is össze tudsz rakni segítségével.

Ha nem egy statikus weboldallal találkozol, hanem azt látod, hogy az oldal pár másodpercenként frissül, mozog, interaktív térképet, animált grafikákat, scrollozható tartalmakat jelenít meg, akkor nagy valószínűséggel ezekért mind a Javascript felel.

jQuery

A jQuery az egyik legnépszerűbb Javascript könyvtár, egy olyan plugin-ek és kiegészítők gyűjteménye, amely a Javascript-el történő fejlesztést gyorsabbá és egyszerűbbé teszi. Ahelyett, hogy mindent a nulláról leprogramoznál, a jQuery lehetővé teszi, hogy már kész elemeket gyorsan implementálni tudj weboldaladba, majd utána testre tudd szabni őket.

Javascript keretrendszerek

A Javascript keretrendszerek, mint pl. az AngularJS, Backbone, Ember, ReactJS egy előre meghatározott szervezett struktúrát adnak a Javascript kódhoz. Segítségükkel a kódolás gyorsabbá és strukturáltabbá válik. A különböző igényekhez eltérő Javascript keretrendszer érhető el, de szinte mindegyik korábban felsorolt előfordul a front-end állás pályázatok kiírásai között.

Front-end keretrendszerek

A front-end keretrendszerek élükön az egyik legnépszerűbb Bootstrap-el nagyjából hasonlóképpen épülnek fel, mint a Javascript keretrendszerek és funkciójuk is hasonló: egy programozási nyelvhez olyan struktúrát, eljárásokat, függvényeket rendel hozzá, ami nagyságrendekkel felgyorsítja a programozás folyamatát. Használatuk nélkülözhetetlen egy profi front-end-es munkája során.

CSS preprocesszorok

A CSS preprocesszorok olyan elemeket adnak hozzá az alap stílus leíráshoz, amelynek segítségével a fejlesztők gyorsabban tudnak dolgozni. A CSS preprocesszorok a CSS-t skálázhatóvá, használatát egyszerűbbé teszik. Feldolgozzák a CSS kódodat és egy jól formázott, böngésző független CSS állományt hoznak létre belőle. A SASS és LESS a két legnépszerűbb ilyen preprocesszor. Ismeretük szinte minden front-end webfejlesztő álláshirdetés részét képezik.

Reszponzív technológia

2019-re szinte már minden iparágban többségbe kerültek a mobilról böngésző látogatók aránya az asztali gépet használókhoz képest. A mobil eszközök elterjedésére a reszponzív technológia volt a válasz, ami lehetővé teszi, hogy a weboldal automatikusan igazodjon a megjelenítő készülék felbontásához.

A reszponzív technológia természetesen megfelelő tervezést is igényel, a weboldal desktop grafikai terve mellett tablet és mobil nézet is készül. A front-end fejlesztő feladata pedig ez alapján a reszponzív weboldal lefejlesztése.

Egy front-end webfejlesztővel szemben természetesen alapkövetelmény, hogy ismerje a reszponzívitásra vonatkozó elvárásokat.

Böngésző független fejlesztés

A korábbi évekhez képest sokat fejlődtek a böngészők abban, hogy egységesen jelenítsék meg a weboldalakat. De sajnos még mindig vannak különbségek közöttük és ez nagy valószínűséggel így is marad, tekintettel arra, hogy új front-end technológiák jelennek meg, amelyeket különböző tempóban építik be az egyes gyártók a böngésző programjaikba.

A böngésző független fejlesztést azt jelenti, hogy olyan technológiákat használsz, olyan kódot állítasz elő, amely minden böngészővel kompatibilis és nem lesznek megjelenítési, működésbeli problémák.

A Google Chrome részesedése jelen pillanatban 70% körül van, ezt követi a Safari 10% és a Firefox 10% körüli részesedéssel. Hiába a Chrome a magasan legnépszerűbb böngésző, egy programozó sem engedheti meg magának, hogy az általa fejlesztett weboldalt a látogatók 10%-a ne tudja megfelelően használni.

Tartalomkezelő rendszerek és E-kereskedelmi platformok

Manapság már nem lehet elképzelni weboldalt CMS-nélkül. A CMS-ek vagyis a tartalomkezelő rendszerek segítségével akár egy laikus is képes módosítani a weboldal tartalmát. A CMS-ek lehetővé teszik, hogy pl. egy blog cikk feltöltéséhez ne kelljen webfejlesztő segítségét igénybe venni.

Manapság magasan a WordPress tartalomkezelő rendszer a legnépszerűbb. A világ összes weboldalának kb. 60%-a WordPress-t használ. Így az a front-end fejlesztő, aki weboldalak készítésére szeretne specializálódni, elengedhetetlen, hogy ismerje a WordPress felépítését, működési elvét.

A webshopok, e-kereskedelmi rendszerek piacán is már évekkel ezelőtt megjelentek azok a platformok, amelyeket kimondottan erre a funkcionalitásra fejlesztettek. Ha egy webshop fejlesztő csapatban szeretnél elhelyezkedni, akkor nagy valószínűséggel el kell sajátítanod a Magento, Prestashop, Shopify vagy valamelyik másik népszerű platform használatát.

Tesztelés és hibakeresés

Front-end fejlesztőként nem elégséges, hogy az általad készített program működőképes legyen, de hibamentesen is kell üzemelnie, ráadásul megfelelő választ kell adnia a felhasználók különböző tevékenységeire. Ez utóbbi azt jelenti, hogy fel kell készíteni minden lehetséges műveletre, amit a felhasználó csinál. Legyen az egy adatbevitel vagy valamilyen egyedi megjelenítő eszköz használata.

A tesztelés és hibakeresés egy olyan tevékenység, amelynek során a program működését ellenőrizzük különböző szimulációkon keresztül és amennyiben hibát találunk, akkor azt lokalizáljuk és kijavítjuk.

Az általam leggyakrabban látott front-end hibák a következők:

• pontatlan vagy hiányzó vagy idegen nyelvű hibaüzenetek az űrlapok használata során
• mobilon eltűnő vagy rosszul működő menü
• reszponzív megjelenítési hibák
• túl lassan betöltődő oldal
• egymással összeakadó plugin-ek
• bizonyos böngészőkben hibásan megjelenő oldal

Verzió követő rendszerek

A verzió követő rendszerek lehetővé teszik, hogy a webfejlesztés projektben résztvevők lássák, milyen módosítások történtek a kódban időről-időre. Ezen felül ezek a rendszerek lehetővé teszik egy korábbi állapotra történő visszaállást is.

A verzió követő rendszerek közül a Git a legnépszerűbb. Ha ismered a Git-et, akkor nyugodtan el tudsz helyezkedni egy nagyobb fejlesztő csapatnál is, nem fog gondot okozni a közös munka.

A verzió követő szoftverek illetve a Git sok fejlesztő cégnél megjelenik, mint követelmény az állás kiírásban.

Ha érdekel a webfejlesztés világa, és tanfolyamot keresel a témában, nézz körül képzéseink közt.