2022.08.30.

Mi az a Clean Code és hogyan használjuk a gyakorlatban?

mi-az-a-clean-code-es-hogyan-hasznaljuk-a-gyakorlatban

Nem csak a számítógép értelmezi azt a kódot, amit írunk, hanem valódi, élő emberek is! Elsősorba mi magunk. Ha olyan kódot írsz, amit írás közben is alig tudsz követni, később képtelen leszel az egészet megérteni. A Clean Code fejlesztési stílus lényege a komplexitás kiküszöbölése, vagy legalábbis annak csökkentésére tett kísérlet.

Összegyűjtöttem azokat a fontos szempontokat, amik jellemzik a tiszta kódot és érdemes bármilyen kódolási munka során észben tartani.

Ha nemrég kezdtél el programozást tanulni, akkor mindenképp érdemes a következőket megfontolnod, mert segít megérteni mi is történik valójában.

Hogyan írjunk tiszta kódot?

A következő módszerekkel biztosíthatod, hogy a kódod tiszta, könnyen értelmezhető és jól olvasható legyen.

1. Általános konvenciók

Bármilyen kódolási nyelvre igaz, hogy érdemes leíró és egyértelmű neveket választani. Az elnevezéseknek utalniuk kell arra, hogy mit csinálnak, vagy mit tartalmaznak. Akkor jó a választott név, ha nem enged meg más értelmezést, és az olvasót csak egyetlen lehetséges következtetésre vezeti. Így a dolgok áttekinthetőek maradnak, és 1000 sorral lejjebb is pontosan tudod, hogy mivel dolgozol. Ezen kívül legyél következetes, ha valamit egy bizonyos módon csinálsz, csinálj minden hasonló dolgot ugyanúgy.

// Dirty
let d; // eltelt idő napokban

// Clean 
let daysSinceCreation;
let daysSinceUpdate;
let ageInDays;
let elapsedDays;

2. Kommentelés

Kommentelni akkor kell, ha a kódrészlet megértéséhez további információkra van szükség. Ha az elnevezések egyértelműek, nincsen szükség kommentekre, nem kell külön megmagyarázni mit csinál, vagy tárol a kód (fenti példa). Összetettebb esetekben leírhatjuk, hogy mit csinál egy függvény, vagy emlékeztethetjük magunkat, hogy bizonyos dolgoknak miért kell egy bizonyos sorrendben történniük. A túl sok kommentelésnek ellenkező hatása lehet, és valójában rendezetlenebbé teszi a kódot, tehát csak oda írj kommentet, ahova feltétlenül szükséges. Általában, ha sok komment kell egy kódba, akkor az nem “Clean”.

3. Szerkezeti tagolás

Minden programozási nyelvnek van egy szintaxisa, ami meghatározza az adott nyelv szerkezetét, szabályait, használt szimbólumkészletét, ezekből tevődik össze maga a forráskód. Ahhoz, hogy ez a kód átlátható és könnyen értelmezhető legyen, a programot fel kell bontani programegységekre. A programkód felülről lefelé kerül végrehajtásara, ezért is fontos, hogy melyik utasítás után melyik következik.

Az egyes programegységeket érdemes csoportosítani a betöltött funkció szerint. A változó deklarációkat például érdemes a program tetején megadni, majd az eljárásokat, függvényeket valahol lejjebb. A fő program végrehajtása a legtöbb esetben a kód végén helyezkedik el.

// változók, típusok definiálása
var start = 200;
var end = 400;

// eljárások, függvények
function get_difference(x, y) {
    return Math.abs(x - y);
}

// művelet végzés
var difference = get_difference(start, end);

// kiíratás
document.getElementById('difference').innerHTML = "Távolság: " + difference;

4. A whitespace a kódban

Az egyik legkönnyebb módja a kód vizuális tagolásának, ha whitespacet használunk a szerkeszti egységek elválasztására. Még az olyan nyelvekben is, ahol fontos a forráskód fájlmérete (pl JavaScript), érdemes üres sorokkal és spacekkel tagolni a kódot. Az optimalizáló szoftverek majd kivágják a kódból az üres helyet, így a fájlméret ettől nem fog nőni.

5. Mire gondolt a költő?

Fontos, hogy ne legyen/maradjon a kódban félrevezető változó, eljárás, vagy bármi, ami nem azt csinálja, amit leírsz vele. Ez elég egyértelműen hangzik, de könnyen elfelejthető. Gyakran előfordul, hogy mire a program végére érünk, valamit az elején meg kell változtatni. Így végül benne maradnak a kódban olyan függvények, vagy utasítások, amik félrevezetőek lehetnek. Például más a neve, mint amit valójában csinál.

Az utasításoknál, függvényeknél igyekezz igéket használni, vagy olyan kifejezéseket, amik valamilyen akcióra utalnak, esetleg válaszolnak valamilyen kérdésre. Például:

  • getAmount
  • calcSubTotal
  • executePayment
  • isSuccessful
  • fetchCustomerData
