Autor: Nikola Jeremić, Quantox Technology
Očekivanja od Frontend developera značajno su se povećala poslednjih godina, najviše zbog jačanja brauzera i sveobuhvatnih Frontend framework-a koji podižu lestvicu mogućnosti na jedan prilično visok nivo. Dobar Frontend developer nije više neko ko samo zna da napravi navigacioni meni i iskačuće prozore, već je to osoba od koje se očekuje da poseduje raznovrstan set veština – traže se logika i kreativnost, preciznost i fleksibilnost.
Koje su to veštine koje dobar Frontend developer treba da poseduje?
Sledi lista od dvadeset korisnih alata , koji vam mogu pomoći da nadogradite svoj set veština.
#1 Responzivni dizajn
Razvoj i upotreba mobilnih telefona u svakodnevnom životu dovela je do toga da gotovo svi sajtovi veću posećenost imaju preko mobilnih uređaja nego preko klasičnih računara. Stoga nikad nije bilo važnije razvijati web aplikaciju tako da pruža odličan korisnički doživljaj na ekranima svih veličina i oblika. U ovome nam dosta može pomoći upotreba medijskih upita, radi podešavanja različitih stilova u zavisnosti od tipa ekrana.
#2 Flexbox and Grid sistemi raspoređivanja
Poznavanje ova dva sistema raspoređivanja elemenata (layout systems) značajno podiže kvalitet pisanja HTML koda, spašava nas nepotrebnog dupliranja elemenata (za svaki tip/širinu ekrana) i doprinosi fleksibilnosti u stilizovanju aplikacije. Ukoliko ovo deluje previše komplikovano, postoje i mnoge vrste framework-a koji olakšavaju postavljanje rasporeda elemenata, a najpopularniji među njima jeste Bootstrap.
#3 CSS preprocesori
Korišćenje klasičnog CSS-a za stilizovanje aplikacija zahteva dosta ponavljanja u pisanju, što je jedna od loših praksi generalno u programiranju. Ukoliko pri kraju projekta odlučite da ne želite da glavna boja teme bude plava, već recimo zelena, moraćete da prođete ručno kroz celi kod i izvršite izmene. A čim nešto radite ručno, to nije dobro ni sa aspekta brzine ni sa aspekta izbegavanja grešaka. Ovaj problem rešavaju CSS preprocesori (SASS, LESS…) proširujući funkcionalnosti klasičnog CSS-a na mnogo viši nivo.
#4 CSS animacije
Jednostavan a snažan način da impresionirate posetioce jeste upotreba animacija. CSS nudi mnogo mogućnosti povodom toga – možete da izaberete kada, kako, koliko često i sa kolikom pauzom će se određena animacija izvršiti. Važno je napomenuti da samo određene CSS osobine jesu podložne animacijama.
JavaScript
#5 jQuery biblioteka
jQuery je veoma popularna i moćna JavaScript biblioteka koja omogućava jednostavnu manipulaciju DOM elementima. Svoju popularnost duguje tome što je sama sintaksa mnogo čitljivija od klasičnog JavaScripta, tako da će se i početnicima svideti.
#6 Poznavanje skrivenih tajni JavaScripta
JavaScript je jezik čije je osnove lako savladati, ali sve dubljim učenjem njegova kompleksnost raste. Kako bi postao privlačan većem broju programera, kreiran je tako da “oprašta” sitne greške, a ta njegova popustljivost upravo vodi nerazumevanju suštine koja se krije “iza” tog koda. Stoga, da bismo shvatili zašto nešto u JS-u ne radi onako kako očekujemo, moramo razumeti njegove istinske osnove.
#7 Skladištenje podataka kod korisnika
Baze podataka nisu oblast delanja Frontend developera sama po sebi, međutim postoji izuzetak, a to je kad određeni podaci treba da se skladište u samom brauzerukorisnika. Zašto bi postojala potreba za time? Recimo da je sa aspekta doživljaja korisnika dobro što ne mora svaki put kada pristupi našem sajtu da ukuca korisničko ime i lozinku, već je to potrebno samo prvi put da uradi, nakon čega ti podaci jesu sačuvani u njegovom skladištu, kome samo on može pristupiti. Ovde treba razlikovati tri popularna načina skladištenja: localStorage, sessionStorage i kolačići (cookies).
#8 JS debageri
Jedna od ključnih prednosti modernih brauzera jeste da imaju ugrađene debagere, koji nam pomažu da otkrijemo greške u našem kodu tako što nam dozvoljavaju da pri učitavanju stranice prolazimo korak po korak kroz naš JS kod, zaustavljajući se na mestima gde sumnjamo da smo napravili grešku.
#9 JS frameworks
Frameworks su alati koji menjaju način funkcionisanja i pisanja koda. Njihov cilj je da pojednostavljuju i nadograđuju funkcionalnosti JavaScripta, neretko menjajući kompletnu strukturu koda i dizajn pisanja. Postoji veliki broj JS framework-a, koji se međusobno takmiče za prevlast u JS svetu, izbacujući periodično nove, sve moćnije nadogradnje. Trenutno najpopularniji među njima jesu React, Angular i VueJS.
#10 Asinhrono programiranje
Asinhrono programiranje omogućava web aplikacijama da ostanu responzivne čak i kada se više taskova procesira istovremeno. Događaji vezani za interakciju korisnika, kao što su filter pretraga ili klik mišem, dešavaju se nezavisno od predviđenog toka aplikacije. Stoga, aplikacija čeka na akciju korisnika i zatim reaguje zavisno od nje. Različite tehnike (promises, observables, callbacks) potpomažu proces asinhronog programiranja.
#11 NodeJS
NodeJS je moderna platforma koja omogućava da koristite JavaScript i na strani servera. Da, sada je moguće kompletnu aplikaciju napraviti upotrebom JavaScripta. Zapravo na tržištu postoje kompletni stekovi (stacks) bazirani na JavaScriptu kao programskom jeziku i JSON-u kao formatu za skladištenje podataka, kao što su MEAN (mongo + express + angular + node) i MERN (mongo + express + react + node). Popularnost NodeJS-a je u uzlaznoj putanji, tako da nećete pogrešiti ako krenete da čitate NodeJS dokumentaciju.
#12 Paket menadžeri
Da li je stvarno neophodno odvojiti nekoliko sati za, recimo, pravljenje kalendara za odabir datuma, kada jednostavna gotova rešenja postoje na internetu, besplatna su i za par minuta se mogu upotrebiti? Upravo ovde na scenu stupaju paket menadžeri kao što su npm, bower ili yarn, koji omogućavaju da jednostavnom komandom importujemo tuđ kod sa interneta. Naravno, uvek treba voditi računa o ispravnosti i sigurnosti tako unetog koda, ali svakako da ova vrsta pomoći dobro dođe u određenim situacijama.
Dizajn
#13 UX dizajn
Dobra komunkacija i planiranje značajno utiču na kvalitet svakog posla, pa i izrade web aplikacije. Kako bismo bili sigurni da smo dobro razumeli zahteve klijenta (ili čak naše lične zahteve) poželjno je pre početka izrade aplikacije napraviti nacrt (prototip) na kome će biti prikazana osnovna struktura sa akcentom na funkcionalnost aplikacije i potrebe korisnika. Kreiranje ovih nacrta lakše je uz upotrebu nekog od brojnih alata dostupnih na internetu (Axure, UXPin…). Iako UX dizajn ne spada strogo u oblast frontenda, neretke su situacije kada klijent očekuje od svog developera poznavanje njegovih osnova.
#14 UI dizajn
Kada završimo sa nacrtima i strukturom, prelazimo na estetski izgled aplikacije – korisnički interfejs. Ova oblast dizajna dosta je poznatija frontend developeru od prethodne, ali zbog toga ne znači da je manje zahtevna i da je potrebno manje truda kako bi se savladale osnove. UI dizajn podrazumeva da se pre početka kodiranja napravi kompletan vizuelni izgled buduće aplikacije koristeći neki od softverskih alata koji to omogućavaju (Adobe Photoshop, Sketch, GIMP…).
#15 Osnovni elementi dizajna
Za dizajn treba imati smisla i inspiracije, ali pored toga potrebno je poznavati određena pravila. Kakvo je značenje određenih boja, kako se boje međusobno uklapaju, upotreba linija različitih oblika i debljina, korišćenje praznog prostora (negative space), tipografija, simetrija i asimetrija, kao i harmoničnost delova u celini, samo su neke od stvari kojima morate vladati ukoliko želite da budete uspešni u grafičkom dizajnu.
#16 Ikonice i fotografije
Ikonice predstavljaju važniji element aplikacije nego što to na prvi pogled izgleda. Sem što deluju lepo na oko, one imaju i funkcionalnih prednosti. Zauzimaju manje mesta nego tekst, tako da ostaje više prostora za druge stvari. A ako ste posetili neki sajt koji je na stranom jeziku, ikonica može dosta pomoći u razumevanju toga šta se nalazi iza klika na istu. Za pravilnu upotrebu fotografija treba poznavati prednosti i nedostatke određenih formata (jpg, png, gif, svg…), kao i pravila optimizacije.
Komunikacija
#17 Sistemi za verzioniranje
Brojni alati postoje za verzioniranje koda, ali nekako prva asocijacija za većinu programera jeste GIT. Bilo da radite sami ili u timu, veoma je važno da na nekom od softvera specijalizovanih za verzioniranje čuvate svoj kod i imate uvid u promene koje vremenom nastaju. Još jedna od značajnih prednosti GIT-a jeste i mogućnost grananja koda, kako bi se određene funkcionalnosti web aplikacije izolovano kodirale sve dok se ne završe u potpunosti, a tada ih je moguće vratiti nazad u kod potpuno uređene.
#18 REST arhitektura
REST je arhitektura koja je postala standard za komunikaciju između klijenta i servera. Osnova REST-a jeste upotreba HTTP protokola i njegovih standardizovanih operacija (GET, PUT, POST, DELETE…) koji omogućavaju razmena podataka. Još jedan standard u ovoj oblasti tiče se formata u kome se određeni podatak šalje sa jedne na drugu stranu, a to je JSON.
#19 Engleski jezik
Jedan od osnovnih standarda kodiranja jeste, bez obzira na govorno područje, pisanje koda na engleskom jeziku. To je važno zbog toga što su svi programerski termini na engleskom jeziku, većina tutorijala, dokumentacije i video materijala je na engleskom, a na kraju krajeva, ukoliko klijent nije sa istog govornog područja kao i vi, podrazumevano je da ćete se sporazumevati na engleskom. Stoga, ukoliko ste programer, ne postoji nijedan razlog da odmah ne krenete sa učenjem istog.
#20 Tekst editori
Iako se savetuje za sve početnike u programiranju da koriste Notepad kako bi što bolje naučili osnove programiranja bez korišćenja prečica, za ozbiljniji rad apsolutno je neophodno koristiti napredne editore, koji ne samo da omogućavaju brže i preglednije pisanje koda, već i proveravaju česte sintaksičke greške, nude mogućnost dopunjavanja koda zavisno od jezika programiranja, nude definiciju elemenata, pomažu u degovanju aplikacije, a imaju i integrisanu kontrolu verzioniranja. Trenutno najpopularniji frontend editori na tržištu jesu VS Code, WebStorm, Atom i Sublime Text.