UI komponente u web developmentu

Komponente korisničkog sučelja (UI komponente) srž su modernog web razvoja. Ovaj pojam možda zvuči pomalo otmjeno, ali zapravo označava gradivne blokove korisničkog sučelja vaše web aplikacije. U ovom članku razjasnit ćemo UI komponente – objasnit ćemo što one zapravo predstavljaju, zašto su važne i kako se primjenjuju u popularnim frameworkovima poput Reacta, Next.js-a i Laravela. Koristit ćemo analogije iz stvarnog svijeta (zamislite LEGO kockice) i pokazati primjere koda u Reactu i Laravel Blade-u. Do kraja članka vidjet ćete kako komponente donose ponovnu upotrebljivost, skalabilnost i dosljednost u vaše projekte. Krenimo!

Što su UI komponente?

U svijetu web razvoja, UI komponenta je samostalni, višekratno upotrebljivi dio sučelja – zamislite elemente poput gumba, zaglavlja stranice, podnožja (footera) ili okvira za komentar. Svaka je komponenta zasebna cjelina korisničkog sučelja (markup, stilovi i logika) koju možete izgraditi i testirati odvojeno od ostatka sustava. Zapravo, „komponente vam omogućuju da podijelite korisničko sučelje na neovisne, ponovno upotrebljive dijelove” te da se usredotočite na svaki dio zasebno bez brige o cijeloj stranici​

legacy.reactjs.org. Sjajna analogija su LEGO kockice: aplikaciju gradite slažući mnoštvo malih, standardiziranih dijelova. Kao što objašnjava dokumentacija Next.js-a, korisnička sučelja možemo razložiti na manje gradivne blokove zvane komponente – poput LEGO kockica koje možemo kombinirati u veće strukture​

nextjs.org. Ako trebate izmijeniti jedan dio sučelja, jednostavno zamijenite ili ažurirate odgovarajuću komponentu (baš kao kad zamijenite pojedinu LEGO kockicu) umjesto da ponovno sastavljate čitavu stranicu​

nextjs.org. U praksi, to znači da biste mogli imati komponentu NavBar (navigacijska traka), komponentu Footer (podnožje stranice), komponentu Button (gumb) itd. – pri čemu je svaka zadužena za jedan određeni dio sučelja. Te komponente možete ponovo koristiti gdje god zatrebaju u vašoj aplikaciji, što nas dovodi do toga zašto su toliko važne.

Zašto su UI komponente važne?

UI komponente nisu samo zgodan koncept – one rješavaju konkretne probleme u razvoju weba. Bez komponenti, vjerojatno biste morali puno ponavljati isti kod za zajedničke elemente na različitim stranicama. (Primjerice, kopirati isti HTML kôd navigacijske trake na svaku stranicu svog sajta.) Takav pristup vodi do grešaka i teško održivog koda. Jedan je autor primijetio da ponavljanje istog HTML-a za uobičajene elemente sučelja na više stranica otežava održavanje koda i povećava šanse za greške i nedosljednosti​

medium.com. Drugim riječima, dupliranje dijelova sučelja krši princip DRY (“Don’t Repeat Yourself” – ne ponavljaj se).

Komponente rješavaju ovaj problem pristupom „napiši kôd jednom, iskoristi ga svugdje”. Definirate HTML/JSX za neku komponentu jednom, a zatim tu komponentu možete uključiti na bilo koju stranicu ili u bilo koju funkcionalnost gdje je potrebna. Ako trebate ažurirati izgled ili ponašanje tog elementa, ažurirate kôd komponente na jednom mjestu i ta se promjena odrazi svugdje gdje se komponenta koristi. To uvelike pojednostavljuje održavanje aplikacije kako raste.

Evo ključnih prednosti korištenja UI komponenti:

• Ponovna upotreba (reusability): Izradite neki element sučelja jednom i ponovno ga upotrijebite na više mjesta. Ne morate izmišljati toplu vodu za svaku stranicu. Time štedite vrijeme i smanjujete mogućnost bugova, budući da postoji samo jedno izvorište istine za taj element​jump24.co.uk.
• Konzistentnost: Korištenjem iste komponente posvuda, izgled i ponašanje vaše aplikacije ostaju ujednačeni. Na primjer, ako svi gumbi dolaze iz zajedničke komponente Button, svi će izgledati i reagirati isto. To korisniku daje konzistentno iskustvo, a programerima čini kod predvidljivijim za održavanje​jump24.co.uk.
• Skalabilnost: Arhitektura temeljena na komponentama olakšava širenje i održavanje kôda kako projekt postaje sve veći. Budući da je svaki dio izdvojen, možete dodavati ili mijenjati komponente bez straha da ćete “razbiti” ostatak sustava. Ovakva modularnost čini kôd lakšim za održavanje tijekom rasta aplikacije​nextjs.org. U velikim projektima timovi čak mogu paralelno raditi na različitim komponentama, što ubrzava razvoj.

Ukratko, UI komponente pomažu vam graditi aplikacije koje je lakše održavati i nadograđivati, a ujedno osiguravaju da sve izgleda i funkcionira dosljedno kroz cijeli projekt.

UI komponente u Reactu i Next.js-u

Sad kad znamo što su komponente i zašto su korisne, pogledajmo kako to izgleda u praksi na konkretnim primjerima. Uzet ćemo React i Next.js kao ilustraciju. React je popularna JavaScript biblioteka za izradu korisničkih sučelja koja od samog početka koristi pristup temeljen na komponentama. U Reactu zapravo čitavo sučelje gradite pomoću komponenti. Kreirate male komponente (često kao JavaScript funkcije koje vraćaju JSX) i kombinirate ih u veće cjeline. Gumb, obrazac (form) ili čak čitava stranica u React aplikaciji obično su definirani kao komponente​

