Front End Web Development

Razvoj veb sajtova je jedan od najpopularnijih načina za ulazak u softversku industriju. Osnove se brzo nauče, a rezultati su odmah vidljivi (bukvalno).

Šta je uopšte front end web development?

U narodu poznatije kao “pravljenje sajtova”, front end veb dev bavi se onim delom sajta ili veb aplikacije koji se prikazuje u vašem pretraživaču.

Sam pojam “front end web developer” se nekozistentno koristi za opisivanje nekoliko pozicija koje se međusobno znatno razlikuju. To je takođe slučaj i u oglasima za posao, tako da budite pažljivi prilikom čitanja tačnog opisa radnog mesta za koje se prijavljujete.

Na primer, pojam se može odnositi na nekoga ko od dizajnera dobija takozvani “mock up” iz fotošopa i pretvara ga u stvaran sajt pomoću HTML-a, CSS-a i eventualno JS-a. Ovde bi adekvatniji naziv bio “UI developer”.

U nekim slučajevima, od front end developera se može očekivati i poznavanje osnova dizajna, čak ponekad i sam da ume da izdizajnira nešto. Pogodili ste — to je jako loša ideja, ali možete se sa tim sresti u praksi.

Sa druge strane, izraz se može odnositi i na nekoga ko razvija web aplikacije kojima se značajan deo funkcionalnosti zasniva upravo na front endu. To od njega može zahtevati temeljno poznavanje JavaScripta, dizajn paterna, sigurno i nekog JS frameworka.

On takođe mora da zna i kako radi API na koji se front-end “kači”, ili kako se deo aplikacije/sajta može izrenderovati i na serveru. Ovu poziciju možemo nazvati i “Javascript developer”, ili “Javascript engineer/inženjer” kako bismo preciznije objasnili o čemu se radi.

Ipak, u praksi je politika davanja imena različita od kompanije do kompanije, a i veliki broj programera ima mišljenje na tu temu. Imajte to u vidu kada se budete prijavljivali na poslove, i pažljivo čitajte šta svaka pozicija tačno podrazumeva.

Takođe, imajte to i na umu dok budete učili.

Ukoliko, želite da se više bavite razvojem web aplikacija u javascriptu, više će vam koristiti da učite dizajn paterne, i više “pravog” programiranja.

Sa druge strane, ako želite da pravite sajtove za lokalne preduzetnike ili preko upworka, rad u fotošopu bi se mogao pokazati korisnim, kao i osnove dizajna. Zatim fokus na razvijanju veštine pretvaranja dizajna u HTML i CSS.

Kako učiti?

Prilikom učenja, mnogi se fokusiraju na pitanje koji je resurs najbolji.

Codecademy ili FreeCodeCamp? Project Odin ili neki Udemy kurs? Na koji način ću najbolje naučiti?

Ovo je pogrešno.

Naravno da je u redu da vas zanima koji je resurs najbolji i da li je vredan vašeg vremena (ponekad i novca), ali bi vaš fokus trebalo da bude na veštinama koje su vam potrebne kako biste postali front end developer.

Zašto?

Zato što kada firme traže developera, njih ne zanima iz kojeg ste vi resursa učili, već da li imate odgovarajuće veštine neophodne za obavljenje posla. Da li umete nešto da uradite — i da li umete to i da pokažete — daleko je važnije od toga da li ste gledali ovaj ili onaj kurs.

Takvo razmišljanje od samog starta vam može skratiti proces učenja i za nekoliko meseci.

Dakle, ono što se od vas očekuje na razgovoru za posao jeste da pokažete veštine, kao i razumevanje kako to sve radi, uslovno nazovimo to teorijom u ovom slučaju.

Osnovne veštine

Bilo da ćete da radite kao deo tima u nekoj kompaniji, ili kao frilenser, dobar deo neophodnih veština je isti u svakom slučaju.

Prva, i osnovna:

• Pravljenje statičkih sajtova pomoću HTML&CSS-a

Ovo je veština koja se razvija pre svega vežbanjem.

Međutim, da biste krenuli da vežbate, treba vam neka osnova, a za to srećom postoji gomila resursa, među kojima su najpopularniji Codecademy i FreeCodeCamp.

