Kad otvorite neku web stranicu, vjerojatno ne razmišljate o tome što se sve događa iza kulisa. Kliknete na gumb, upišete svoje podatke, pogledate video ili dodate proizvod u košaricu i sve to izgleda jednostavno, ali u pozadini radi cijela vojska tehnologije. Najčešće ćete čuti dva pojma: front-end i back-end. To su dva dijela istog svijeta, a zajedno čine ono što zovemo web development ili web razvoj.
Ako bismo web stranicu usporedili s kućom, front-end bi bio njezin vanjski izgled i interijer; fasada, boje zidova, raspored namještaja i dekoracije. To je ono što gosti odmah primijete i što ostavlja prvi dojam. Back-end su temelji, instalacije, električne i vodovodne cijevi, nevidljivo, ali presudno da bi kuća bila funkcionalna i ugodna za život.
Možete imati kuću koja izvana izgleda savršeno, ali ako cijevi pucaju ili struja ne radi, nitko se u njoj neće osjećati dobro. S druge strane, ni najbolja infrastruktura ne znači puno ako kuća djeluje zapušteno i neugledno. Tek kad su front-end i back-end u ravnoteži, nastaje prostor u kojem ljudi žele boraviti ili u našem slučaju, web stranica na koju se korisnici žele vraćati.
Što je Front-end development?
Front-end je lice svake web stranice ili aplikacije. To je vizualni dio s kojim se korisnik susreće: dizajn, tipografija, raspored, boje, gumbi i animacije. Ukratko, sve ono što doživljavate dok surfate.
Front-end se temelji na trima glavnim jezicima:
- HTML je kostur stranice. On definira gdje su naslovi, tekstovi, slike ili forme.
- CSS je stil. On daje stranicama boje, fontove, raspored elemenata i animacije.
- JavaScript je mozak interakcije. Zahvaljujući njemu, izbornici se otvaraju, galerije slika klize, a stranica reagira na vaše klikove.
Uz ove temeljne jezike, danas se koriste i frameworkovi poput Reacta, Vue.js-a ili Angulara, koji ubrzavaju izradu složenih aplikacija. Front-end nije samo izgled stranice, on mora biti i funkcionalan, brz i prilagođen svim uređajima.
Ako ikada niste mogli kliknuti na gumb jer nije reagirao, ili ste morali povećavati ekran mobitela da biste pročitali tekst to znači da front-end nije dobro odrađen.
Što je Back-end development?
Back-end je sve ono što se događa iza scene, a to su logika, podaci i serveri koji omogućuju da stranica radi kako treba.
Kad kliknete na gumb “Kupi”, front-end vam pokaže formu za unos podataka, ali back-end obrađuje tu kupnju, pohranjuje podatke u bazu i šalje informaciju trgovini da ste naručili proizvod.
Back-end se najčešće radi u jezicima kao što su PHP, Python, Java, Ruby, Node.js, a podaci se spremaju u baze poput MySQL-a, PostgreSQL-a ili MongoDB-a.
Drugim riječima, back-end je mozak i srce sustava, dok je front-end njegovo lice.
Kako front-end i back-end rade zajedno?
Zamislite da naručujete pizzu preko aplikacije.
- Front-end je sve što vidite: fotografije pizza, izbornik okusa, gumb “Naruči”.
- Back-end je sve što se događa kad kliknete na taj gumb: aplikacija šalje vašu narudžbu, podaci se spremaju na server i stižu kuharu u pizzeriju.
Bez front-enda, ne biste imali način da naručite pizzu. Bez back-enda, vaša narudžba nikad ne bi stigla do kuhinje. Tek zajedno, oni čine sustav koji funkcionira.
Primjeri iz stvarnog života
Primjeri web stranica koje koristimo svaki dan najbolje pokazuju kako front-end i back-end surađuju.
- Spotify – Front-end vam prikazuje playliste i gumbe za reprodukciju, dok back-end pretražuje milijune pjesama i vraća vam onu koju ste odabrali te priprema playliste prema vašim prethodnim slušanjima. Što više glazbe koja vam se sviđa slušate, veće su šanse da ćete otkriti nove glazbenike i pjesme koje će biti predložene prema vašem ukusu.
- Booking.com – Front-end vam nudi kalendar, filtere i recenzije hotela. Back-end u pozadini pretražuje tisuće smještaja i vraća rezultate u nekoliko sekundi na osnovu dostupnosti datuma, cijena i filtera koje ste unijeli putem front-end gumbova.
- Instagram – Front-end vam pokazuje fotografije i komentare, a back-end obrađuje svaku sliku i osigurava da se sve učita brzo i bez greške.
- Netflix – Front-end vas vodi kroz jednostavan izbornik i vizualno privlačan sadržaj, dok back-end odlučuje koje serije i filmove će vam ponuditi na temelju vaših prethodnih gledanja te generira top liste gledanog sadržaja na osnovu pregleda svih korisnika u bazi.
Sve ove stranice i aplikacije jako su uspješne zato što oba dijela, front-end i back-end, rade besprijekorno.
Razlika u karijeri web developmenta
Mnogi početnici pitaju: što je bolje, baviti se front-endom ili back-endom? Odgovor je da nijedno nije bolje, oba su važna.
- Front-end developeri često imaju smisao za estetiku i korisničko iskustvo. Oni brinu da sve na stranici ili u aplikaciji izgleda lijepo i da se korisnici lako snalaze.
- Back-end developeri više vole raditi “iza kulisa”. Njih zanima kako funkcionira logika, kako se obrađuju podaci i kako sustav može biti stabilan i siguran te pružati korisne povratne informacije.
- Full-stack developeri kombiniraju obje uloge, odnosno znaju i front-end i back-end. To su ljudi koji mogu izraditi cijelu aplikaciju sami, ali im treba više vremena da ovladaju svim tehnologijama.
U praksi, timovi se često dijele tako da svatko radi ono u čemu je najbolji, a zajednički cilj je isti, funkcionalan i privlačan proizvod.
Zašto je važno razumjeti oba?
Čak i ako odaberete jedno područje, dobro je razumjeti i drugo. Front-end developer će lakše raditi ako zna što se događa u bazi podataka, a back-end developer će bolje komunicirati s timom ako zna kako se dizajn prenosi korisniku.
Razumijevanje obje strane znači i bolje timsko okruženje, brže rješavanje problema i, na kraju, zadovoljnije korisnike.
Kako započeti karijeru u web developmentu?
Ako tek ulazite u svijet web developmenta, najbolje je krenuti s front-endom. Razlog je jednostavan: HTML i CSS su lagani za učenje, a rezultate vidite odmah. Nakon nekoliko dana već možete napraviti svoju prvu stranicu.
Sljedeći korak je JavaScript jer on dodaje interakciju i “život” vašoj stranici. Tek kada ovladate osnovama, možete istraživati frameworkove i razmišljati o back-endu.
Bitno je i da radite male projekte, jer se znanje najbolje stječe kroz praksu. Portfolio od nekoliko vlastitih stranica ili aplikacija može vam otvoriti vrata prvog posla u IT industriji.
Front-end i back-end dva su lica istog svijeta. Front-end je ono što vidimo i koristimo, back-end je ono što to pokreće. Kao restoran i kuhinja – jedno bez drugog ne može.
Ako želite zakoračiti u ovaj svijet, dobra vijest je da ne morate učiti sami. Pučko otvoreno učilište Petar Zrinski nudi program osposobljavanja za Front-End developera, u potpunosti pokriven HZZ vaučerom u vrijednosti od 3.000 €, što znači da je program za korisnike HZZ Vaučera u potpunosti besplatan. Online tečaj kreće 3. studenog, traje šest mjeseci i omogućuje vam da nakon završetka u radnu knjižicu upišete novo zanimanje, Front-End developer.