legacy.reactjs.org.

Next.js je framework izgrađen na Reactu koji dodaje značajke poput server-side renderinga i naprednog routinga. Budući da Next.js koristi React “ispod haube”, način na koji pišete komponente u Next.js-u isti je kao u čistom Reactu. (U Next.js aplikaciji, svaka stranica je u suštini React komponenta, a možete izraditi i vlastite zajedničke komponente koje ćete smjestiti u direktorij /components i koristiti ih na različitim stranicama.) Dakle, glavna ideja je: ako znate raditi s komponentama u Reactu, isto ćete raditi i u Next.js-u.

Pogledajmo jednostavan primjer React komponente. Pretpostavimo da želimo napraviti komponentu Alert koja prikazuje poruku korisniku (i možda ima različit stil za “uspjeh” ili “grešku”). U Reactu bi to moglo izgledati ovako:

Ovdje je Alert višekratno upotrebljiva komponenta. Prosljeđujemo joj prop type kako bismo naznačili vrstu poruke (“success” za uspjeh ili “error” za grešku), a poruku prosljeđujemo kao djecu (sadržaj unutar oznaka <Alert> ... </Alert>). Komponenta renderira <div> s CSS klasama koje odgovaraju tipu i prikazuje sadržaj unutar sebe ({children}). Zatim u komponenti App koristimo <Alert> dvaput s različitim propovima. Ovo je mnogo čišće nego da smo ručno pisali dva <div class="alert alert-success">... i <div class="alert alert-error">... bloka za svaku poruku. Ako trebamo promijeniti stil ili strukturu svih alert poruka, možemo ažurirati samo kod unutar komponente Alert, i ta će promjena automatski utjecati na sve instance te komponente u aplikaciji.

U Next.js aplikaciji napravili bismo isto. Mogli bismo kreirati datoteku components/Alert.js s gore navedenim kodom i zatim uvoziti i koristiti <Alert> unutar Next.js stranica. Next.js ne zahtijeva nikakvu posebnu sintaksu za komponente – one su obične React komponente. Ovo pokazuje kako koncept komponenti ostaje konzistentan kroz različite frameworke.

UI komponente u Laravelu (Blade i Livewire)

Filozofija komponenti nije ograničena samo na JavaScript front-end frameworke. Laravel, popularni PHP web framework, također primjenjuje pristup komponenti u svom templating sustavu zvanom Blade. Blade komponente omogućuju vam da pakirate HTML kôd (i opcijski PHP logiku) u višekratno upotrebljive cjeline, vrlo slično React komponentama, ali na serverskoj strani. Prema Laravel dokumentaciji, Blade komponente „omogućuju stvaranje novih prilagođenih, višekratno upotrebljivih i inkapsuliranih dijelova PHP i HTML koda”​

dev.to koje možete uključivati u svoje Blade predloške kao da su obične HTML oznake.

Primjerice, Laravel nam dopušta da napravimo Blade komponentu za prikaz poruka (alert), slično onome što smo izveli u Reactu. Možemo kreirati datoteku resources/views/components/alert.blade.php sa sljedećim sadržajem:

Ovaj Blade predložak definira Alert komponentu koja prihvaća parametar $type (za stil, npr. “success” ili “error”) i koristi posebnu Blade varijablu $slot kako bi prikazala sav sadržaj koji se unese unutar komponente.

Tu komponentu zatim možemo upotrijebiti u bilo kojem Blade predlošku ovako:

Prilikom renderiranja Laravel aplikacije, ove će se oznake <x-alert> zamijeniti HTML-om iz naše komponente. Dakle, krajnji HTML poslan pregledniku imat će istu strukturu kao i u React primjeru (<div s klasom alert alert-success koji sadrži poruku itd.). Postigli smo ponovnu upotrebu na serverskoj strani: definirali smo markup za alert samo jednom, a iskoristili ga dvaput s različitim sadržajem.

Uočite kako je koncept isti kao u Reactu – razlikuje se samo sintaksa. Prosljeđujemo parametar (type) i neki sadržaj, a komponenta isporučuje formatirani blok HTML-a. Korištenje Blade komponenti osigurava konzistentnost (svaka kutija s porukom izgleda jednako) i štedi nas od ponavljanja koda. Ako želimo promijeniti izgled svih alert poruka, dovoljno je urediti datoteku komponente umjesto svake stranice posebno.

Laravel također ima alat zvan Livewire koji omogućuje izradu dinamičkih, stateful komponenti u Bladeu (tako da mogu reagirati na korisničke akcije bez osvježavanja stranice, slično kao React ali uz PHP). To je izvan dosega ovog članka, no dobro je znati da se filozofija komponenti proteže još dalje u Laravel ekosustavu za interaktivna sučelja.

Zaključak

UI komponente su temeljni koncept koji vam kao developeru može uvelike olakšati život. Time što potiču da razbijete sučelje na logične cjeline, komponente vam omogućuju da svaki dio izgradite odvojeno i ponovno ga koristite kad god je to moguće. Za početnika (junior developera), svladavanje rada s komponentama (bilo u Reactu, Next.js-u, Laravelu ili nekom drugom frameworku) pomoći će vam pisati čišći, održiviji kôd i učinkovitije graditi sučelja.