Nećemo diskutovati koji je bolji, izaberite šta vam se sviđa, a ukoliko znate neki baš dobar za koji mislite da i ostali treba da čuju, napišite nam u komentaru.

FreeCodeCamp vam između ostalog kao zadatke daje i mini projekte koji vam mogu poslužiti kao ideje za prve sajtove koje pravite, čak i da ne koristite FreeCodeCamp za učenje.

Napravite gomilu nekih malih stranica koje ne moraju nikada da budu objavljene, čisto radi vežbe. Kada se budete osećali komforno sa pravljenjem statičkih stranica na osnovu svojih ideja, pređite na sledeću veštinu.

Druga veština:

• Manipulacija DOM elementima pomoću JavaScripta

Vaše stranice će oživeti uz JavaScript, i moći ćete da dodate osnovnu funkcionalnost na njih.

Ovo možete naučiti iz mora tutorijala i kurseva na internetu. Pazite samo da ne budu zastraeli materijali, već barem od ES2015 pa nadalje.

Preporučljivo je da se za početak držite JavaScripta bez frameworka, poznatog i kao vanilla JavaScript.

Za razliku od HTML-a i CSS-a, JavaScript je pravi programski jezik. Ukoliko vam je ovo prvi susret sa programiranjem, samo polako, igrajte se sa JavaScriptom i veb stranicama dok vam osnovni koncepti poput petlji, funkcija, i objekata ne postanu jasni.

Vaš prvi kod neće biti sjajan, ali to mu nije ni cilj.

Kada savladate osnove JavaScripta moći ćete da pravite daleko zanimljivije projekte. Problem može biti što ne znate odakle da počnete sa projektima, pa sam izdvojio dva resursa koja su meni delovala zanimljivo.

Javascript30 je onlajn kurs u kojem autor pravi čak 30 mini projekata u čistom JS-u. Pored toga što su projekti poučni za početnike, svaki od njih može biti dobra polazna tačka za neku vašu ideju. Imajte u vidu, da biste dobili pristup videima morate da ostavite svoj mejl, ali videi jesu besplatni. (Autor će vas retargetovati reklama do smrti, ali valjda je to cena besplatnog sadržaja. Hint: koristite AdBlock.)

Zanimljiv je i Coding Challenge. To je serijal klipova u kojima jedan developer pokušava da iskodira najčešće neku od popularnih igara za što manje vremena, koristeći JavaScript. Iako koristi p5.js framework za ovo, ovaj serijal vas može naučiti dosta o JavaScriptu i tome kako se prave mini projekti.

Treća veština je naravno:

• Responzivan dizajn

Ono što pravite mora biti prilagođeno za sve vrste ekrana na kojima će biti gledano. Ovo je industrijski standard.

Naravno da je ovo lako rešivo dodavanjem, na primer, Bootstrapa u bilo koji projekat, ali to nije uvek najbolje rešenje, i definitivno nije način da naučite nešto.

Poigrajte se sa responzivnošću, probajte sami da je implementirate. Naučićete dosta, a i biće vam jasnije kako gotova rešenja rade.

Napredne veštine

Ako ste stekli prve tri veštine, vi umete da napravite sajt koji solidno izgleda, ima neku funkcionalnost, i responzivan je.

Šta sad? Je li to dovoljno za veb developera?

Ne baš.

Ono što ste do sada naučili dovoljno je da se napravi neki sajtić ili stranica, ali za ozbiljnije projekte postoji još stvari koje treba da savladate.

Pre svega:

• Izaberite JavaScript framework

Ako već imate ideju u kojim kompanijama ili na kakvim projektima biste želeli da radite, to vam može pomoći da izaberete odgovarajući framework. Najpopularniji su React i Angular, i sa njima imate prolaz u većini kompanija.

Ukoliko ste se zaista potrudili da naučite vanilla JS, učenje frameworka će vam biti značajno lakše, jer ćete razumeti kako i zašto su implementirane neke njegove mogućnosti.

Sada već možete da pravite prilično zanimljive i kompleksne projekte, koji su najsigurniji način da impresionirate poslodavce i dobijete posao.

