OMDB Movie Selector: Js keretrendszerek

Bevezető

Az interjú második körében kaptam egy feladatot, ahol egy film választó kis webes alkalmazást kellett megírnom, minimális hangsúlyt fektetve a kinézetre. Ahhoz, hogy ezt megtudjam valósítani hozzáférésre volt szükségem az OMDB API-jához, ami lényegében egy ingyenes (regisztrációhoz kötött), filmeket tároló adatbázishoz kapcsolódik. Regisztráció után bárki számára elérhető lehet, némi korlátozásokkal, másodpercenként korlátozva van a lekérdezések száma. Vanilla JavaScript-ben írtam meg az alkalmazást, mivel nem voltam annyira magabiztos, hogy válasszak valamilyen keretrendszert ehhez a “problémához”. Ez a döntés így visszagondolva lehet, hogy jó választás volt, hiszen lehetőséget nyitott, hogy kipróbáljam ugyanazt az alkalmazást több keretrendszer segítségével is.

Feladatleírás

A cégnél töltött első pár hetem (lehet, hogy volt az hónap is), azzal töltöttem, hogy megpróbáltam implementálni különböző framework-ök segítségével. Ebben a cikkben a React.js és Vue3.js lesz összehasonlítva egymással, ezen feladat szemszögéből és a saját tapasztalataim alapján.

React.js, Vue.js összehasonlítása

React.js

React.js-sel már foglalkoztam ezelőtt is egy minimálisan, részt vettem egy kurzuson, ahol betekintést nyerhettem ennek világába. Tehát ezzel kezdtem meg az első feladatomat a munkahelyen. Popularitása miatt rengeteg osztály, library, harmadik féltől származó kiegészítő érhető el hozzá, amik lényegesen megkönnyíthetik a fejlesztők dolgát. Abban az esetben, ha gondolsz valamire, amire szükség lenne a fejlesztés során, valószínűleg egy npm vagy yarn telepítéssel megoldható. Illetve ez a felfelé mutató tendencia valószínűleg nem mostanában fog megállni. Az én gondolkodásomhoz a React közelebb áll, mint a Vue, azonban ez lehet csak amiatt, mert ez volt az első keretrendszer amit életemben láttam. Természetesen ezt embere válogatja, kinek mi jön be jobban és abban az irányban szükséges elmozdulni.

Különösebb nehézséget nem okozott ezzel dolgozni. A dokumentációja szerintem nagyon jól követhető, illetve nagyon sok népszerű kiegészítő érhető el majdnem, hogy “out of the box”. Bootstrap-pel nagyon könnyedén működik együtt így viszonylag egyszerűen lehet reszponzív weboldalakat készíteni.

Mivel minden nagyon jól van dokumentálva hozzá, illetve rengeteg kérdés-válasz érhető el online React-hez, ezáltal nem igazán futottam bele komolyabban hibába / nem igazán akadtam el benne.

Vue.js

A Vue.js harmadik verziója, illetve úgy alapvetően sem rendelkezik akkora community-vel, mint a React, ezért mielőtt az ember belevág a fejlesztésbe, szükséges átgondolni mire is van / lehet majd szükség a későbbiekben. Problémáim adódtak a Bootstrap integrációval, habár elméletileg működnie kellene együtt, és működött is egy darabig, de aztán gondolt egyet és nem akarta renderelni az oldalt. Ezután Vuetify-re esett a választás. Ez a kettő amúgy nagyon hasonlít egymáshoz, tehát maga a használat túl sok problémát nem kellene, hogy okozzon. Személyes véleményem, hogy a Vue 3-as verziója csak azért jó, mert nagyon szeretne hasonlítani a React-hez, azonban nekem nem igazán állt rá az agyam a HTML-be írt “for” ciklushoz és hasonló finomságokhoz.

Feature-ök / Hibakezelés

Alapvető szelekciókkal kellett csak jobban foglalkozni, például, ha a felhasználó olyan filmre keres rá ami nem létezik, legalábbis az adatbázisban, akkor jelenjen meg hibaüzenet. Jelenjen meg egy gomb, amivel a felhasználó új filmeket kérhet le, mindaddig, amíg 10 darab érkezik az API-ról egyidőben. Ez a gomb ne jelenjen meg, amint 10-nél kevesebb filmet lehet megjeleníteni. A filmeket fűzze össze, tehát legyen "infinity scroll" szerűség az oldalon.

Kommunikáció / mentorálás

A feladatok során sok segítséget kaptam Petitől és Alextől. Vue irányából Alex tudott segíteni, ő mesélt nekem a Vuetify-ről, illetve közösen próbáltuk meg kitalálni, mi lehet a probléma a Bootstrap-pel. A feladat végén pedig együtt átnéztük mégegyszer a kódot és magával a logikával nem voltak bajok, inkább figyelmetlenségeket csináltam. Például “===” helyett “==” írtam (JavaScript sajátosságok 😀). Peti pedig a React oldalon segített, mivel egy belsős projekt miatt Ő foglalkozott vele mostanában többet. Átbeszéltük a UseEffect hook használatát, amivel végül jóval egyszerűbb kódot tudtam írni, illetve sokkal átláthatóbb lett.

OMDB API React.js Vue.js Vanilla JS OMDB

Olvasnék még ...