// Dirty
function arraysumbyid(p1, p2) {
    return p1 * p2;
}

// Clean 
function calcTotalPrice(qty, price) {
    return qty * price;
}

6. Töröld, ami nem kell

Csak akkor érdemes bevezetni további funkciókat a kódba, ha az valóban szükséges. Valójában ez az agilis szoftverfejlesztési módszer lényege is. Ahelyett, hogy a fejlesztés során egy átfogó koncepcióból indulnánk ki, kis lépésekben programozunk, így dinamikusan és egyedileg tudunk reagálni a felmerülő igényekre. Ezáltal nem kerül a kódba olyan utasítás, vagy eljárás, ami valójában soha nem lesz felhasználva.

7. Ne ismételd magad

A duplikált kódsorok nem csak nehezebben olvashatók, de a hibázás esélyét is növelik. A bugok és a rossz működés leggyakoribb oka a kódismétlés. A logikában bekövetkező változások esetében több helyen is változtatni kell a kódban, de már nem fogsz emlékezni arra, hogy ezt pontosan hány helyen kell megtenni.

8. Ésszerű funkcionalitás

A kilométeres függvénydefiníciók könnyen zsúfolttá teszik a kódot. Érdemes megnézni, hogy a kód mit is csinál valójában. Ha egy függvény többet csinál, mint amit a neve sugall, akkor a felesleges funkciók egy részét ki lehet osztani egy másik függvénybe.

Az eljárások utasításait úgy kell megírni, hogy ne legyenek “mellékhatásai”, tehát ne okozzanak a hatáskörükön kívül változásokat a programban.

Rövid, maximum 5-20 soros függvényeket érdemes írni maximum 150 karakteres sorokkal, így az egész függvény látszódni fog a képernyőn.

9. Mágikus értékek

Ezek olyan értékek, amelyek “varázslatos módon” jelennek meg a kódban. Van valamilyen jelentésük, de senki sem tudja megmondani micsoda, mert csak számok, vagy sztringek. Az egyértelműség és a könnyű javíthatóság érdekében érdemes ezekhez is változót rendelni, így körül lehet írni, hogy micsoda és könnyen módosítható.

// Dirty
if (val >= 65) {
    console.log('Kedvezmény');
}

// Clean
const nyugdijkorhatar = 65;
if (val >= nyugdijkorhatar) {
    console.log('Kedvezmény');
}

10. Újrafelhasználhatóság

Egyes funkciók, vagy igények sok esetben újra és újra előkerülnek. Ha már megírtunk korábban egy funkciót, azt több helyen is újra felhasználhatjuk. Az objektum orientált programozási nyelvek egyik legvonzóbb tulajdonsága a kód hatékony újrafelhasználásának lehetősége.

Ha többet szeretnél megtudni a Clean Code elvről, olvasd el Robert C. Martin – Tiszta Kód című könyvét.

Milyen előnyei vannak egy tiszta kódnak?

Az egyik legnagyobb probléma a weboldalkészítés piacán, hogy nem sokan törődnek a tiszta kóddal. Azokat, akik oldalépítőkkel dolgoznak teljesen hidegen hagyja a weboldal kódja, pedig a teljesítményt nagymértékben befolyásolja, hogy a forrás milyen minőségű kódból áll össze. Sok esetben még a fejlesztőket sem érdekli, mondván soha senki nem fogja megnézni, az ügyfél pedig nem fizeti ki az esetleges többlet munkát. Mert igen, a Clean Code előállítása több időbe telik, mint gyorsan összedobni valamit, ami kb működik. A tapasztalat sajnos azt mutatja, hogy nem valószínű, hogy később lesz időd rendbe hozni a kódminőséget, tehát érdemes már elsőre jól megírni, mert:

  • a kódmódosításokat egyszerűen el lehet végezni
  • kevesebb a hibalehetőség
  • csapatmunkánál elengedetlen, hogy más is megértse mi volt az eredeti elképzelés
  • a kevesebb kód gyorsabb, ezáltal nő a teljesítmény
  • a jól megírt modulokat, komponenseket később más projektekben is felhasználhatod

A szempontok mellett érdemes arra is törekedni, hogy megtaláld a saját stílusodat és a saját módszereidet a dolgok megvalósítására. A tiszta kódolás nem olyan készség, amit egyik napról a másikra el lehet sajátítani, de ha szem előtt tartod ezeket az elveket, idővel kifog alakulni.

Akiket már több éve mentorálok, gyakran megemlítik, hogy már fele annyi kódból megoldják azt, amit korábban kétszer annyiból. Ez egyértelműen annak a jele, hogy sokkal jobban értik a kódolás komplexitását, és hatékonyabban tudják megoldani a problémákat.



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.