Ukoliko vam fali ideja, počnite sa “kloniranjem” poznatih aplikacija — napravite funkcionalnu kopiju Trella, Slacka, Twittera, i naučićete dosta tokom tog procesa.

Šta još razlikuje profesionalnog developera od vas u ovom trenutku? Proces rada (workflow).

Naučite kako veb developeri u firmama zaista rade svoj posao.

Dakle:

• Verzionisanje koda

Profesionalni developeri ne čuvaju projekte u folderu “Projekat123asdf”, već pomoću sistema za verzionisanje koda, što je najčešće Git. Postoji gomila materijala na ovu temu, ali ako baš ne znate odakle da počnete, probajte sa ovom knjigom.

Takođe, ukoliko budete radili u timu, značajna veština je i:

• Čitanje tuđeg koda

Ovo možete vežbati kopanjem po zanimljivim projektima na GitHubu. Vrlo je naporno na početku, ali je ključna veština svih profesionalaca.

Pored toga, trebalo bi da savladate i alate za produktivnost, task runnere, package managere, kao i da počnete da koristite editore i alate koji su standard, ili koji su popularni u datom trenutku (trendovi se brzo menjaju).

Šta onda

Ovo nisu sve veštine i sve stvari koje bi trebalo da znate, ali ako ovo bude okvir vašeg plana za učenje, sve ostalo ćete usput saznati.

Neka vam u ovom procesu akcenat bude na projektima, i na sticanju veština. Držite se standarda i najboljih praksi.

Teorija

Pod teorijom ne mislim na stvarnu, naučnu teoriju, nego na tehnička znanja vezana za veb development.

Bilo bi odlično da proces sticanja veština koji smo iznad izložili suplementirate čitanjem knjiga i blogova.

Kroz različite stadijume učenja trebaće vam različita literatura. Uvek bi trebalo da gađate malo izvan zone komfora, tako da vam materijal nije već potpuno poznat, ali i da nije pretežak za vaš nivo razumevanja.

Za početak će pomoći i ako se upoznate sa time kako internet radi, šta se desi kada ukucate “www.imesajta.com”, šta je hosting, a šta domen. Šta je HTTP server, i kako sajt sa njega stiže do pretraživača na vašem računaru odnosno telefonu.

Sjajan resurs za učenje — a ujedno i referentni materijal — jeste Mozilla Developer Network (MDN). Oni koji su čuli za njega znaju da je za front end developere to obavezan bukmark.

Što se tiče JavaScripta, o nekim sjajnim knjigama govorili smo u ovom tekstu.

Meni se svideo EloquentJS, a popularan je i You Don’t Know JS serijal knjiga (oba su besplatna). Takođe, ključno je da pročitate barem jednu knjigu o projektnim uzorcima (dizajn paternima), jer se oni koriste u realnim projektima. Ako ne znate odakle, počnite odavde (takođe besplatno).

FreeCodeCamp ima sjajan blog na temu veb developmenta (i još po nečega).

Kako budete postajali napredniji i iskusniji, upustićete se dublje i u to kako radi browser, kako se vaš sajt renderuje na ekranu, i slična, malo komplikovanija tehnička pitanja. Ovo će biti značajno u trenutku kada počnete da razmišljate o performansama stranica koje pravite.

Pored svega ovoga, neće škoditi ni da naučite koje su najbolje prakse u dizajnu interfejsa (UI), i korisničkog iskustva (UX), ukoliko vas to zanima.

Može biti korisno i da znate kako pretraživač indeksira vaš sajt (SEO), i kako da pravite sajtove koji su od starta optimizovani za pretragu.

Neki poslodavci (ili klijenti) će možda zahtevati i poznavanje sistema za upravljanje sadržajem poput WordPressa i Joomle. Par dana mučenja da provalite kako CMS-ovi rade vam se može lepo isplatitit i biti dobar dodatak vašem skupu veština.

Pored toga, preporučio bih vam i da pročitate sjajnu priču Marka Mitranića o tome Kako postati Junior Full Stack programer za najviše dve i po godine.

← II — Osnove računarskih nauka

IV — Back End Web Development →