Angular, a modern webfejlesztő keretrendszere – Mi ez és miért érdemes tanulni?

Ha hosszútávú karrieredet a programozás világában képzeled el, előbb vagy utóbb biztosan szembe jön veled az Angular kifejezés. Amikor már azt hitted volna, hogy érted a különbséget a Java és a Javascript közt, hogy pontosan tudod mit jelent a CSS és hogy képes vagy összeütni egy laza HTML alapú weboldalt, akkor jön a Google és fenekestől felforgatja az eddig megszerzett tudásod és kezdheted elölről a tanulást valami újjal. A jó hírünk, hogy az egész rendszer alapja HTML, Javascript és TypeScript, amiket, ha már ismersz, könnyen elsajátíthatod az Angular használatát is.

Mi az az Angular?

Röviden összefoglalva az Angular egy teljesen nyílt forráskódú, TypeScript alapú keretrendszer, amit a Google fejlesztett ki és jelenleg is a Google Team vezeti. Elsősorban frontend oldali fejlesztéshez, összetett webes alkalmazásokhoz találták ki. 2010-ben jelent meg először, ekkor még Angular JS néven, de ma már, ha azt halljuk, hogy Angular, akkor alapértelmezetten Angular 2+ verziókra kell gondolni. Érdekesség egyébként, hogy az Angular JS és az Angular 2 megjelenése között csaknem 4 év telt el, azóta viszont már Angular 15 is létezik – bár erre még novemberig várni kell.

Miért szeretünk Angularban programozni?

Amikor egy programozó megbízást kap egy weboldal vagy webapplikáció elkészítésére, a kapott információk és igények alapján rendszerint elkezdi megtervezni a kód struktúráját. Alapszabály, hogy véletlenül sem szabad nekiesni egyből, hacsak az ember nem laptoppal a kezében születik és már 4 évesen lefejlesztette a Hangman-t vagy a Tic Tac Toe-t. (A programozóképző intézményekben mindkét játék az első projektek között szokott szerepelni.)

Az első verzió átadásáig általában zökkenőmentesen szokott zajlani a kódolás, azonban az esetek 90%-ában az ügyfél vagy meggondolja magát egy bizonyos funkciót illetően, vagy plusz elemeket kér, rosszabb esetben pedig teljesen átvariáltatja az egészet. Ilyenkor szokott a programozó fejfájást kapni, mert amit kiválóan felépített az elején, az nem biztos, hogy a módosítások után is ugyanolyan jól fog működni. Ekkor szoktak jönni a mindenféle kényszermegoldások és a rondábbnál rondább kódok, csak, hogy ne kelljen elölről kezdeni az egészet.

Az Angular keretrendszer egyik legnagyobb előnye ezzel szemben az, hogy viszonylag kötött felépítéséből adódóan a kódolás meghatározott keretek között zajlik és ebből adódóan kevesebbet enged hibázni.

Fő alkotóelemei a komponensek és a modulok. A komponensek lesznek azok az elemek, amik a végfelhasználó számára láthatóak és gyakran újra felhasználhatóak (például a fejléc és a lábléc rendszerint minden oldalon ugyanaz). A modulok pedig csoportosítják az összetartozó komponenseket és deklarálják, hogy mely komponenseket használhatnak fel más modulok. Úgy képzeld el, mint egy irodaházat. A modulok lesznek az egyes osztályok (például pénzügyi, marketing, HR stb.) a komponensek pedig az egyes irodahelyiségek. De komponens lehet például a közös használatú konyha vagy a recepció is.

Az elszeparálásból adódóan, ha az egyik elemben módosítani kell, az nem lesz olyan hatással egy másik elemre, ami teljesen hazavágná a működést. Egy nagyobb vállalatnál, ahol több programozó dolgozik egy megbízáson ráadásul standard eljárás, hogy az egyes funkciókat különböző szakemberek csinálják. Angularban ennek a felosztása még egyszerűbben lehetséges, hiszen az egyik komponens nem lesz hatással a másikra, amíg azokat össze nem rendelik, egymásba nem ágyazzák. Az Angular tehát kiválóan biztosítja a struktúra felépítését a legösszetettebb alkalmazások esetében is.

További előnye, hogy felismeri és figyelmeztet olyan típushibákra, amelyek egyébként észrevétlenek maradnának és hogy vannak olyan beépített funkciói, amelyekkel könnyebben és gyorsabban találhatunk megoldást egy-egy problémára. Ilyen például az Angular Material, ami kezdő fejlesztőknek a lehetőségek tárházát biztosítja.

Az Angular Material előnyei

Az Angular Material egy User Interface könyvtár, ami lehetővé teszi az Angular alapú projektek felhasználói felületének gyorsabb és elegánsabb lefejlesztését. Segítségével az egyszerűbb elemektől kezdve, mint például a Date Picker, Input, vagy Button, egészen extra funkciókat is könnyen be lehet építeni a weboldalba, mint például a Dark/Light mode, vagy a Formok.

Az Angular Material beépített reszponzív dizájnnal is rendelkezik, ezáltal az ilyen módon elkészített weboldalak automatikusan átméretezik magukat az egyes kijelzőknek megfelelően. Színvilágát és dizájnját tekintve alapértelmezetten egységes, letisztult árnyalatokat alkalmaz, de van lehetőség önálló színskála létrehozására is. Egy egyszerű bemutatkozó, vagy landing oldal létrehozásához gyakorlatilag minden elemet készen biztosít, így nem szükséges, sőt akár felesleges is lenne újra feltalálni a spanyolviaszt.

Fontos viszont tudni azt, hogy az ilyen módon elkészített weboldal dizájnja a legkevésbé sem lesz egyedi és hogy akkor fog gördülékenyen, hatékonyan működni és egységesen kinézni az oldal, ha az Angular Material és nem Material elemek és színek egymással kompatibilisek.

Az Angular keretrendszer ismerete és magabiztos használata jelentősen növeli az esélyeidet a munkaerőpiacon. Az ilyen módon fejlesztett alkalmazások egyre keresettebbek (még a Netflix frontend felülete is ebben készült) és ha megtanulod, azt sugallod leendő munkaadóid felé, hogy naprakész vagy és nyitott az új technológiák elsajátítására.

Az Angular keretrendszerrel elsősorban Webfejlesztő és Junior frontend fejlesztő képzésünk során találkozhatsz.