Poslednjih oko 6 meseci me je bar desetak ljudi pitalo za pomoć oko učenja programiranja. I to ne bilo kog, već onog za web.

Sa druge strane u negde istom periodu sam imao prilike da intervjuišem više osoba za poziciju Frontend developer koja, između ostalog, podrazumeva dosta dobro poznavanje tehnika rada sa HTML-om, CSS-om i Javascript-om. Činjenica da sam uglavnom bio razočaran nivoom znanja sa jedne i stavom o tome da sasvim dovoljno znaju sa druge strane me naterala da napišem ovaj vodič kroz razne kurseve i tekstove na internetu koji na kraju vode do toga da se osnove web razvoja nauče kako treba.

Ovaj vodič je linearan, odn. treba ga čitati redom i ne preskakati poglavlja.

Nakon što ste prošli sve kurseve, na kraju vas čeka projekat čijom uspešnom izradom možete (sebi) da potvrdite da imate dovoljno znanja da možete raditi kao junior -> intermediate (zavisi od tima, projekta, itd.) web programer.

Prolaz kroz sve ove kurseve uopšte neće biti lak, naročito ako nemate nikakvog prethodnog iskustva sa programiranjem. Naoružajte se voljom i strpljenjem.

Ukoliko ne znate engleski – nemojte nastavljati dalje.

Ukoliko koristite samo osnovni pretraživač vašeg operativnog sistema (Internet Explorer na Windowsu, odn. Safari na Mac-u), prvo instalirajte Google Chrome i Firefox. Ja sam sve navedene vodiče prolazio u Chrome-u (u stvari, u Chromium-u, ali i Google Chrome je OK).

Navedeni kursevi su uglavnom besplatni ali ima i onih koji se plaćaju i biće posebno obeleženi.

Prava na koja pristajete čitanjem ovog vodiča:

Ovaj tekst/vodič je besplatan. Možete slobodno deliti link do njega bilo kome i bilo gde, samo ne smete nikada i nikome to da naplatite i, ukoliko citirate bilo koji deo teksta, morate navestii link do ove strane kao izvora.

Nikada ne bih uspeo da napišem sve ovo bez pomoći nekoliko drugara: Aleksandar, Dragan, Ivana, Milica, Nikola, Vladimir. Hvala vam puno!

Ukoliko imate pitanja o samom tekstu, ukoliko je bilo šta nejasno, pitajte u komentarima ispod ili me kontaktirajte preko email-a.

Srećno učenje!


Uvod

Ima nekoliko stvari koje ne utiču toliko na sam čin web programiranja ali koje značajno doprinose efikasnosti kasnije.

Prva stvar je slepo kucanje. Možda zvuči bezveze ovo, ali slepo kucanje je jedna od stvari koja možda i najznačajnije pozitivno utiče na ceo proces pisanja koda. Sama činjenica da pogled nikada sa ekrana ne skreće na tastaturu znači da se nikada ne gubi fokus sa onoga na čemu se radi: programiranja.

Ima puno besplatnih tutorijala na internetu za slepo kucanje; iskreno, ne mogu ni da kažem koji je dobar ili najbolji, ali pogledajte recimo par ovih pa vidite koji vam najviše prija:

Slepo kucanje ne mora da se nauči unapred, naravno, ali tokom procesa učenja možete da izdvojite bar 10-15 minuta dnevno za to, uz ostale stvari. Za nekoliko nedelja, do mesec dana, to će već biti jako ozbiljan nivo.

Druga stvar je upotreba editora. Editor je program u kome pišemo i editujemo kod. Na Windowsu je najpoznatiji Notepad ili, njegova naprednija varijanta, Notepad++, a na Mac-u TextEdit.

Za programiranje je najbolje odabrati editor koji razume ono što pišemo i koji će biti u stanju da ponudi prvi nivo pomoći: da kaže da li smo ispustili slovo ili pogrešno napisali neku komandu (provera ispravnosti sintakse).

Ima puno editora za (web) programiranje ali jedan od naprednijih i standardnijih se zove Sublime Text, trenutno je aktuelna verzija 3: https://www.sublimetext.com/3

Sublime Text ima puno integrisanih pomoćnih funkcija za programiranje ali pored toga ima i mogućnost instalacije raznih dodataka (plugin-ova) koji dodatno šire mogućnosti.

Proći ćete par vodiča za upotrebu ovog editora, linkovi slede, ali pre toga, da bi ste mogli da ih pratite trebate imati neku pravu HTML stranu snimljenu na računaru koju ćete otvoriti uz pomoć Sublime-a. Otvorite u pretraživaču na primer sledeću stranu: https://en.wikipedia.org/wiki/HTML i, u pretraživaču otvorite File meni i odaverite opciju “Save as”, “Save Page as” ili sličnu i snimite stranu u neki folder (ako imate opciju pri dnu dijaloga za snimanje kako da se snimi strana, kao cela ili samo HTML, odaberite samo HTML). Zatim nakon instalacije Sublime-a (ne morate žuriti, biće objašnjeno u pasusu ispod) otvorite Sublime editor, File / Open i otvorite fajl koji ste upravo snimili (naziv bi trebao da bude “HTML – Wikipedia.htm”).

Ukoliko koristite Mac računar bilo bi dobro da prođete ovaj (tekstualni/video) tutorijal za Sublime 3 koji vas vodi od instalacije, preko osnovnih podešavanja pa do pokazivanja nekih osnovnih prednosti i funkcionalnosti Sublime-a: https://scotch.io/bar-talk/the-complete-visual-guide-to-sublime-text-3-getting-started-and-keyboard-shortcuts (zadnja dva dela tutorijala, za pluginove, mogu takođe da se prođu, i instaliraju opisani pluginovi, bez dodatka na kraju “Additional plugins”).

Ukoliko koristite Windows, ovde imate video vodič za instalaciju Sublime-a: https://www.youtube.com/watch?v=W9q8CwDKIEw. Nakon toga instalirajte “Package Control” plugin za Sublime; proces je opisan ovde: https://www.youtube.com/watch?v=ioRbV7fQkdU. Zatim otvorite HTML fajl koji ste snimili ranije i nastavite sa vodičem za Mac korisnike, gore, ali od dela koji objašnjava prečice na tastaturi za Sublime, pa do kraja, uključujuči i instalaciju svih opisanih pluginova (sem “Additional plugins” na kraju): https://scotch.io/bar-talk/the-complete-visual-guide-to-sublime-text-3-getting-started-and-keyboard-shortcuts#keyboard-shortcuts

Treća stvar je upotreba Google pretrage. Većina ljudi ne obraća puno pažnje na to kako vrši pretragu niti zna bilo kakve naprednije metode i tehnike pretrage ali iste mogu značajno skratiti vreme i pomoći da se dođe do boljih rezultata.

Sledi nekoliko tekstova sa opisom tehnika pretrage:

Kako internet radi

Kako internet radi

Kako internet radi

Polazim od pretpostavke da ste koristili internet pretraživače, email (npr. GMail ili Hotmail, itd.). Pa, kako to sve funkcioniše i šta se sve stvarno dešava dok mi listamo vesti ili mailove na nekom sajtu?

Ono što mi vidimo da se dešava je da otvorimo pretraživač (npr. Google Chrome ili Firefox), ukucamo adresu nekog sajta i on se pojavi u pretraživaču.

Ono što se stvarno dešava je sledeće:

  • Onog trenutka kada smo ukucali adresu i pritisnuli “Enter”, mi smo poslali URL (link) do sajta (ili neke konkretne strane na sajtu) koji želimo da vidimo, u formi www.SajtKojiHocuDaVidim.com.
    Ova adresa se sastoji iz nekoliko delova, odvojenih tačkom i pretraživači je uglavnom čitaju od pozadi.
    .com deo se zove Top Level Domain (TLD). Postojanje i registraciju TLD-ova uređuje međunarodna organizacija po imenu IANA i oni, pored pravljenja TLD-ova, odlučuju i koja organizacija će upravljati, odn. administrirati, kojim domenom. Konkretno, .com domen administrira organizacija VeriSign, .rs domenom upravlja RNIDS, itd.
    Lista svih trenutno dostupnih top level domena, sa nekim njihovim karakteristikama se može videti ovde: https://en.wikipedia.org/wiki/List_of_Internet_top-level_domains.
    Administratori TLD-ova su zatim zaduženi za registraciju sledećeg, drugog, nivoa domena, koji se nalazi pored TLD-a. Tako je neko u Google-u preko VeriSign-a registrovao google.com, a neko je preko RNIDS-a registrovao blic.rs. Administratori TLD-ova se retko kada direktno bave registracijom domena drugog nivoa (mada mogu) vec taj posao prepuštaju firmama registratorima domena (kao što je GoDaddy, Loopia, itd.).
    Pravna ili fizička lica koja registruju svoj domen drugog nivoa zatim slobodno upravljaju sledećim nivoima registrovanog domena, pa je Google sam napravio mail.google.com, docs.google.com pa i www.google.com. Upravljanje drugim nivoom domena se radi na računarima koji se zovu Name Serverima (NS).
  • Naš URL zahtev koji smo prosledili ide onda do našeg internet provajdera (npr. Telekomov ADSL ili SBB, itd.) gde se zahtev upućuje na obradu do računara koji se zove Domain Name Server (DNS).
    Uloga DNS-a je prosta: on treba da URL pretvori u tzv. IP (aj pi) adresu koja konačno definiše gde se nalazi server (računar) koji je zadužen da odgovori na postavljeni URL upit.
    Svaki računar povezan na internet ima svoju IP adresu (uključujući i tvoj računar dok si povezan na internet). Konvencijom, koja je uspostavljena davno, IP “broj” se sastoji od četiri broja, odvojenih tačkom, koji su između 0 i 255, npr: 132.12.248.7. Npr. IP adresa servera koji nam vrati najnovije vesti sa Blica je 185.104.64.10, dok kad god u pretraživaču odemo na Google, nama njegovu osnovnu stranicu vrati server koji se nalazi na adresi 74.125.128.147.
    Ukoliko DNS nema IP adresu servera koji opslužuje traženi URL, onda on sam šalje zahtev ka serveru administratora top level domena gde traži koji je server zadužen za upravljanje nekim domenom drugog nivoa (koji je njegov NS), pa onda njemu šalje zahtev za IP adresom servera koji će nam vratiti neku web stranu.
    Obzirom da se jako često dešava da mnogi internet provajderi (odn. njihovi domain name serveri) ne znaju IP adrese za tražene URL-ove, ukoliko bi svaki zahtev išao i do administratora nekog TLD-a i zatim do servera koji upravlja nekim domenom drugog nivoa, čekanje na povratnu informaciju o traženoj IP adresi bi moglo da potraje jako dugo (ako dođe na stotine hiljada ovakvih zahteva u sekundi, server administratora domena ne bi mogao da opsluži sve te zahteve jako brzo). Zato DNS-ovi pamte IP adrese do mnogih URL-ova drugog (ili i većeg) nivoa (pamćenje informacija koje se mogu promeniti u nekom trenutku se zove – keširanje, eng. cache, caching), pa kada DNS našeg provajdera ne ume da razreši neki URL, on prvo pita DNS svog provajdera, pa ovaj svog dalje, itd.
    Sa druge strane, kada se registruje neki novi domen drugog, ili većeg, nivoa i dodeli mu se neka IP adresa, informacija o tome se propagira (prosledi) na DNS-ove širom sveta kako bi eventualni pristup tom URL-u bio brži.
  • Sada naš URL već stiže do servera koji je zadužen da ga opsluži.
    Sam server onda funkcioniše slično mreži DNS-ova koji razrešavaju URL u IP adresu: adresu koja je stigla do njega pokušava da nađe u svojoj bazi URL-ova koje može da opsluži i, ukoliko je nađe, ili je prosledi do neke aplikacije koja dalje obrađuje zahtev ili, ukoliko dalja obrada nije potrebna, vrati nazad web stranu, dokument, koji odgovara traženom zahtevu. Zahtevi koji zahtevaju neku dodatnu obradu nakon iste takođe vraćaju nazad neki dokument (npr. web stranu) kao odgovor na zahtev.
    Deo servera koji inicijalno obrađuje dospeli zahtev se zove, prosto: web server. Najpopularniji web serveri su, recimo, Apache i NginX (en-džin-eks) na serverima pod Linux operativnim sistemom, ili IIS (Internet Information Server) na Windows serverima.
  • Web dokument u formi odgovora sa servera stiže nazad na naš računar i biva prikazan od strane našeg pretraživača

Koraci opisani iznad u proseku sveukupno traju oko pola sekunde sem u slučajevima kada je neophodna neka složenija obrada od strane servera pre vraćanja strane.

Nije neophodno, ali nije loše (ako nastaviš da se baviš web programiranjem, značiće ti kasnije) da pročitaš i/ili pogledaš sledeće linkove koji malo opširnije objašnjavaju neke korake odozgo:

  1. How does the internet work (neke stvari se ponavljaju u tekstovima ispod, ali to olakšava razumevanje zbog drugačijeg pristupa istoj tematici 😉 ):
    How Does the Internet work – W3C (tekst)
    How Does the Internet Work? – Stanford Paper (tekst)
    How the Internet Works (video)
    How the Internet Works in 5 Minutes (video)
    What Is the Internet? Or, “You Say Tomato, I Say TCP/IP” (tekst)
  2. DNS:
    DNS Explained (video)
    How DNS Works (tekst)
  3. HTTP (ovo će možda biti najteže pročitati i razumeti do sada, ali je bitno za dublje razumevanje onog što sledi; kakva god pitanja da imate – pitajte):
    HTTP: The Protocol Every Web Developer Must Know – Part 1 (tekst)
    HTTP: The Protocol Every Web Developer Must Know – Part 2 (tekst)
    HTTP Succinctly (ima više delova ali sve je lepo objašnjeno) (tekst)
    HTTP Access Control (CORS) (ovo jedino baš ne morate da čitate ako vam bude teško/nejasno; biće dosta lakše kasnije, posle nekih kurseva) (tekst)
    HTTP Status Codes in 60 Seconds (video)

HTML & CSS

U prethodnom poglavlju je objašnjeno šta se dešava sa zahtevom koji uputimo preko pretraživača. Linkovani tekstovi na kraju objašnjavaju i neke stvari dublje, između ostalog, sada znamo da kada server vrati našem pretraživaču dokument (web stranu), sa njim dođu i neke statusne informacije zahteva koje pretraživač ne prikazuje korisniku ali koje nama, programerima, znače da saznamo neke detalje koji nam mogu pomoći u daljem razvoju.

Sada ćemo se fokusirati malo na sam dokument koji server vraća pretraživaču.

U pitanju je (uglavnom) HTML dokument. U suštini, to je običan tekstualni fajl koji ima ekstenziju .HTM ili .HTML. Sastoji se od tagova, upisanih između uglastih zagrada, i njihovih atributa, koji okružuju sadržaj dokumenta.

U principu, HTML tagovi opisuju tip sadržaja na strani: kažu nam da li tekst, koji okružuju, predstavlja neki naslov ili paragraf, link, sliku, itd.

CSS (Cascading Style Sheet) je sastavni deo HTML dokumenta i opisuje stilove kojima se prikazuje sadržaj. CSS-om kažemo da li će neki deo teksta biti crven ili plav, kako će se i gde prikazati neka slika ili neki blok teksta. CSS-om moze i da se crta na strani, pa i animira.

Jedan od boljih tutorijala osnova HTML-a i CSS-a, koji je istovremeno i interaktivan, može se ispratiti na Codeacademy sajtu (slobodno otvorite nalog): https://www.codecademy.com/tracks/web

Inače, Code Academy daje osnove svih kurseva besplatno, dok, ukoliko želite opcije dodatnih objašnjenja i provere znanja, potrebna vam je PRO pretplata, koja košta 20 USD mesečno.

 

Ima još nekoliko dobrih opisa osnova HTML-a i CSS-a koji nisu interaktivni, ali ne bi bilo loše makar ih proći i probati neke stvari koje opisuju. Za praćenje tih tutorijala ne bi bilo loše da imate otvoren i Sublime Text, u kome ćete kucati HTML i CSS kod koji želite da probate, i browser u kome ćete pregledati rezultat otkucanog koda (u Sublime-u odmah snimite dokument kao NazivTutorijala.html negde na disku a u browseru otvorite ovaj fajl u novom tabu – sa svakim update-om html fajla u editoru isti se snimi a u pretraživaču osveži prikaz).

Ostali HTML/CSS tekstovi/kursevi/tutorijali (morate proci kroz svaki od ispod navedenih):

HTML i CSS osnove bi sada već trebali biti u malom prstu 🙂

Osnove, na žalost, nisu dovoljne, bar ne što se tiče CSS-a (HTML, sam po sebi, ima konačnu listu atributa i ne treba nešto puno kreativnosti za njegovu upotrebu). Web strane mogu biti jako složene po dizajnu, sa puno (interaktivnih) elemenata i korišćenje samo osnova CSS-a bi ucinilo razvoj komplikovanom operacijom.

Slede opisi i tutorijali malo naprednijih tehnika za CSS. Opet, ocekivanje je da prodjete kroz svaki od navedenih:

Obzirom da CSS upravlja kompletnim izgledom web strana, na nekim sajtovima količina napisanog CSS koda ume da bude prevelika. Zato su neki ljudi izmislili načine da sam CSS kucaju drugačije, lakše, jezikom koji olakšava organizaciju koda na velikim projektima. Ove “lakše” načine pisanja CSS-a pretraživači ne umeju da prepoznaju pa zato ovakav kod mora prvo da se konvertuje u standardan CSS pre postavljanja na server. Ove tehnologije lakšeg pisanja CSS-a ćemo obraditi kasnije, nakon što prođete i osnove Javascripta.

Javascript, osnove

U ovom trenutku već imate solidno poznavanje HTML-a i CSS-a.

Ako postoji neki problem sa njima, to je što su statički: jednom napisan HTML i CSS kod je nemoguće izmeniti nakon što se strana učita u pretraživaču (ovde ne mislim na CSS animacije ili definisane stilske promene kada se mišem pređe preko određenih elemenata, obzirom da je i opis ovih promena statičan).

Tu nam u pomoć dolazi Javascript.

Javascript je programski jezik koji nam dozvoljava izmenu bilo kog dela stranice u realnom vremenu. Bilo kog dela znači upravo to: možemo menjati sadržinu, HTML tagove, stilove, ubacivati nove, brisati postojeće, itd.

Ove mogućnosti su učinile Javascript jednim od najpopularnijih jezika danas i neizbežnim u web programiranju.

Pre uranjanja u JS lekcije, ne bi škodilo da se podsetite hijerarhije HTML tagova na jednoj web strani poznatije kao Document Object Model, ili – DOM: http://eloquentjavascript.net/13_dom.html (pročitajte do pasusa po imenu “Moving through the tree” obzirom da sa njim počinje objašnjenje DOM-a kroz upotrebu Javascripta).

Moj savet je da se sa Javascriptom počne od interaktivnog kursa na CodeAcademy, slično kao i sa HTML-om i CSS-om: https://www.codecademy.com/en/tracks/javascript

Kao sledeći korak, još jedan interaktivni kurs koji objašnjava osnove Javascripta, ovoga puta sa Khan Academy: https://www.khanacademy.org/computing/computer-programming/html-css-js

Krećemo sa malo opširnijim štivom za JS. Počinjemo od knjige You Don’t Know JS: Up & Going koju možete preuzeti ovde (ebook verzija je besplatna, obratite pažnju u gornjem desnom uglu): http://shop.oreilly.com/product/0636920039303.do

Dok čitate ove knjige uvek imajte otvoren i Sublime Text i browser kako bi ste tokom čitanja probali primere i objašnjenja.

Sledi još jedna knjiga koja se može preuzeti u PDF-u sa ovog linka: http://www.javascriptenlightenment.com/

Kod koji pišete za neku web aplikaciju će u nekom trenutku ili menjati neko drugi ili vi sami nakon duže pauze i jako je bitno da ono što kucate bude lako razumljivo. Neke osnovne smernice za stil kodiranja možete videti ovde. Editor koji koristite takođe se može prilagoditi vašim potrebama i obaveštavati vas ukoliko izađete izvan postavljenih okvira (moguće da vam je Sublime već podešen ali ako nije, pronađite sami kako bi ste ovo mogli da uradite).

Još jedan, malo lakši za čitanje, opis dobrih navika u pisanju Javascript koda se nalazi ovde: https://github.com/rwaldron/idiomatic.js#idiomatic-style-manifesto

Možete još jednom proći i DOM opis sa početka ovog poglavlja, samo što sada možete proći sve: http://eloquentjavascript.net/13_dom.html.

Za kraj, sledi lista od šest video snimaka predavanja koja je držao Douglas Crockford, Javascript architect, počev od istorije programiranja i programskih jezika pa do raznih više ili manje poznatih detalja o Javascriptu. Ne morate da se naoružate Sublime-om za ovo, gledanje u pauzi između drugih obaveza je takođe OK.

JS standardi

Programski jezik Javascript je nastao pre oko 20 godina sa ciljem da se izvrsava u, tada jedinom, Netscape pretraživaču. Upravo ste se upoznali sa nekim osnovnim pravilima ovog jezika: kako se deklarišu promenljive, funkcije, pravila pisanja koda.

Pravila koja definišu način upotrebe Javascripta definiše organizacija pod nazivom Ecma International i zovu se – ECMAScript.

Trenutno je najpopularnija verzija 5 (odn. 5.1) ove specifikacije koja se često, umesto ECMAScript 5, označava kao ES 5. Ovo je i verzija Javascript specifikacije koja je pokrivena vodičima Javascript osnova.

Sledeća verzija, ES 6, je već finalizirana i neke novije JS biblioteke je već koriste. Detalje ES 6 specifikacije kao i neke osnovne razlike u odnosu na ES 5 možete videti ovde: http://es6-features.org/ a malo opširnije objašnjenje dela noviteta ovde: https://www.smashingmagazine.com/2015/10/es6-whats-new-next-version-javascript/

Kompatibilnost pretraživača sa ES 6 možete videti ovde – praktično, sve novije verzije popularnih pretraživača ga skoro u potpunosti podržavaju.

Razvoj specifikcije za ES 6 je trajao oko 6 godina pa je, nakon završetka, odlučeno da se specifikacija obnavlja bar jedno godišnje. Tako se može naći opis a ES 7 koji se naziva i ES 2016. Ova poslednja specifikacija ima jako malo noviteta: http://www.2ality.com/2016/01/ecmascript-2016.html

SEO i Pristupačnost

SEO je skraćenica od Search Engine Optimization. Opisuje procese kojima web strane koje pravimo prilagođavamo da budu ne samo lakše viđene od strane pretraživača, već i da se pojave u što ranijim rezultatima pretrage (ultimativni cilj je da budu prvi u listi rezultata za neki ključni pojam).

Kada neko traži da mu se na sajtu implementiraju SEO tehnike, uglavnom se misli na prilagođavanje Google pretraživaču, obzirom da je najpopularniji.

Jako dobar uvod u SEO, šta on znači i podrazumeva, može se naći ovde: http://www.hobo-web.co.uk/seo-tutorial/

Tekst je baš poveći i ne mora da se baš nauči ali bar par čitanja da se razume i da se bookmarkuje, da možete da čitate i tražite kasnije, kada vam bude trebalo (na kraju strane postoji opcija da se strana skine kao PDF).

Takođe jako dobre smernice za SEO je napisao i sam Google i one se mogu preuzeti u PDF formatu odavde: http://static.googleusercontent.com/media/www.google.com/en//webmasters/docs/search-engine-optimization-starter-guide.pdf

Bitno je da razumete da cela SEO priča ne predstavlja skup jasno utvrđenih i nepromenljivih pravila, već da se menja sa vremenom. Sami pretraživači, uključujući i Google, menjaju svoje algoritme kojima neke strane/sajtove proglašavaju više ili manje relevantnim, pa se sa promenom tih algoritama menjaju i SEO tehnike.

Ukoliko krenete da se ozbiljnije bavite SEO-om, verovatno će vam sledeće alatke biti od koristi:

Accessibility

Accessibility, ili pristupačnost, je skup tehnika kojima olakšavamo pristup našim stranama osobama koje imaju neku vrstu invaliditeta, koja im otežava pristup.

Jako dobar online kurs za web accessibility je napravio Google i može se ispratiti ovde: https://webaccessibility.withgoogle.com/course.

Referentna lista HTML elemenata i kako ih vidi specijalizovani softver koji ih čita se nalazi ovde (ne mora da se uči, samo da znate gde ta informacija može da se nađe): How HTML elements are supported by screen readers (tekst)

Alati

Vreme je da se opet napravi pauza od hands-on programiranja kako bi ste se upoznali sa nekim pratećim alatima koji su neizostavan deo procesa razvoja. Svaki od njih je nastao kao posledica rešavanja problema sa kojima su se susretali mnogi programeri.

Pre objašnjenja samih alata, neophodno je neko osnovno iskustvo rada u terminalu (odn. CLI-u –  Command Line Interface). Na Windowsu se do terminala dolazi preko Start menija: Programs/Accessories/Command Prompt, na Mac-u kucanjem “terminal” u Spotlight-u a ako koristite Linux, već sigurno znate kako.

Neke osnove rada u Windows terminalu možete naći ovde: http://www.computerhope.com/issues/chusedos.htm

Za Mac preporučujem ovu PDF knjigu: http://unixmages.com/ufbm.pdf (ne celu, prva tri poglavlja su više nego dovoljna)

U principu, osnove rada u terminalu za bilo koju platformu možete lako naći i na Youtube-u.

Git

Počećemo sada od alata za verzionisanje koda.

Koji problem rešavaju ovi alati? Kada počnemo da radimo na nekom HTML dokumentu, krećemo od pisanja osnovnih tagova koji definišu tip dokumenta, naslov, opis, itd. Zatim se bavimo sadržajem, dodajemo CSS i, po potrebi, neki javascript. Ukoliko radimo na nekom komplikovanijem projektu, ovo je proces koji može potrajati i više dana. Za to vreme naš dokument konstantno trpi izmene koje mi manje ili više redovno snimamo.

Jedan od problem koji može da se dogodi je da u nekoj fazi razvoja shvatimo da nam je ipak neohodan deo koda koji smo obrisali iz dokumenta pre neki dan.

Zatim, ukoliko više ljudi radi na istom projektu, može se dogoditi da bar dve osobe rade na izmenama istog dokumenta i onda nam je neophodan mehanizam koji će centralizovati lokaciju na kojoj se čuva naš projekat i umeti da spoji više različitih izmena u jednu jedinstvenu.

Rešenje je u alatima za verzionisanje koji, kako im i ime sugeriše, služe da svaku značajniju izmenu nad nekim fajlom zapamtimo. Ovi alati ne pamte samo poslednju verziju tog fajla, kao što se dešava kada samo snimamo svaku promenu kroz editor, već celokupnu istoriju promena nad tim fajlom i u svakom trenutku možemo videti promene u svakoj od verzija.

Postoji nekoliko popularnih sistema za verzionisanje, npr. SVN, Mercurial, Git.

Za početak, dovoljno je da savladamo Git, obzirom da je zadnjih desetak godina postao de facto standard u svetu web razvoja.

Pre upoznavanja sa Git-om ne bi bilo loše da ga instalirate odavde: https://git-scm.com/downloads. Ukoliko instalirate na Windowsu, obratite pažnju da tokom instalacije odaberete sledeće opcije:

Za početak savet je da prođete interaktivni kurs za Git na Code Academy: https://www.codecademy.com/learn/learn-git

Malo opširnije objašnjenje i neke naprednije tehnike se mogu naći ovde: http://rypress.com/tutorials/git/index

Interaktivni kurs za Git branching: http://learngitbranching.js.org/

Referenca za Git se može naći ovde: https://git-scm.com/book/en/v2 (ne mora tu sve da se baš uči, ali makar prođite kroz sve da budete svesni šta sve može da se radi sa Gitom pa kasnije, ako/kada zatreba, znate gde da gledate).

Najpopularniji online servisi koji nude korisnicima besplatnu lokaciju za Git repozitorijume su:

Nakon što prođete tutorijale iznad za Git, otvorite nalog na nekom od Git servisa iznad, sve što ste radili do sada organizujte u neke foldere i od ovog trenutka sav rad “snimajte” (odn. Commit-ujte i push-ujte) tamo (možete podesiti da vam repo-i budu privatni).

NodeJS, npm, gulp

NodeJS je serverska tehnologija, ne izvršava se u pretraživaču ali je neophodno poznavati osnove, makar isključivo programirali frontend deo. Zašto: moderni razvoj za frontend podrazumeva korišćenje raznih biblioteka koje olakšavaju programiranje a upotreba NodeJS-a olakšava održavanje i postavljanje svega toga na server. Zamislite da koristite desetak različitih biblioteka i da morate manuelno proveravati s’ vremena na vreme da li je izašla nova verzija svake, pa sledi preuzimanje, postavljanje u projekat, promena reference ka biblioteci u odgovarajućim dokumentima, itd.

Takođe, postoje i neki drugi načini pisanja CSS-a (biće obrađeni kasnije) koji olakšavaju razvoj, ali je u pitanju sintaksa koju pretraživači ne mogu da obrade pa onda opet koristimo NodeJS da prevedemo taj lakši-za-pisanje CSS u standardni CSS.

Šta je to serverska tehnologija: kao što i samo ime sugeriše u pitanju je kod koji se izvršava na serveru. Rezultat je razumljiv pretraživačima takav kakav je, ne obrađuje se dodatno od strane samog pretraživača ali ga može dodatno obrađivati Javascript u okviru web strane.

Samim NodeJS-om ćemo se baviti nešto kasnije. Sada nam je bitno samo da razumemo osnove, kako funkcioniše, i kako ga možemo iskoristiti za frontend deo.

NodeJS izvršava Javascript kod na serveru i modularno je dizajniran. Nakon što instaliramo sam NodeJS, po potrebi instaliramo razne dodatne module. Te module instaliramo uz pomoć alata koji se zove Node Package Manager ili – npm.

Za početak, preuzmite sa zvanične stranice instaler za svoju platformu (Win32/64, Mac, Linux, itd.), koji inače uključuje i npm, i instalirajte: https://nodejs.org/en/download/current/

Zatim prodjite kroz kratak uvod u NodeJS/npm za web programere: http://codylindley.com/techpro/2013_04_12__package-managers-an-introducto/

Poslednji deo tutorijala iznad obrađuje upotrebu Node modula po imenu Bower, koji u stvari služi za organizaciju dodataka našeg web projekta, odn. kako sami autori kažu “Bower is a package manager for the web”: https://bower.io/. Bower inace nije u upotrebi toliko u zadnje vreme, obzirom da i sam npm radi isto to.

Još jedan tekst, fokusiran samo na upotrebu bower-a možete naći ovde, ukoliko vam je neophodno da se malo blize upoznate sa bower-om (nije neophodno proci ovaj tutorijal): https://code.tutsplus.com/tutorials/meet-bower-a-package-manager-for-the-web–net-27774

Postoji još jedna Node alatka koju ćete često koristiti tokom razvoja web aplikacija, u pitanju je gulp.

Gulp nam pomaže tako što automatizovano izvršava razne zadatke od trenutka kada završimo sa kucanjem nekog koda do postavljanja na server. Može nam proveriti ispravnost koda, minifikovati (smanjiti) JS i CSS fajlove, prevesti CSS koji smo kucali u jeziku koji je lakši za kucanje u onaj koji pretraživač razume, itd.

Dobar uvod u gulp, kako funkcioniše i kako se koristi, možete pročitati ovde: https://css-tricks.com/gulp-for-beginners/

Malo opširniji gulp tutorijal, sa prikazom više njegovih mogućnosti, nalazi se ovde: https://www.tutorialspoint.com/gulp/index.htm

U oba teksta o gulp-u za sada ignorišite deo koji opisuje SASS i LESS (slobodno pročitajte, ali ne morate ništa da probate sami): u pitanju su CSS nadgradnje koje će doći na red kasnije.

DevTools

Poslednja serija alata je ona koja je integrisana u svakom pretraživaču i neizostavni su prilikom svakog razvoja. Lako ih je otvoriti, pokrenuti, i odmah su spremni za upotrebu.

Iako ima dosta pretraživača na tržištu, prilikom razvoja bi ste trebali da koristite ili Google Chrome ili Mozilla Firefox pretraživače koji i inače imaju najveći udeo na tržištu. Nailazićete na internetu na razne tekstove i diskusije u kojima se jedan od ova dva pretraživača hvali a drugi kudi ali najbolje je da ne pravite nikakav izbor: instalirajte i koristite oba. Svaki projekat na kojem radite testirajte bar u oba ova pretraživača.

Umesto standardne verzije Firefox-a, preporuka je da koristite Firefox Developer edition, verzija pretraživača koja je pravljena za programere: https://www.mozilla.org/en-US/firefox/developer/ Na matičnoj strani ovog pretraživača imate dovoljno objašnjenja kako ga iskoristiti najbolje.

Kasnije, kada krenete da radite za klijente, uvek se trudite da definišete u kojim pretraživačima vaše strane trebaju da se vide bez ikakvih grešaka. Pored gore pomenutih, najčešći zahtevi su za Internet Explorer (IE) verzije 10+.

Osnove Chrome DevTools-a: http://discover-devtools.codeschool.com/

Detaljan opis Chrome DevToolsa: https://developers.google.com/web/tools/chrome-devtools/

/dev tips: https://umaar.com/dev-tips/

Kako koristiti Chrome DevTools za javascript debugging: https://scotch.io/tutorials/debugging-javascript-with-chrome-devtools-breakpoints

Nešto više o Firefox Toolboxu može se saznati ovde:https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox

Više o Firefox web development toolbar-u: http://tips.webdesign10.com/web-developer-toolbar.htm

Revisitng Firefox’ dev tools: https://www.smashingmagazine.com/2015/12/revisiting-firefox-devtools/

Javascript IDE

Do sada smo koristili Sublime text editor za pisanje koda, isti snimali pa proveravali rezultat u Chrome-u ili Firefox-u zato što naš editor nema integrisanu mogućnost da izvršava i testira Javascrpt kod.

IDE znači Integrated Development Environment i opisuje sintezu editora i mehanizma za izvršavanje (odnosno kompajliranje – prevođenje) i proveru koda koji pišemo.

Sublime Text jeste običan editor, nije IDE, ali ima par trikova pomoću kojih možemo bar malo poboljšati rad sa Javascript-om u njemu:

  1. Ubaciti Javascript konzolu
    postoji mogućnost da ubacimo Javascript konzolu u Sublime text, koja funkcioniše slično onoj u pretraživačima. Vodič za instalaciju možete proći ovde; prva opisana metoda je za Mac računare a druga za Windows.
  2. Instalirajte Sublime pluginove za JS
    Sublime može da se pohvali ogromnom kolekcijom pluginova, ali ovde opisani su više nego dovoljni da smanje količinu grešaka u kodu: https://www.sitepoint.com/essential-sublime-text-javascript-plugins/ Nećete verovatno u ovom trenutku razumeti šta rade neki od ovih pluginova, ali će vam dobro doći kasnije.

Postoje naravno i prave IDE aplikacije sa podrškom za Javascript. Ukoliko ste još uvek komforni sa Sublime/om, ne morate još uvek da probate ni jednu od opcija ispod.

  • Prva i, po meni, najbolja opcija je WebStorm, kompanije JetBrains, koja se plaća. JetBrains IDE alati spadaju u sam vrh ponude za razne programske jezike, između ostalog i za Javascript. Webstorm je gotovo neprikosnoven u podršci za kodiranje, debugging-u, integrisanim alatima i ima puno dodatnih funkcija. Poseduje, takođe, i veliku kolekciju dodatnih pluginova koji se instaliraju iz same aplikacije.
    Godišnja cena za individualnog korisnika nije prevelika za sve što nudi: prve godine je 59 EUR, zatim 35 EUR godišnje.
  • Jedan od začetnika novog talasa lakih IDE aplikacija ili editora sa integrisanim debugger-om je Atom, editor kompanije GitHub. Atom ima moderan korisnički interfejs, mnogo dostupnih pluginova, integrisan debugger. Po mnogim mogućnostima podseća na Sublime s’tim što vam ne trebaju nikakvi trikovi da bi radio debugging npr.
  • Od kada je napravio Windows, Microsoft pravi i održava jedan od najboljih razvojnih alata na Windows-u: Visual Studio. Skoro su napravili i njegovu Light verziju pod nazivom Visual Studio Code, koja je dostupna na svim platformama. Pored pomoći u kodiranju, VSC radi i Javascript debugging i poseduje zavidnu kolekciju pluginova.

Kompletnu listu IDE aplikacija sa bilo kakvom podrškom za Javascript možete videti ovde: https://en.wikipedia.org/wiki/Comparison_of_integrated_development_environments#JavaScript

HTML/CSS varanje

Do sada ste verovatno shvatili da kada god počinjete neki novi projekat prvih nekoliko sati ili dana se uvek svodi na gotovo isti posao: pravljenje strukture projekta, osnova raznih strana, layout-a, ubacivanje fontova, standardnih JS biblioteka, itd.

Svako bi želeo da taj dosadniji deo posla ubrza ili automatizuje nekako.

Boilerplates

Srećom, ovo je problem koji pogađa većinu web programera, pa je internet pun raznih pomagala.

Počinjemo od jednog od najstarijih i najpoznatijih: HTML 5 Boilerplate (H5BP) – https://html5boilerplate.com/ . H5BP je u suštini struktuiran projekat sa već napravljenom strukturom foldera, par osnovnih HTML strana, osnovama CSS-a i JS-a i još nekoliko pratećih fajlova. Napravljen je tako da se lako može nadgrađivati i menjati. Ukoliko želie da automatizujete proces pripreme za deployment uz pomoć gulp-a (po default-u, H5BP koristi Apache Ant za ovo), odgovarajuću konfiguraciju (gulpfile.js) možete preuzeti ovde.

Ukoliko vam osnovni H5BP nije dovoljan, možete odabrati funkcionalnosti koje su vam neophodne ovde: http://www.initializr.com/

Titulu definitivno najpopularnijeg HTML/CSS(/js/++) framework-a nosi Bootstrap, kreiran od strane kompanije Twitter: http://getbootstrap.com/. Slično H5BP-u, Bootstrap pakuje strukturu, HTML, CSS, ali pisan kroz neki CSS pretprocesor, i JS ali ima i ogroman broj kontrola spremnih za upotrebu. Može se ili preuzeti odavde u izvornoj (source) verziji (CSS je pisan u LESS-u), izvornoj sa CSS-om u SASS-u ili kao minifikovana verzija (uz pomoć gulp-a ili sličnog alata). Druga opcija je da se preuzme/instalira preko Bowera ili npm-a.

Na samom sajtu Bootstrapa postoji puno primera kako se sve može iskoristiti ovaj framework. Nemojte da vas obeshrabri ako naletite na tehnologiju koja je uključena a koju ne poznajete (npr. LESS, SASS, jQuery, grunt, itd.). Dok isprobavate kako funkcioniše, koristite šta znate, ostatak ćete naučiti u narednom periodu.

Ukoliko bi ste koristili Gulp, konfiguracioni fajl možete preuzeti preko npm-a: https://www.npmjs.com/package/gulp-bootstrap-configurator

Za kraj bih naveo jedan alat koji generiše projekat u zavisnosti od potreba: Yeoman. Instalira se uz pomoć npm-a a na sajtu postoji prilično detaljan tutorijal kako se koristi. Indeks svih generatora možete naći ovde: http://yeoman.io/generators/.

Yeoman bih preporučio u slučaju projekata do neke srednje veličine, sa jako tesnim rokovima.

Less i Sass

Less i/ili Sass su više puta do sada pominjani. Predstavljaju CSS pretprocesore nastale sa ciljem da olakšaju proces razvoja CSS-a. U stvari, i Less i Sass su manje više posebni skripting jezici koji šire mogučnosti CSS-a i koji se, pre postavljanja na server, prevode (kompajliraju) u standardni CSS uz pomoć gulp-a (ili drugih, sličnih, alata).

Obzirom da je Less baziran na Javascriptu a Sass na programskom jeziku Ruby, više ćemo se fokusirati na Less iako ću dati i par Sass tutorijala na kraju obzirom da postoji način da se Sass prevede u CSS uz pomoć gulp-a (a i možete naleteti na projekat koji je rađen Sass-om i na kome trebate da nastavite rad).

Podešavanje okruženja za Less, osnovna uputstva kao i osnove samog jezika možete naći ovde: http://www.hongkiat.com/blog/less-basic/

Malo detaljnije objasnjenje mogućnosti Less-a: https://scotch.io/tutorials/getting-started-with-less

I prilično detaljna lista mogućnosti Less-a kroz opsežan tutorijal: http://www.tutorialspoint.com/less/

Za kraj, ogromna lista Less tutorijala od kojih neki objašnjavaju prilično specifične situacije: http://www.cssauthor.com/less-tutorials/

Ukoliko vam je i Sass zanimljiv, malo više možete saznati ovde, ovde i ovde.

Neke osnovne razlike između Less-a i Sass-a možete pročitati ovde: https://www.keycdn.com/blog/sass-vs-less/

Napredni Javascript

Sa završetkom prethodnog poglavlja mogli bi smo da kažemo da ste postavili solidnu osnovu. Poznajete alate, html i css su tu, osnove javascripta.

Javascript možda izgleda kao jedan od alata koji, u ovom slučaju, ima zgodnu sposobnost da utiče na sve aspekte web strane ali je mnogo više od toga. U pitanju je pravi programski jezik sa kojim možemo razvijati kompleksne (web) aplikacije.

Da bi smo mogli da upotrebimo Javascript za rešavanje složenijih problema, moramo znati i neke naprednije tehnike programiranja.

Delovi koji slede su primenljivi na bilo koji programski jezik, u pitanju su opšte tehnike, ali su objašnjenja uglavnom vezana za Javascript.

Objektno orijentisano programiranje (OOP)

Do sada smo upoznali Javascript kao programski jezik u kome pišemo razne komande ili funkcije koje na osnovu nekih ulaznih parametara daju neki rezultat.

OOP koncept za razliku od toga predviđa kolekciju povezanih objekata gde svaki može da prima poruke, obrađuje ih i šalje poruke drugim objektima. Svaki objekat se može posmatrati kao mali deo celine sa jasnom ulogom i odgovornošću.

Javascript, kako je dizajniran, ne podržava u potpunosti OOP specifikaciju ali i ta delimična podrška je dovoljna da možemo dizajnirati OOP aplikacije u Javascriptu.

Možda će zvučati malo nelogično na prvo čitanje, ali iako OOP koncept nije u potpunosti podržan, u Javascriptu je sve objekat, uključujući i promenljive i funkcije. Da bi ste, za početak, razumeli koncept Javascript objekata prođite kroz ovaj vodič: http://javascriptissexy.com/javascript-objects-in-detail/

Sledeći koncept koji se mora razumeti pre uranjanja u OOP je koncept Javascript prototipova. Prototipovi su, prosto, promenljive definisane nekom funkcijom (u stvari, u pitanju je način nasleđivanja u Javascriptu) i u pitanju je jedan od fundamentalnih principa programiranja u JS-u. Detaljno objašnjenje prototipova može se naći ovde: http://javascriptissexy.com/javascript-prototype-in-plain-detailed-language/

Ukoliko su prototipi jasni, može da se nastavi dalje ali ako i dalje imate nedoumica oko prototipova, morate da zastanete i prođete kroz još nekoliko tekstova koji takođe objašnjavaju njihovu svrhu, ulogu i upotrebljivost, obzirom da se mora razumeti njihov koncept pre nego što krenemo sa implementacijom OOP-a:

Osnove OOP-a u Javascriptu i njegovih tehnika, kao što su nasleđivanje i enkapsulacija, je jako lepo opisano, uz dosta primera, na sledećoj strani: http://javascriptissexy.com/oop-in-javascript-what-you-need-to-know/

Obzirom da smo već dobro savladali prototipove, u sledećem tekstu je opisan Javascript OOP sa osvrtom upravo na prototipove: http://alistapart.com/article/prototypal-object-oriented-programming-using-javascript

Malo opširniji, besplatan, kurs OOP-a u Javascriptu sa puno detaljnih objaešnjenja i delom interaktivan, može se ispratiti na Udacity portalu, više kao rekapitulacija do sada naučenog: https://www.udacity.com/course/object-oriented-javascript–ud015

Za kraj sledi jedan detaljno opisan primer OOP-a u JS-u: prvi deo i drugi deo.

Hteo bih samo da pomenem još jedan koncept programiranj, suprotan OOP-u, koji se zove funkcionalno programiranje. Ovaj koncept svodi dizajn aplikacije na funkcije, ali oslanja se na postojanje vise tzv. osnovnih funkcija od kojih mnoge nisu predefinisane u Javascriptu pa bi ih mi morali definisati. Funkcionalno programiranje je postalo jako popularno poslednjih nekoliko godina i iako nemam nameru da vam dajem upute kako da ga naučite (nije neophodna veština za web development) neke osnove možete pročitati ovde: https://medium.com/javascript-scene/the-two-pillars-of-javascript-pt-2-functional-programming-a63aa53a41a4#.2rmg5nlvc

Design Patterns

Pattern (obrazac, šablon) u Javascriptu je takvo rešenje nekog problema u okviru jedne aplikacije koje može lako da se iskoristi u bilo kojoj drugoj. Na pattern-e možemo gledati i kao na šablone za rešavanje određenih tipova problema: u jednoj aplikaciji rešimo neki problem i onda na osnovu tog rešenja kreiramo obrazac za rešavanje sličnih problema u drugim aplikacijama.

Ovi obrasci, šabloni, delovi koda koji mogu ponovo da se iskoriste su u stvari Javascript pattern-i.

Pattern-i nisu specifični samo za Javascript – u pitanju je tehnika prisutna u skoro svim programskim jezicima.

Sa osnovama Javascript pattern-a možete se upoznati preko kratkog članka na Tuts plusu. Kroz kratke i praktične primere videćete koji različiti tipovi patterna postoje i primere njihove upotrebe.

Još jedno početničko upoznavanje sa patternima, ovoga puta na scotch.io: https://scotch.io/bar-talk/4-javascript-design-patterns-you-should-know

Jako lepo objašnjeni JS patterni na Plural Sightu kroz video kurs, ali obratite pažnju da se pristup plaća (u trenutku pisanja mesečna pretplata sa pristupom svim lekcijama je oko 30USD mesečno): https://www.pluralsight.com/courses/javascript-practical-design-patterns (ovo preporučujem da odslušate samo ukoliko i dalje ne razumete osnove, odn. uopšte koncept patterna u Javasccriptu).

Najbolji i najpoznatiji izvor informacija o Javascript patternima je besplatna online knjiga autora Addy Osmani, koja se često osvežava novim informacijama: https://addyosmani.com/resources/essentialjsdesignpatterns/book/

Knjiga jeste nešto veća ali savetujem da se prođe cela, od početka do kraja, sem poglavlja o MV* i jQuery, sa kojima ćemo se upoznati nešto kasnije. Ne mora baš svaki primer da se proba, ali primere koje probate sami (bonus poeni ako osmislite drugi, svoj, primer nekog koncepta koji je objašnjen u knjizi) ćete najbolje i zapamtiti.

Diazajn patterni koji su opisani u narednih nekoliko linkova su tu samo da potvrde ono što ste već naučili do sada i da se ne obrukate ako ikada sretnete gospodina Osmanija i povedete priču o patternima.

Besplatan kurs za patterne imate i na Udacity-u (opciono, ukoliko vam patterni i dalje nisu do kraja jasni): https://www.udacity.com/course/javascript-design-patterns–ud989

Kratak ali jako koristan tekst koji objašnjava 4 vrste prototipa (odn. njihove instancijacije): http://callmenick.com/post/instantiation-patterns-in-javascript

Slično prethodnom tekstu ali objašnjeno mnogo opširnije i sa više detalja:

http://davidshariff.com/blog/javascript-inheritance-patterns/

Za kraj, poređenje različitih vrsta pattern-a, sa primerima: https://john-dugan.com/object-oriented-javascript-pattern-comparison/

Algoritmi

Definisani proces, sa opisom koraka i pravila, za rešavanje nekog problema se naziva algoritmom.

Bez obzira u kom jeziku programiramo, kad tad u karijeri ćemo doći u dodir sa algoritmima. Algoritmi u programiranju se uglavnom koriste u manipuaciji podacima (npr. sortiranju, pretrazi) ali i u nekim složenijim matematičkim operacijama (npr. izračunavanje faktorijela nekog broja ili pronalaženje nekog člana Fibonačijevog niza).

Ukoliko do sada niste imali prilike da se susretnete sa algoritmima, jako dobar uvod u to šta predstavljaju, kako se kreiraju i rade i koja im je funkcija imate u besplatnom kursu na Khan Academy: https://www.khanacademy.org/computing/computer-science/algorithms. Kurs objašnjava osnove algoritama i kako se isti implementiraju u programskim jezicima sa primerima u pseudo kodu (pseudo kod je kod koji ne može da se interpretira, izvrši, na računaru već mu je svrha da programeri razumeju način implementacije nekog rešenja).

Implementacija algoritama u programiranju je često takva da zahteva pisanje funkcija koje pozivaju same sebe. Na primer, funkciju za faktorijel možemo napraviti tako što joj prosleđujemo samo jedan parametar, broj čiji faktorijel tražimo, a u telu funkcije možemo da napišemo kod koji vraća rezultat koji se dobije množenjem parametra sa rezultatom funkcije za faktorijel umanjenim za 1: rezultat = parametar * faktorijel (parametar – 1), ili 5! = 5 * 4!.

Ovakve funkcije, koje pozivaju same sebe, se zovu rekurzivnim funkcijama. Čak vam i Google, ukoliko pretražujete reč “recursion” daje malu pomoć oko značenja:

Obzirom da je princip rekurzije jako bitan za implementaciju algoritama u programiranju, najbolje je da počnete sa interaktivnim kursom na Code Academy koji vas uči upravo tome: https://www.codecademy.com/courses/javascript-lesson-149/0/1

A zatim napredniji kurs rekurzije, opet na Code Academy: https://www.codecademy.com/courses/javascript-lesson-205/0/1

Jako dobar interaktivni kurs kroz algoritme u Javascriptu: https://www.codecademy.com/courses/big-o/0/1

Kolekcija većine popularnih algoritama implementiranih u Javascriptu se nalazi ovde a imate i prateću dokumentaciju.

Za kraj kolekcija detaljno objašnjenih struktura podataka i njihova manipulacija u Javascriptu: http://www.codeproject.com/Articles/669131/Data-Structures-with-JavaScript i srtrukture podataka implementirane u JS-u bez puno objašnjenja: https://github.com/benoitvallon/computer-science-in-javascript/tree/master/data-structures-in-javascript

MV*

Kada god se radi neka makar malo složenija aplikacija uvek dođe trenutak kada moramo da odlučimo kako ćemo organizovati kod na takav način da nam olakša i sam razvoj i, kasnije, održavanje i nadogradnju.

MVC

Jedan od osnovnih i najpoznatijih koncepata organizacije je, takozvani, Model – View – Controller ili, prosto, MVC, i upotrebljava se u skoro svim programskim jezicima.

MVC “deli” aplikaciju na nekoliko nivoa:

  1. Model – u ovom nivou definišemo klase koje predstavljaju osnovu podataka sa kojima radimo. Ako npr. pravimo aplikaciju za telefonski imenik, u Modelu kreiramo klasu za kontakte koja će pamtiti imena, brojeve telefona itd. (Model nivo u stvari odgovara podacima koji bi se upisivali u bazu podataka)
  2. View – ovde se definiše prikaz podataka iz odgovarajućih modela. View preuzima podatke iz modela, obrađuje ih i izbacuje ih na način koji nam je potreban (npr kombinuje ime i prezime u puno ime i izbaci formatirano po nekim pravilima koje zadamo)
  3. Controller – ovde se opisuju izmene, uglavnom inicirane od strane korisnika aplikacije, nad podacima u modelu ili view-u (npr. Dodavanje novih kontakata, njihovo brisanje ili izmena, filtriranje prikaza liste svih kontakata, itd.).

Implementacija svakog od ovih nivoa se radi kroz patterne.

Jako razumljiv tekst sa uvodom u MVC koncept, sa primerom, može se pročitati ovde: https://alexatnet.com/articles/model-view-controller-mvc-javascript

Malo veći tekst sa objašnjenjem osnova MVC-a: http://alistapart.com/article/javascript-mvc

Sledeći vodič vas, uz puno objašnjenja, vodi kroz kreiranje jedne MVC aplikacije “od nule”: http://www.awwwards.com/build-a-simple-javascript-app-the-mvc-way.html

Još jedan kratak tekst na temu MVC-a: https://agilewarrior.wordpress.com/2011/10/26/javascript-model-view-controller-example/

Takođe, knjiga o patternima iz prethodnog poglavlja ima deo posvećen MVC-u: https://addyosmani.com/resources/essentialjsdesignpatterns/book/#detailmvc

MVP

Model – View – Presenter koncept je nastao iz MVC-a i stekao popularnost sa web-om obzirom da je jasnije definisao “presentation layer” odnosno izdigao je kontroler na nivo View-a.

Osnovni koncept MVP-a u Javascriptu je objašnjen ovde: http://www.roypeled.com/an-mvp-guide-to-javascript-model-view-presenter/

MVP je takođe pomenut i u knjizi o Patternima koju sam referencirao ranije, ali se detalji tog opisa oslanjaju na Backbone JS framework (JS framework-e ćemo objasniti kasnije) pa ko nije upoznat sa istim malo teže će razumeti (dakle, ne morate ovo da čitate). U svakom slučaju, Addy-ev opis MVP-a je ovde: https://addyosmani.com/resources/essentialjsdesignpatterns/book/#detailmvp

MVVM

Poslednja varijacija koju bi ste trebali da znate je MVVM, odnosno, Model-View-ViewModel i nastao je na osnovu MVC-a i MVP-a.

Nastao je u pokušaju da se još više razdvoji UI od aplikativne (business) logike.

Jako dobro objašnjenje MVVM koncepta, sa primerima, može se pročitati ovde: https://www.safaribooksonline.com/library/view/learning-javascript-design/9781449334840/ch10s06.html

Najdetaljniji opis MVVM-a se nalazi, opet, u knjizi o pattern-ima iz prošlog poglavlja: https://addyosmani.com/resources/essentialjsdesignpatterns/book/#detailmvvm

Arhitektura

Pre početka rada na nekoj web aplikaciji najvažniji korak je pre početka samog kodiranja i ogleda se u analizi (zadatka) i planiranju (razvoja).

Već ste upoznati sa svim osnovnim konceptima organizacije aplikacije (MV*) kao i Javascript tehnikama (OOP i pattern-i) pa sve što je potrebno je to da se sve ovo primeni i prilikom planiranja.

Jako dobar uvod u arhitekturu JS aplikacija napisao je Addy Osmani i može se naći ovde: https://addyosmani.com/largescalejavascript/ U pitanju je više teorijski osvrt na planiranje velikih JS aplikacija. Ne morate ništa da učite ovde, ni vežbate, samo čitanje (sa razumevanjem) je dovoljno.

Naravno, zadnjih nekoliko godina proces planiranja web aplikacija se uglavnom svodi na izbor odgovarajućeg JS framework-a, o čemu će više biti reči u sledećem poglavlju (Javascript varanje), ali razumevanje osnovnih koncepata i tehnika nam daje dovoljno znanja da možemo prepoznati onaj framework za naš projekat koji će ne samo odgovarati zahtevima danas, već će se lako skalirati (širiti, povećavati) i u budućnosti. I koji ćemo umeti sami da skaliramo kada za to dođe vreme.

Testiranje

Jedna od stvari koju većina programera ne voli u procesu razvoja aplikacije, a neophodna je, je – testiranje.

Svaki kod koji napišemo ima neku svrhu, rešava neki problem. Kod se vremenom i menja; kako se menjaju potrebe i zahtevi, tako se razvija i unapređuje kod koji smo pisali.

Problem nastaje kada jedan deo aplikacije zavisi od određenih delova koda koje menjamo. Ukoliko je promena takva da menjamo ulazne parametre ili rezultat, imaćemo problema sa svim delovima aplikacije koji su zavisili od izvorne implementacije tog koda.

Testiranje nam pomaže da uočimo ovakve greške pre nego što novonapisani kod prebacimo u produkciju, na server.

Postoji nekoliko tipova testova:

  • Unit testovi testiraju individualne komponente koda, npr. funkcije. Ako napisemo funkciju za računanje zbira koja ima dva ulazna parametra: prvi_sabirak i drugi_sabirak, unit test će nam biti praktično funkcija koja poziva funkciju za računanje zbira, poslaće joj brojeve, npr, 3 i 5 i očekivaće da joj kao rezultat vrati broj 8. Ukoliko ikada dodamo nov ulazni parametar funkciji za zbir na početku, npr. količnik, naša Unit test funkcija će nam prijaviti grešku.
  • Integracioni testovi testiraju kako aplikacija funkcioniše kao celina
  • Funkcionalni test uglavnom potvrđuje da sve radi kako treba sa aspekta korisnika aplikacije, ne bavi se dešavanjima ispod haube.

Malo opširniji opis tipova testiranja možete pročitati ovde: https://codeutopia.net/blog/2015/04/11/what-are-unit-testing-integration-testing-and-functional-testing/

Opis osnova testiranja i njihove implementacije u javascriptu se može pročitati ovde: https://www.sitepoint.com/javascript-testing-unit-functional-integration/

Ceo kurs (besplatan) za pisanje testova u javascriptu, koji pokriva mnoge korisne tehnike, imate na Udacity-u: https://www.udacity.com/course/javascript-testing–ud549

Bilo bi dobro da znate bar malo o funkcionalnim testovima, da shvatite kako rade. U pitanju su automatizovani testovi koji se pokreću u browseru i najpoznatiji alat za to je Selenium.

Ne bih da izgubite previše vremena u funkcionalnim testovima pa bih ostavio vama da, ukoliko vas zanima, sami pronađete neki tekst ili video o tome.

Pomenuo bih samo, na kraju, koncept Test Driven Development-a, odn. TDD. Suština je u tome da pre nego što napišete kod za neku funkcionalnost, vi prvo napišete test koji je potvrđuje pa tek onda sam kod funkcionalnosti. Proces se uglavnom sastoji od tri faze: crvene, u kojoj završimo pisanje testa i test nam javlja grešku, zelene, u kojoj na brzinu napišemo kod koji zadovoljava zahteve testa, samo da isti prođe i treće faze, refactor, u kojoj dorađujemo kod do nivoa kojim smo zadovoljni.

Sve ove vrste testova se uglavnom pišu uz pomoć raznih dodataka, framework-a, pa ću vam navesti nekoliko njih u jednom od narednih poglavlja.

Server, osnove

Iako je ceo ovaj vodič fokusiran na frontend razvoj, neizbežno je da se dotaknemo i dešavanja na serveru.

Što se vas tiče, u ovom trenutku, kada pričamo o serveru, pričamo o aplikaciji koja se izvršava na računaru kome se pristupa preko neke URL adrese i koja ili šalje web dokumente čiji je sadržaj generisan/modifikovan na serveru ili, na zahtev Javascripta iz već učitane strane u nečijem pretraživaču, šalje neke podatke.

HTTP requests

U svakom slučaju, iz našeg pretraživača se inicira zahtev preko HTTP protokola (to je ono http na početku svakog URL-a i označava protokol po kome se šalje zahtev i po kome se očekuje odgovor). Malo opširniji opis HTTP protokola možete naći na ovoj strani, u pitanju je poveći tekst koji objašnjava i mnoge detalje komunikacije između klijenta (pretraživača) i servera (ne morate čitati sve, za sada je dovoljno da razumete samo tu, prvu, stranu).

Inače, često ćete se sretati sa pojmom klijent-server arhitekture. U pitanju je model aplikacija koje su podeljene na serverski deo, koji obrađuje i prosleđuje informacije i klijentski deo koji zahteva informacije. Jako dobar opis ove arhitekture imate na Wikipediji.

Zahtev koji šaljemo preko HTTP-a na neku URL adresu uvek sadrži i informaciju o tome kakva je vrsta našeg zahteva, odnosno, koju HTTP metodu koristimo u našem zahtevu.

Prema HTTP specifikaciji, postoji 9 HTTP metoda (uvek se pišu sa velikim slovima): GET, POST, PUT, HEAD, DELETE, CONNECT, OPTIONS, TRACE i PATCH.

U web razvoju se najčešće koriste GET i POST metode, ali neretko se može naleteti i na upotrebu PUT, DELETE i PATCH metoda:

  • GET metoda, kako joj i ime sugeriše, služi da kažemo serveru da želimo da preuzmemo neki sadržaj: svaki put kada ukucamo neki URL u pretraživaču, mi smo u stvari poslali GET zahtev za nekim dokumentom sa datog URL-a.
  • POST metoda služi za slanje podataka na server (na primer kad imamo kontakt formu na stranici možemo je poslati POST metodom).
  • PUT je sličan POST metodi sa tom razlikom da ako na serveru već postoji objekat kao onaj koji šaljemo, onda će postojeći podatak na serveru biti zamenjen onim koji šaljemo.
  • DELETE metodom brišemo neki podatak, dok
  • PATCH služi za izmenu (update).

Na svaki zahtev upućen serveru dobije se odgovor koji je formatiran slično HTML strani: odgovor ima header sa statusnim informacijama o odgovoru i body sa podacima koje vraća.

Primer celog odgovora možete videti ovde a nama su, za sada, zanimljiva samo dva podatka iz header-a: statusni kod, predstavljen trocifrenim brojem u prvoj liniji odgovora, i Content-type koji nam kaže u kom formatu se dostavljaju traženi podaci.

Kao što sam napisao gore, statusni kod je trocifreni broj i imamo pet grupa statusa:

  • 1xx – informativni status: zahtev je primljen i upućen na dalju obradu
  • 2xx – status koji uvek želite da vidite: zahtev je uspešno primljen i obrađen
  • 3xx – redirekcija: zahtevu traženi zahtev se sada nalazi na drugom URL-u i novi URL se šalje nazad
  • 4xx – greška na klijentu: poslat je pogrešan zahtev
  • 5xx – greška na serveru: server iz nekog razloga nije mogao da obradi poslati zahtev

Detaljnu listu svih statusnih kodova možete videti ovde: https://en.wikipedia.org/wiki/List_of_HTTP_status_codes

Content type polje nam kaže koji je tip podataka koji se šalju nazad i u kom formatu. Na primer, kada šaljemo zahtev da otvorimo neku web stranu (HTTP GET), za Content-type dobijemo text/html, zato što su podaci tekstualni i formatirani su HTML-om (zato naš pretraživač, iz koga smo poslali zahtev, dobijenu informaciju formatira za prikaz na ekranu kao html stranu).

Pored text/html podataka, najčešći tip koji ćemo sretati u zahtevima tokom web razvoja je i application/json tip (listu svih mogućih vrednosti za Content type možete videti ovde).

JSON

Druga funkcionalnost aplikacije na serveru koju smo pomenuli je slanje podataka, ne celih web strana. Podaci koje naša Javascript aplikacija prima mogu biti podaci iz baze podataka ili podaci koji su nastali kao rezultat neke obrade od strane servera.

Interakcija između Javascripta i servera i u ovom slučaju je slična otvaranju strane u pretraživaču: Javascript pošalje neki HTTP zahtev serveru a ovaj odgovori.

Deo serverske aplikacije koja komunicira isključivo slanjem podataka se zove API, od Application Programming Interface.

Podaci koje server šalje preko API-a prima Javascript u web aplikacijama. Dva najpoznatija načina ove komunikacije (klijent – API) su Remote Procedure Call (RPC) i REST, a razlike između njih možete pročitati ovde i ovde.  I obavezni tekst za razumevanje različitih arhitektura: https://www.smashingmagazine.com/2016/09/understanding-rest-and-rpc-for-http-apis/. Obzirom da je REST de facto standard danas, bilo bi dobro da prođete kroz sledeći tutorijal: https://www.tutorialspoint.com/restful/.

REST takođe nije bez nedostataka i postoje razni predlozi za bolje načine komunikacije u budućnosti; među ovim predlozima je i GraphQL kompanije Facebook (ne linkujem ništa vezano za nove predloge obzirom da još uvek nema novog standarda; GraphQL sam pomenuo samo zato što verujem da ćete naleteti na termin pa da znate o čemu se radi).

Postoji puno standarda za formatiranje podataka koji se šalju preko API-a u zavisnosti od toga da li su u pitanju tekstualni podaci ili binarni (npr. slike, itd.). Ono što je web aplikaciji (odn. Javascript-u) bitno kod primanja tekstualnih podataka, to je da format omogućava jasno razumevanje koja vrednost pripada kojoj promenljivoj. Ako šaljemo objekat iz imenika, na primer, format treba biti takav da navede i šta predstavlja neki podatak i koja je vrednost tog podatka, na primer: ime – Petar, prezime – Petrovic, telefon – 9112.

Ovako uredjeni niz podataka, spremnih za slanje preko API-a na primer, naziva se – serijalizovani podatak, odn. serijalizovani podaci.

Jedna od najpopularnijih API serijalizacija je – JSON, od JavaScript Object Notation.

Primer jednog JSON objekta možete videti ovde: https://en.wikipedia.org/wiki/JSON#Example. Kao što možete da vidite, jako je lako razumeti podatke koji se šalju ovako.

NodeJS

Sa NodeJS-om smo se na kratko upoznali ranije, kao alatom koji nam pomaže u organizaciji razvoja naše klijentske aplikacije u Javascriptu.

NodeJS je serverska platforma koja izvršava Javascript kod i rezultate šalje preko integrisanog web servera (neću za sada nigde detaljnije objašnjavati šta je to web server i kako radi; što se nas tiče u ovom trenutku web server je takođe aplikacija koja je zadužena da primi HTTP zahtev koji dolazi na server sa interneta i, ukoliko zadovoljava neke kriterijume, pošalje dalje našoj aplikaciji i da zatim pošalje nazad klijentu, npr Javascript aplikaciji, odgovor na upit).

Jako dobar opis šta je to NodeJS, koje su njegove karakteristike i mogućnosti pročitajte ovde: http://www.javaworld.com/article/2079190/scripting-jvm-languages/6-things-you-should-know-about-node-js.html

Trebali bi ste da još uvek imate instaliran NodeJS sa npm-om od ranije. Napravite neki novi folder kako bi ste probali mehanizam isporuke web strane (pretraživaču od strane NodeJS-a). Napravite novi fajl u tom folderu pod nazivom hello.js i upišite sledeće:

var http = require(‘http’);

var server = http.createServer(function(req, res) {
 res.writeHead(200);
 res.end(‘Hello!’);
});
server.listen(80);

Uđite u folder sa hello.js fajlom iz terminala i otkucajte: node hello.js

U pretraživaču otvorite sledeći URL: http://localhost/ i videćete stranu sa tekstom iz js fajla.

Kod u .js fajlu ću objasniti samo kratko zato što sledi nekoliko pravih lekcija na temu NodeJS-a, ali obratite pažnju kako ste došli do strane u pretraživaču. Ovoga puta niste otvarali direktno HTML fajl već URL.

Ovo je zato što sada Javascript kod nije obrađen od strane pretraživača, već od strane NodeJS-a, koji ga je zatim prosledio web serveru (u ovom slučaju internom web serveru) a ovaj ga je isporučio pretraživaču preko http-a.

Upravo sve ovo kaže i kod odozgo, poštujući pravila NodeJS-a:

  • Prva linija zahteva upotrebu HTTP modula dodeljujući ga promenljivoj
  • Zatim kreiramo serverski objekat u okviru HTTP-a čiji argumenti se pozivaju prilikom svakog HTTP poziva serveru
  • Naredne dve linije definišu odgovor i to statusni kod i samu poruku
  • Na kraju kažemo da server osluškuje zahteve na portu 80, to je standardni port za HTTP protokol. Da je ovde bila neka druga vrednost URL bi morao da bude localhost:NekiDrugiBroj

Prvi resurs koji preporučujem za početak učenja NodeJS-a se plaća. U pitanju su dve knjige koje vas uče od početka do nekih naprednih tehnika. U trenutku pisanja ovog teksta koštaju 9 USD i mogu se kupiti ovde: https://leanpub.com/b/node-beginner-and-craftsman-bundle

Dobar besplatni resurs koji takođe pokušava da objasni kako NodeJS radi od početka može se proći ovde: https://www.tutorialspoint.com/nodejs/nodejs_first_application.htm

Malo detaljnija objašnjenja su na ovom online kursu: https://www.codeschool.com/courses/real-time-web-with-node-js

I, za kraj, naprednije tehnike rada sa NodeJS-om: http://book.mixu.net/node/

Jedan od boljih načina da naučite da koristite NodeJS je da iskoristite Node School lekcije: http://nodeschool.io/ (obratite pažnju na Learn Your Node lekciju). Lekcije vam otkrivaju taman dovoljno da vas nateraju da sami dođete do rešenja zadatog problema što je i najbolji način da se nauči.

Baze podataka

Pored aplikativnog servera većina projekata koji barataju sa nekim podacima, radi i sa nekom bazom gde se ti podaci čuvaju.

Nećemo ići u neko detaljno proučavanje baza, samo bih da budete upoznati sa konceptom.

Baze se uglavnom sastoje od raznih tabela. Ako ste nekada koristili Excel, ili neki slični softver, znate bar neke osnove rada sa tabelama. Kada u bazi definisemo polja, njihov tip i veličinu, mi u stvari definišemo svaku kolonu naše tabele.

Postoje dve vrste baza podataka: relacione i ne-relacione (koje se, popularno, zovu i No-SQL baze).

Relacione baze su one koje dozvoljavaju definisanje odnosa među tabelama. Na primer, ako pravimo bazu za neki naš imenik, imaćemo tabelu koja pamti imena i dodatnu tabelu koja pamti brojeve telefona, zato što svaki kontakt može imati i više brojeva telefona. Svaki zapis u tabelama (zapis, odn. recordset, je u stvari svaki red u Excel tabeli) ima neki svoj jedinstveni identifikacioni broj koji koristimo da referenciramo podatke iz jedne ka drugoj tabeli. U našem slučaju imenika, mi bi smo svakom zapisu broja telefona dodali i polje koje će pokazivati na neku osobu u tabeli sa imenima.

Najpoznatije relacione baze u web razvoju su MySQL i Postgres (moj favorit iz puno puno razloga).

Ne-relacione baze su nastale iz potrebe da što pre upišemo neki objekat u bazu ne vodeći puno računa o tabelama, relacijama između njih, itd. U većini slučajeva ovim bazama se isporučuje čist JSON objekat koji se tako i pamti.

Najpoznatija ne-relaciona baza u web razvoju je MongoDB. Kao ne-relaciona baza može se koristiti i Postgres sa njegovom HStore opcijom.

Za sada ćemo baze koristiti samo u sprezi sa serverskim tehnologijama. Obzirom da već znamo neke osnove NodeJS-a, evo par vodiča za njegovo korišćenje sa bazama:

API

Pomenuo sam nešto ranije šta je to API, kakve vrste API-a postoje čak ste i napravili nekoliko servisa sami u NodeJS tutorijalima. To su sve bili lokalni servisi, naš serverski (API) i frontend deo su činili jednu aplikaciju.

Međutim, postoje aplikacije na internetu koji nude programerima svoj API kako bi integrisali njihove neke funkcionalnosti u svojim aplikacijama.

Jedan od preduslova korišćenja ovih API-a je poznavanje metoda autentikacije (authentication) i autorizacije (authorisation).

Autentikacija je proces identifikacije strane koja upućuje zahtev, bilo da je u pitanju korisnik ili neka aplikacija koja kontaktira druge servise/aplikacije.

Autorizacija je proces provere prava pristupa autentikovanoj strani: možda servis može da vas prepozna po korisničkom imenu i lozinki ali vam ne da da vidite određene informacije.

Autentikacija

Postoji nekoliko načina autentikacije web zahteva:

  1. Basic HTTP Authentication
    Ovde se prosto šalju korisničko ime i lozinka u formi korisničko_ime:lozinka ali šifrovani (enkodovani, eng. encoded) Base64 algoritmom. Na serverskoj strani se ova vrsta autentikacije uglavnom setuje na web serveru (NginX, Apache, IIS, …) ali se može napraviti i u kodu na serveru.
  2. Cookie
    Cookie je jedan od najstarijih načina da server natera naš pretraživač da snimi i sačuva neku informaciju i kasnije je proverava. Kao autentikacija se koristi tako što server, nakon provere i potvrde identiteta korisnika (korisničkim imenom i lozinkom), pošalje nazad cookie sa nekim stringom koji autentikuje korisnika i koji se šalje sa svakim zahtevom serveru (tako server zna da svaki zhtev dolazi od autentikovanog korisnika).
  3. Token
    Najpopularniji način autentikacije je korišćenje JSON Web Tokena (JWT). Princip je sličan Cookie-u samo što tokene ne skladištimo u okviru Cookie-a već koristeći LocalStorage (da bi ste razumeli šta je LocalStorage u pretraživaču, pročitajte ovo) ili SessionStorage.
    Jako dobar uvod u autentikaciju JWT-em sa NodeJS-om imate ovde: https://scotch.io/tutorials/authenticate-a-node-js-api-with-json-web-tokens (za ovaj tutorijal ćete koristiti i aplikaciju POSTman – u pitanju je aplikacija kojom možete da ručno napravite ceo header http zahteva ka nekom servisu i tako ga testirate – osnovni uved u njegovo korišćenje imate u okviru JWT tutorijala iznad). Malo više informacija i saveta o upotrebi JWT-a možete pročitati ovde.
  4. Signatures
    Kada aplikacija na nekom serveru treba da koristi servise sa nekog drugog, uglavnom se koristi ova metoda autentikacije. Podaci iz zahteva se potpišu pre slanja:od celog zahteva se, uz pomoć ključa koji poseduju i pošiljalac i primalac zahteva, kreira potpis, koji je običan string i šalju sa potpisom. Primalac pravi isti potpis od zahteva, upoređuje potpise i, ako se slažu, izvršava zahtev. Ovu metodu je malo teže koristiti na frontendu zato što bi onda ključ za pravljenje potpisa morao biti deljen korisnicima i samim tim bi se ugrozila sigurnost.
    Na NodeJS-u ovo je lako raditi uz pomoc paketa node-http-signature.
  5. Jednokratne šifre
    Uglavnom se koriste u metodama autentikacije sa višestrukom potvrdom. Na primer, pošaljemo korisničko ime i lozinku servisu, servis prepozna korisnika ali onda, kao dodatni metod provere, pošalje jednokratnu lozinku SMS-om koju moramo uneti pre odobrenja pristupa. Drugi način bi bio da imamo sa sobom neki uređaj koji, na osnovu vremenskih parametara kreira jednokratnu lozinku koja je aktivna oko jednog minuta i sa kojom, uz standardno korisničko ime i lozinku, možemo da se autentikujemo (ovaj metod praktikuje dosta banaka).

Malo više detalja o svim gore opisanim metodama, kao i njihovim manama (što je bitnije da znate) imate ovde: https://blog.risingstack.com/web-authentication-methods-explained/

Kada god budete radili sa aplikacijama koje imaju korisnike koji se moraju autentikovati, morate imati ceo proces oko upravljanja korisnicima: kreiranje korisnika sa nekom vrstom potvrde identiteta (preko email-a ili broja telefona), login mehanizam (koji, praktično, označava početak trajanja sesije – sesija je, u ovom slučaju, vreme koje provedemo dok koristimo neki servis), logout mehanizam (kraj sesije), izmena ličnih podataka.

Ovaj proces je komplikovan ne samo za programere, već i za korisnike. Upisivanje podataka pa potvrda (uglavnom) preko linka koji dođe mailom je postalo previše komplikovano za puno korisnika. Srećom, i za njih postoji rešenje.

Skoro svi korisnici interneta imaju već otvoren nalog ili na Facebook-u ili na Google-u, ili oba. Prilikom kreiranja bilo kog od tih naloga korisnici već prolaze neku vrstu provere identiteta. Takođe, oba ova servisa nude mogućnost drugim aplikacijama da ih koriste tokom procesa kreiranja naloga i/ili autentikacije.

Facebook API

Verovatno ste videli na nekim sajtovima pored login forme jos par linkova “Login with Facebook” ili “Login with Google”.

Facebook, pored autentikacije, ima API za još mnoge funkcionalnosti svog servisa. Da bi smo mogli da koristimo ovaj API, moramo prvo da registrujemo svoju aplikaciju (vidi sliku), kako bi Facebook mogao da dozvoli našim zahtevima da se izvrše, na njihovom Developer portalu i tako dobijemo jedinstveni broj naše aplikacije (Application ID), kao i token koji zajedno u paru koristimo da autentikujemo sve naše pozive Facebook API-u.

Malo više informacija o celom procesu upotrebe Facebook-a za autentikaciju možete naći ovde: https://developers.facebook.com/products/login. Brzi vodič za ovu autentikaciju kroz Javascript: https://developers.facebook.com/docs/facebook-login/web. Kompletan Software Development Kit za JS, koji pokriva sve mogućnosti FB API-a koje možemo iskoristiti kroz Javascript: https://developers.facebook.com/docs/javascript, a ako ne želite da korstite njihov SDK, možete da ispratite ovaj vodič: https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow.

Najveća prednost implementacije ove opcije je što smo tako uprostili ceo proces kreiranja korisničkog naloga, kao i login i logout mehanizme: kada korisnik dozvoli da naša aplikacija iskoristi njegov FB nalog, u odgovoru dobije i njegove osnovne, javne, informacije sa FB-a. Mi jednim klikom dobijemo npr. ime, prezime, profilnu sliku i email adresu. I, ove informacije su vec na neki način potvrđene, tako da ne moramo da šaljemo korisniku emailove potvrde. Možemo preuzeti i mnoge druge korisničke informacije ali za to bi bila neophodna posebna dozvola korisnika pa se to ne savetuje (zbog brige korisnika o bezbednosti njihovih informacija). Evo i detajnog objašnjenja koje su korisničke informacije i zašto uvek javno dostupne: https://www.facebook.com/help/203805466323736

Google API

Google takođe ima sličan mehanizam.

Dozvoljava dva načina autentikacije aplikacija:

  • Jednostavna autentikacija, kada samo upotrebom Google API Tokena možemo da komuniciramo sa Google API-em, o
  • Oauth 2 autentikacija, nakon koje možemo koristiti i razne druge Google servise

Detaljniji opis autentikacije preko Google-a Javascriptom možete videti ovde: https://developers.google.com/api-client-library/javascript/features/authentication

Lista svih Google API-a se nalazi ovde: https://console.developers.google.com/apis/library

Naravno, nakon autentikacije korisnika na nama je da implementiramo lokalno mehanizme autorizacije. Ukoliko ima potrebe za tim da, na primer, kreiramo različite grupe korisnika i definišemo šta koja grupa može da vidi ili radi u našoj aplikaciji.

Obzirom da su i FB i Google autentikacija (kao i neke druge) dosta korišćene, postoje mnoge pomoćne biblioteke koje su već rešile komunikaciju sa ovim API-ima dok je na nama samo da odlučimo šta ćemo raditi sa korisničkim podacima kada ih jednom dobijemo i da li ćemo i kako raditi autorizaciju.

Jedna od poznatijih NodeJS biblioteka, koja pokriva više načina autentikacije je PassportJS: http://passportjs.org/.

Jako dobar i detaljan tutorial za Passport je ovde (obavezno ga prođite obzirom da ćete na ovakvom primeru najlakše razumeti i proces autentikacije i kako ga implementirati): https://scotch.io/tutorials/easy-node-authentication-setup-and-local

Javascript varanje

Kao jedan od najpopularnijih programskih jezika danas (po nekima i jeste najpopularniji), Javascript može da se pohvali zavidnim nivoom resursa na internetu koji pomažu razvoj. Ponekad se stiče utisak da ne postoji kontrola ili biblioteka koja nam može pasti na pamet a da je neko nije već napravio i okačio negde na internetu.

Za početak bih pomenuo dva pokušaja unapređenja sintakse Javascripta. Kao sto CSS ima LESS i SASS, tako Javascript ima CoffeScript i TypeScript.

Unapređenje jezika

CoffeeScript je nešto stariji i cilj mu je da poboljša i olakša proces pisanja Javascripta u koji se prevodi/kompajlira. Na primer, u CoffeeScriptu ne morate da deklarišete promenljivu, samo počnite da je koristite a kompajler će je kasnije deklarisati u Javascriptu za vas.
Na zvaničnoj strani CoffeeScripta postoji dosta paralelnih prikaza koda u CoffeeScript-u i Javascript-u pa možete videti najznačajnije razlike.

TypeScript je nešto noviji i kreirala ga je kompanija Microsoft. Ono što je karakteristično za njega, to je da predstavlja nadskup Javascripta (ili, Javascript je podskup TypeScripta). Šta to znači: standardna sintaksa Javascripta je zvanično deo TypeScript specifikacije, tako da je svaki Javascript kod ujedno i TypeScript kod. TypeScript samo dodaje neke stvari preko, na primer, bolji način definisanja klasa ili opciju statičkog definisanja promenljivih (definisanja u kome definišete i tip promenljive, da li je string, celi broj, itd).

Ne mogu da vam kažem da bi ste trebali da učite i CoffeeScript i TypeScript. I jedan i drugi imaju i prednosti i mane.
CoffeScript vam olakšava pisanje Jaavscripta i to dosta, samim tim je i dosta popularan, ali sa druge strane postoji opasnost da steknete neke loše navike u pisanju standardnog Javascripta.
TypeScript sa druge strane ne olakšava pisanje Javascripta već širi mogućnosti, ispravlja neke nedostatke standardne definicije Javascripta (npr, dodaje staticke tipove) i samim tim dodaje na kompleksnosti.

Možete proći barem uvodne tutorijale za oba pa sami odlučite da li bi ste išli dalje ili ne a i značiće vam da umete da prepoznate obe sintakse kasnije.

Sjajan vodič za CoffeeScript od početka možete proći ovde: http://blog.teamtreehouse.com/the-absolute-beginners-guide-to-coffeescript

Sa TypeScript-om možete početi odavde: http://www.codeproject.com/Articles/802722/TypeScript-The-Basics. Iako ovaj tekst daje objašnjenja za Visual Studio tekst editor, možete sve raditi i sa Sublime-om, samo instalirajte TypeScript plugin.

jQuery

jQuery je jedna od najstarijih i sasvim sigurno najpoznatija Javascript biblioteka. Prva je pokušala da istovremeno olakša pisanje Javascripta (uvođenjem sopstvenog scope-a) i dodavanje raznih funkcionalnosti kroz pluginove istovremeno vodeći računa o kompatibilnosti pretraživača.

jQuery značajno olakšava manipulaciju DOM-om, CSS-om, animacijama na strani, Ajax-om.

Kada je nastao, jQuery je stekao toliku popularnost da je uticao na mnoge ljude da počnu da se bave web razvojem ali nije baš uticao na to da nauče da programiraju; razvoj se uglavnom svodio da preuzimanje raznih jQuery kontrola, njihovo ubacivanje na web strane i sitne modifikacije koda. To je rezultiralo da mnoge web strane postanu bukvalno neodržive zbog gomile nekompatibilnog Javascript koda.

Iako je jQuery napravio čitavu jednu generaciju “programera” koji se nazivaju i script kiddies, ume značajno da olakša razvoj ukoliko se koristi odmereno. Znate šta želite da uradite, imate neki cilj i ako postoji neki jQuery dodatak koji je već u upotrebi, zašto da ne pomognete sebi.

Jako dobar tutorial koji vas vodi od osnova, preko nekih naprednih tehnika jQuery biblioteke, pa sve do UI kontrola i prikaza popularnih pluginova prođite ovde: https://www.tutorialspoint.com/jquery/

Nakon toga sve što vam treba možete naći na zvaničnoj strani koja ima i detaljnu dokumentaciju kao i bazu pluginova.  

Frameworks

Zahvaljujući svojoj popularnosti, Javascript može da se pohvali i velikim brojem šablona na nivou celog (frontend) projekta. Takav šablon koda koji pomaže organizaciju razvoja jedne aplikacije, i/ili dodaje funkcionalnost, naziva se – framework-om.

Većina Javascript framework-a prati neku MV* organizaciju koda zato što tako najlakše pravimo veće aplikacije.

Obavezno prođite detaljno i naučite sve vezano za AngularJS (uključujući i Ionic i Electron) i React & Redux (uključujući i React Native). Što se tiče ostalih frameworka, prođite makar po jedan uvodni/početni vodič, da makar vidite o čemu se radi pa nakon toga sami odlučite da li želite da nastavite dalje ili ne. Vue.js dobija na popularnosti u poslednje vreme pa možda ne bi bilo loše da mu posvetite takođe malo više vremena.

AngularJS

Trenutno najpopularniji JS framework je AngularJS. Napravio ga je, i održava ga, Google. AngularJS je “rešio” probleme data binding-a (sinhronizacija između modela i view-a) i dependency injection-a i tako prokrčio sebi put slave. Više o tome kako je nastao AngularJS, zašto i kako radi, saznajte ovde: https://docs.angularjs.org/guide/introduction

Trenutno su dve verzije ovog framework-a aktuelne: v1.x i v2.x.

Angular v1 je originalna verzija i najzastupljenija. Iako je Google zvanično prestao da razvija ovu verziju (održavanje je otvoreno za javnost sada), najveći broj Angular sajtova pokreće upravo ova verzija pa bi ste morali znati kako funkcioniše.

Angular v2 je nova verzija, nastala na iskustvima upotrebe prethodne. Osnovna razlika je što v2 umesto standardnog Javascripta koristi Typescript, ali činjenica da je Typescript nadogradnja JS-a nam dozvoljava da Angular v2 koristimo i sa postojećim, standardnim, Javascript kodom. Iako je u početku v2 bila dosta osporavana kako zbog Typescripta tako i nekih arhitekturalnih rešenja, sve se više koristi i definitivno će u dogledno vreme u potpunosti zameniti v1.x u novim projektima.

Zbog popularnosti AngularJS-a bi ste morali da ga naučite, i to obe verzije: staru da bi ste mogli da radite na nekim postojećim, starim, projektima, a novu da bi ste je mogli upotrebljavati na novim projektima.

AngularJS v1:

AngularJS v2:

Ukoliko žeite da nastavite sa učenjem Angulara, ovde imate listu raznih vodiča i objašnjenja: https://porter.io/github.com/PremiseHealth/AngularJS2-Learning

Ionic

Jedna od velikih prednosti AngularJS frameworka je mogućnost da upakujete vašu AngularJS aplikaciju u nativnu mobilnu aplikaciju, koju svaki korisnik Android ili iOS telefona može preuzeti iz svog App store-a.

To se radi uz pomoć Ionic framework-a.

Za početak druženja sa Ionic-om, prođite osnovni, veoma kratki, tutorijal ovde: http://ionicframework.com/getting-started/, odn. za Angular v2 ovde: http://ionicframework.com/docs/v2/getting-started/tutorial/ (instalacija Ionic-a v2 je opisana ovde)

Pravljenje mobilne aplikacije “od nule”: http://gonehybrid.com/build-your-first-mobile-app-with-ionic-2-angular-2/

Kako da se korisnik vaše mobilne aplikacije uloguje preko FB-a: https://auth0.com/authenticate/ionic2/facebook

Kako da podelite nešto iz vaše aplikacije na društvene mreže: https://javebratt.com/social-sharing-with-ionic/

Ubacivanje Google mapa: http://stevemichelotti.com/integrate-angular-2-google-maps-into-ionic-2/

Pravljenje mobilne aplikacije za čitanje RSS feed-ova: https://devdactic.com/rss-reader-ionic2/

Electron

ElectronJS je način da od vaše Javascript aplikacije napravite pravu desktop aplikaciju za bilo koju platformu (Mac, Windows, Linux).

Iako ova tehnologija nije striktno vezana za AngularJS, sa prolaskom Angular tutorijala već znate da napravite frontend aplikaciju a Electron vam daje sada mogućnost da tu istu aplikaciju upakujete za desktop.

Za početak, prođite kroz zvaničan Quick start vodič, čisto da steknete osećaj kako radi i šta se dobija na kraju.

Prvi vodič koji vas vodi kroz pravljenje Electron desktop aplikacije uz Angular možete proći ovde: https://scotch.io/tutorials/creating-desktop-applications-with-angularjs-and-github-electron

Slično, samo sa Angular 2: https://auth0.com/blog/create-a-desktop-app-with-angular-2-and-electron/

Vue.js

Jedan od novijih framework-a, koji stiče sve veću popularnost je Vue.js. Vue je više UI biblioteka, napisana sa ciljem da olakša kreiranje i upravljanje interfejsom aplikacije ali uz neke dodatne alate postaje pravi framework.

Jako dobar tekst koji objašnjava osnovne mogućnosti i prednosti Vue.js-a možete pročitati na blogu njegovog kreatora: http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/

Jako dobar tutorijal koji vas vodi kroz osnove možete proći ovde: https://scotch.io/tutorials/build-an-app-with-vue-js-a-lightweight-alternative-to-angularjs

Još jedan početnički ali sa malo ozbiljnijim zadacima: https://www.sitepoint.com/getting-started-with-vue-js/

Najkompletniji vodič se nalazi na matičnom sajtu i vodi vas kroz sve aspekte Vue.js-a: https://vuejs.org/v2/guide/

React & Redux

Ni React ni Redux ne zadovoljavaju kriterijume frameworka sami po sebi, ali zajedno čine sasvim dobru kombinaciju.

React je biblioteka koju je napravio Facebook i koja je prepoznatljiva po konceptu virtuelnog DOM-a. Može se kombinovati i sa nekim drugim frameworkom. Sa React-om je najbolje početi vodičem sa zvanične strane: https://facebook.github.io/react/tutorial/tutorial.html.

Početnicima će možda biti malo teže da savladaju koncept Redux-a. U pitanju je upravljanje stanjima u aplikaciji, što značajno olakšava razvoj na velikim projektima. Redux se često koristi sa React-om i njegovim virtuelnim DOM-om ali nisu zavisni jedan od drugoga. Dobar uvod u razumevanje Redux-a možete naći u dvadesetak besplatnih video vodiča ovde: https://learnredux.com/

Tekst koji početnicima sa React-om i Redux-om objašnjava neke osnovne koncepte kojih moraju biti svesni prilikom rada: https://camjackson.net/post/9-things-every-reactjs-beginner-should-know

React&Redux tutorial koji objašnjava malo detaljnije osnove njihovog funkcionisanja zajedno: https://www.codementor.io/reactjs/tutorial/intro-to-react-redux-pros

Prva, jednostavna, aplikacija sa React-om i Redux-om, od početka do kraja: https://reactjsnews.com/your-first-redux-app

I jedna dosta složenija, takođe jako detaljno objašnjena: https://spapas.github.io/2016/03/02/react-redux-tutorial/

Puno objašnjenja se u tutorijalima iznad ponavljaju, ali obzirom da su različite aplikacije i samim tim i primena principa koji se objašnjavaju više puta je takođe različita, od toga možete imati samo koristi.

Takođe veća aplikacija, sa uključenim serverskim delom i detaljnim objašnjenima: https://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html

Još jedna veća aplikacija, objašnjena od nule, sa detaljnim objašnjenima svakog koraka: http://cabin.getstream.io/

Za kraj tutorijal celog toka kreiranja aplikacije, uz kreiranje okruženja, pisanja testova, itd: https://github.com/verekia/js-stack-from-scratch

React Native

Kao što Angular ima Ionic i Electron za pravljenje nativnih aplikacija za mobilne i desktop operativne sisteme, tako i React ima – React Native.

Uz jednu jako bitnu razliku: dok Ionic pakuje web aplikaciju sa nekom svojom verzijom pretraživača na telefonu (koji pored toga što izvršava vašu web aplikaciju pravi i vezu između JS-a i hardvera telefona, pa možete preko javascript-a da upravljate npr. kamerom, itd.), React Native (RN) pravi pravu nativnu mobilnu aplikaciju.

Neke od najpoznatijih mobilnih aplikacija rađene uz pomoć RN-a su: Facebook, Instagram, AirBnB, itd.

Za početno upoznavanje tehnologije prođite kroz Getting started vodič na matičnoj strani: https://facebook.github.io/react-native/docs/getting-started.html#content. Na početku strane možete odabrati za koju mobilnu platformu bi ste pravili aplikaciju kao i na kom operativnom sistemu radite (Windows, Mac, Linux) – ukoliko radite na Windowsu ne morate da koristite navedeni package manager Chocolatey: NodeJS već imate instaliran dok Python 2 možete preuzeti i instalirati sa zvanične strane.

Kao sledeći korak bi ste trebali proći kroz tutorijal pravljenja jedne mobilne aplikacije. Iako i zvanična strana ima svoj tutorijal, preporučujem vam da, umesto njega, prođete kroz drugi koji je mnogo opširniji, pokriva više detalja i daje bolja objašnjenja: http://www.reactnativeexpress.com/

Na strani zvanične dokumentacije imate i veliki broj linkova sa dodatnim objašnjenjima raznih mogućnosti upotrebe React Native-a.

Za kraj, jako dobar biolerplate za RN za početnike, sa čistim kodom i puno objašnjenja: https://github.com/bartonhammond/snowflake

Meteor

NAPOMENA: ukoliko ste već prošli sve vodiče/tutorijale za Angular (uključujući i Ionic i Electron) i React (uključujući React Native) ne morate prolaziti detaljno kroz sve linkovane tutorijale za Meteor. Prvi vodič za pravljenje jednostavne Chat aplikacije je dovoljan. Ukoliko vam se dopadne – prođite i ostatak.

Meteor je pokušaj da se napravi jedinstveni framework koji spaja frontend (JS) i Backend (NodeJS) sa MonoDB-om i aplikacije se mogu pisati za desktop, web i mobilne uređaje.

Ukoliko ste već savladali AngularJS, možete ga kombinovati sa Meterom.

Za početak, prođite kroz proces pravljenja jednostavne chat aplikacije: https://www.codementor.io/meteor/tutorial/getting-started-with-meteor-build-sample-app Tutorial kreće od osnova, instalacije, podešavanja, itd.

Još jedan vodič kroz pravljenje Meteor aplikacije, sa dosta objašnjenja: https://www.toptal.com/meteor/building-real-time-web-applications-with-meteor

Matična strana projekta ima nekoliko tutorijala koji vas vode kroz osnovne i neke napredne tehnike razvoja:

Meteor walkthrough serija video vodiča: https://www.youtube.com/channel/UC4-DIsbr23Z-rPe_F4JAH9w

Kompletan vodić kroz Meteor može se naći u zvaničnoj dokumentaciji: https://guide.meteor.com/

Backbone

Još jedan popularni JS framework je Backbone. Backbone je lightweight MVP framework napravljen nad osnovom Underscore.js-a.

Obzirom da je dosta manji od AngularJS-a, dosta je i brži, naročito sa većom količinom podataka u pretraživaču (ovo, naravno, zavisi i od veštine programera).

Ne morate da prolazite tutorijale za Backbone ukoliko ne želite ili smatrate da vam neće biti potrebni.

Ukoliko bi ste da vidite kako izgleda razvijati aplikaciju u Backbone-u (jedino bi ste tada i mogli da odlučite da li vam je OK ili ne), dobar tutorial, koji vas vodi kroz sve bitne detalje, možete naći ovde: http://adrianmejia.com/blog/2012/09/11/backbone-dot-js-for-absolute-beginners-getting-started/

Još jedan sličan vodič, sa malo više detalja: http://rahulrajatsingh.com/2014/07/backbone-tutorial-part-1-introduction-to-backbone-js/

Standardni Tutorialspoint kurs: http://www.tutorialspoint.com/backbonejs/

I najiscrpniji izvor informacija o Backbone-u je još jedna besplatna knjiga Addy Osmani-a: https://addyosmani.com/backbone-fundamentals/

Ostali

Ima još puno dobrih JS framework-a ali nije svrha ovog celog vodiča da prođete detaljno sve. Navešću samo još nekoliko značajnih sa linkovima do matičnih stranica pa ukoliko vas neki od njih zaintrigira, već imate dovoljno znanja da ih možete probati i iz zvanične dokumentacije.

EmberJS – framework sličan AngularJS-u, nekada su se borili za mesto najpopularnijeg. Iako je ovu bitku izgubio, u poslednje vreme ponovo raste trend njegove upotrebe.

Knockout – jedan od retkih MVVM framework-a sa ciljem da olakša UI deo u Javascriptu.

CanJS – fokusan na brzinu, stabilnost i sigurnost. CanJS daje veliku slobodu programeru u organizaciji arhitekture aplikacije što može biti i mač sa dve oštrice – obzirom da nema ovih pravila, nije lako raditi sa velikim timom na velikoj aplikaciji u CanJS-u. Jedna od većih mana CanJS-a je što su, kroz istoriju često potpuno odbacivali neke ključne delove specifikacije i prelazili na potpuno nove bez perioda podrške za aplikacije koje koriste te stare tehnologije.

Za kraj, sjajan servis koji omogućava pregled velikog broja JS framework-a sa genijalnom idejom: u svakom framework-u su napravili istu ToDo aplikaciju čijem kodu imate pristup. Tako možete iz prve ruke videti kako funkcionišu osnove svakog od prikazanih framework-a. U pitanju je ToDoMVC.

Ostale biblioteke

Do sada smo pomenuli samo jQuery kao biblioteku koju možemo iskoristiti za ubrzanje razvoja. Ima ih još puno i samo ću navesti nekoliko sa njihovom osnovnom namenom.

D3.js – kada želite da vizualizujete neke podatke, prikažete ih kroz razne grafikone npr, D3 je, prosto, standard.

Mocha & Chai & Sinon – omogućavaju jednostavno testiranje vaših aplikacija. Primer TDD-a sa Mocha-om možete naći ovde: http://jrsinclair.com/articles/2016/gentle-introduction-to-javascript-tdd-intro/

Još par biblioteka za testiranje koje zaslužuju da budu pomenute:

  • JEST, napravljena u Facebook-u. Neki kažu da je brža od Mocha, neki da nije 🙂
  • Protractor, uglavnom se koristi sa AngularJS ali i sa React-om. Omogućava end to end testiranje uz upotrebu Seleniuma
  • Istanbul, sa dodatkom interfejsa za terminal kroz nyc

ReactiveJS – biblioteka koja nudi neke mogućnosti framework-a ali ipak to nije. Ubrzava rad na web aplikacijama tretirajući njihove strane kao kombinaciju template-a i podataka. Napravljen je sa idejom da omogući i manje iskusnim programerima da naprave optimizovanu web aplikaciju.

Sigurnost

Kada god postavimo neki web sajt ili aplikaciju na internet, uvek moramo da pretpostavimo da će postati meta nekog napada, bilo da je cilj da se naruši dizajn ili, još gore, da se pristupi serveru na kome hostujemo.

Pre nego što pređem na sigurnosnu praksu u razvoju web aplikacija hteo bih da skrenem pažnju na način kako će naše strane biti isporučene korisnicima.

Uvek insistirajte da vaša web aplikacija bude dostupna isključivo preko HTTPS protokola. U pitanju je nadgradnja HTTP protokola koja enkriptuje podatke koji se šalju od servera do pretraživača. Ne bih da ulazim u detalje toga kako to funkcioniše, ali da bi funkcionisalo na web server se trebaju instalirati sertifikati za domen sa koga će naša web aplikacija biti dostupna. Ti sertifikati mogu da se kupe ili da se preuzmu besplatno sa Let’s Encrypt ili StartCom.

Kao uvod u web security pogledajte video predavanja koje je održao jedan od programera Google Chrome pretraživača: https://mikewest.org/2013/09/frontend-security-frontendconf-2013

I jedan tekst na temu najznačajnijih tema iz oblasti sigurnosti u web razvoju: https://github.com/vasanthk/web-security-basics

Konrektni predlozi u okviru HTML-a za veću sigurnost: https://code.tutsplus.com/articles/client-side-security-best-practices–net-35677 i isto to samo dosta opširnije na OWASP strani: https://www.owasp.org/index.php/HTML5_Security_Cheat_Sheet

I za kraj, sladovi sa predavanja o web sigurnosti koji daju više konkretnih tehnika za pisanje sigurnijeg JS koda: http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.298.4235&rep=rep1&type=pdf

Finalni projekat

Ukoliko ste prošli sve kurseve, vodiče i tutorijale do sada, iskreno čestitam.

Nadam se da vam je ovaj vodič kroz vodiče za web programiranje pomogao da naučite ono što ste i hteli.

Obzirom da ovo nije škola, ovde nećete dobiti diplomu niti sertifikat na kraju. Vi sami ste svesni znanja koje posedujete i nadam se da ćete se uvek ponašati u skladu sa tim (nastavite učenje pre traženja posla ili traćite posao i nastavljate sa učenjem). Sve što ste uradili do sada obavezno čuvajte na nekom javnom repozitorijumu (npr. Github), uključujući i ovaj projekat. Iako nemate radnog iskustva, imate dokaz šta ste naučili do sada i to vam može biti od pomoći prilikom traženja posla kasnije.

Do sada ste prošli puno tutorijala koji su vas vodili kroz pravljenje celih aplikacija u raznim tehnologijama. Za kraj vam preporučujem da napravite jednu aplikaciju bez vodiča koji će vam objašnjavati šta, kada i kako da radite. Dobićete opis funkcionalnosti i sami ćete doneti odluke o svemu: tehnologijama koje ćete koristiti, alatima, bibliotekama, frameworku, itd.

Baš kao kada bi ste dobili zahtev od nekog klijenta.

Kažu da je imitacija najiskreniji način pohvale (izvor). Tako i ja neću izmisliti neku novu aplikaciju, već ću opisati nešto što već postoji samo sa nekim izmenama.

Zamislite da ste pristali da budete partner u poslu osobi koja vam je dala osnovnu funkcionalnu specifikaciju, tako da ste sami odgovorni da istu dopunite svojim idejama.

Zahtevi

Potrebno je da napravite aplikaciju za upravljanje kratkim beleškama i zadacima, po uzoru na Google Keep.

Dostupnost: aplikacija mora biti dostupna na web-u, u poslednjim verzijama browsera Chrome i Firefox kao i Internet Explorer-u Edge+ (ukoliko radite na Windowsu) odnosno Safariu (ukoliko radite na Mac-u), kao i na bar jednoj mobilnoj platformi (Android ili iPhone, u zavisnosti od toga koji telefon imate; ukoliko imate oba – pravite za oba, nije prevelika razlika a značiće vam iskustvo).

Pre počettka rada prvo pročitajte sve zahteve do kraja i trudite se da razumete aplikaciju kao celinu. Kada počnete da radite, postoji nekoliko načina kako krenuti ali moj savet je da u ovom slučaju prvo napravite kompletan korisnički interfejs za web, sve strane i kontrole, pa tek onda radite na serverskom delu i povezanim funkcionalnostima interfejsa i, na kraju, mobilnu aplikaciju/e.

Korisnici

  • Aplikacija je dostupna isključivo autentikovanim korisnicima
  • Korisnici mogu da kreiraju svoj nalog bilo unosom informacija o sebi (ime, prezime, email adresa i telefon, uz email potvrdu) ili korišćenjem eksternih servisa za autentikaciju (Facebook, Google, Twitter).
  • Pored opisanih potrebnih informacija za kreiranje naloga, korisnik ima i sledeće podatke koje može naknadno uneti (ili se isti preuzmu sa eksternih servisa): profilnu sliku i vremensku zonu
  • Svaki korisnik može imati više email adresa i svaki nalog može biti povezan na više različitih eksternih servisa (npr. Svoj nalog u aplikaciji možete povezati i sa vašim Google nalogom, Facebook i Twitter nalogom i možete upisati i dodatne email adrese ukoliko ih imate i koristite)

Beleške

  • Osnovna funkcionalnost aplikacije je mogućnost da korisnici upišu i sačuvaju beleške
  • Postoji tri tipa beleški koje se mogu upisati: tekstualna beleška, lista sa zadacima (to-do list) i slika. Svaka beleška može imati i naslov, ali isti nije obavezan. Slika se može dodati i na tekstualnu i na belešku sa listom zadataka, ali tekstualna i beleška sa zadacima se ne mogu mešati.
  • Na kojoj god platformi da se beleška unese (web, mobile), biće dostupna odmah i na svim drugim.

Akcije nad beleškama

Već napisana i snimljena beleška se može:

    • selektovati/odabrati: klik na belešku istu izdvaja u odnosu na druge i prebacuje u mod u kome je moguće menjati njen sadržaj
    • Može joj se dodeliti postojeća ili nova ključna reč (tag, odn. label) ili više njih. Ovo će se koristiti za filtriranje prikaza beleški: korisnik će moći da odabere da vidi samo one beleške koje imaju pripojenu neku ključnu reč.
    • Može joj se dodeliti neka ključna boja kako bi se dodatno izdvojila u odnosu na ostale beleške na strani
    • Može se arhivirati, obrisati ili kopirati u novu
    • Može se dodeliti jedan od tri statusa: nova, u toku, gotovo. Svaka nova beleška automatski dobija status “nova”.
    • Beleška se može podeliti sa nekim drugim korisnikom. U ovom slučaju:
      • Svaki korisnik sa kim je podeljena beleška ima pravo da vidi i menja tu belešku
      • Ukoliko pozvani korisnik obriše belešku, on je samo sebe izbrisao iz liste korisnika sa kojima je beleška podeljena. Ostali korisnici i dalje vide belešku.
      • Ukoliko kreator obriše belešku, ista se briše svima (kreator treba da dobije obaveštenje o ovome pre brisanja beleške)
      • Kreator beleške može da povuče poziv za deljenje, odn. da ukloni nekog pozvanog korsnika iz liste
      • Svaka podeljena beleška mora biti prikazana tako na strani da je korisniku očigledno da je u pitanju deljena beleška
      • Korisnici se pozivaju unosom email adrese pozvanog korisnika. Ukoliko je pozvana osoba već korisnik aplikacije, dobiće email obaveštenje da je sa njim podeljena beleška. Ukoliko nije korisnik, dobiće istu informaciju sa pozivom da se registruje. Ovako pozvani korisnici ne moraju da potvrđuju email adresu u procesu registracije. Nakon što pozvani korisnik klikne na link za kreiranje naloga u emailu, doći će na stranu na kojoj će moći ili da kreira novi nalog (manuelno ili preko eksternih servisa) ili da se uloguje na neki svoj postojeći, sa drugom email adresom. U ovom poslednjem slučaju se na korisnikov nalog dodaje nova email adresa, ona na koju je dobio notifikaciju za deljenje.

Korisnički interfejs

  • Aplikacija ima naslovnu stranu koja opisuje servis i koja je dostupna neautentikovanim korisnicima. Na istoj se nalaze mehanizmi za login i za kreiranje naloga.
  • Interfejs za ulogovane korisnike je na jednoj strani (sve opcije i dodatne kontrole ili strane se prave kao popup) i sastoji se od:
    • Header-a, na vrhu strane. U pitanju je uži pojas u kome se nalaze:
      • Dugme za otvaranje levog side-bara sa raznim relevantnim akcijama nad beleškama (opisano kasnije, dole)
      • Naziv/logo aplikacije (smislite sami 😉 kada smislite naziv, logo možete kreirati ovde)
      • Polja za pretragu filtriranjem. Pisanjem u ovom tekst polju, sa svakim otkucanim slovom, sakrivamo sve one beleške na strani koje nemaju otkucana slova u svom sadržaju
      • Izbora načina prikaza beleški: list (beleške su poređane u jednoj centralnoj koloni) i mozaik (više kolona, biće objašnjeno naknadno)
      • Imena i profilne slike ulogovanog korisnika koji, kada se klikne na njih, otvaraju popup sa korisničkim podacima (i linkovanim eksternim servisima) koji se mogu menjati
    • Centralnog dela u kome:
      • Pri vrhu imamo kontrolu za kreiranje novih beleški (za sva tri tipa beleški: tekst, lista zadataka, slika sa upload-om ili upisom URL-a slike sa interneta)
      • Ispod je prikaz postojećih beleški poređanih u jednoj (ukoliko je odabran prikaz u listi ili je web strana otvorena na jako uskom ekranu) ili više kolona (mozaik prikaz) iste širine (broj kolona je promenljiv u odnosu na širinu ekrana) ali svaka beleška ima različitu visinu u zavisnosti od količine sadržaja. Osnovno uređenje beleški je s’leva na desno, odozgo naniže, tako da se poslednja beleška uvek stavlja u gornji levi ugao mozaika beleški (odnosno, u listi sa jenom kolonom je na vrhu kolone). Beleške prikazane na strani imaju sledeće karakteristike:
        • Osnovni prikaz čini sadržaj (uključujući naslov), ključnu boju, status, podatak o tome da li je u pitanju deljena beleška
        • Sve mogućnosti za akcijama nad beleškom se dobijaju kada se pređe mišem preko nje
        • Beleške se mogu prevlačiti i menjati im se redosled (drag and drop)
        • Prikaz svih tekstualnih beleški (uključujući i zadatke) mora biti različit u zavisnosti od količine teksta. Beleške sa manje reči moraju biti napisane većim fontom, a one sa više teksta manjim fontom. Dimenzije prikazane beleške zavise od prostora koji ovako napisan sadržaj zauzima. Sami smislite pravila za veličine fonta u zavisnosti od količine teksta.
    • Levog side-bara čiji prikaz može biti uključen ili ne preko header-a i koji se sastoji od liste filtera za prikaz beleški. Prvi filter je “sve beleške” a ostali su definisane kljčne reči. Poslednja stavka u listi je akcija za kreiranje nove ključne reči. Klikom na bilo koju ključnu reč prikazujemo beleške koje imaju dodeljenu tu ključnu reč.

Slobodno možete da koristite Google Keep za ideje oko upotrebe korisničkog interfejsa. Ovde i jeste ideja da se kopira funkcionalnost nekog postojećeg i poznatog servisa ali obratite pažnju da neke gore opisane funkcije ne postoje na Keep-u.

Napomena za mobilne aplikacije: uvek se trudite da akcije koje možete tako – uradite na način koji je prirodan na toj platformi (dugo držanje beleške će je selektovati, koristi se sistemsko dugme za opcije, prilikom poziva korisnika za deljenje dajte mogućnost izbora korisnika sa email adresom iz imenika, prilikom upisa beleške sa slikom dajte mogućnost da se slika preuzme i sa kamere, ne samo iz galerije, itd.).

I, to je to.

Vaš klon Google Keep aplikacije ne možete baš da okačite negde online kao servis dostupan svima (za sebe, svoju porodicu i prijatelje – zašto da ne; možete besplatno hostovati serverski deo vaše aplikacije na primer ovde) ali ukoliko ste na kraju sami zadovoljni rezultatom – to je sasvim dovoljno. Cilj finalnog zadatka je da naučite da sami donosite odluke tokom izrade i da sami tražite preko interneta dodatne informacije za detalje koje ne znate (ne stidite se toga, to svi rade).

Čestitam, postali ste web programer! 🙂

Šta dalje

Ukoliko se osećate sigurno sa onim što ste naučili do sada, možete krenuti sa traženjem posla. U Srbiji najpopularnije liste su trenutno na StartIt-u i Infostud-u.

Ako vas zanima rad od kuće za strane kompanije, ovde imate listu većine popularnih sajtova za traženje posla koji se mogu raditi od kuće: https://github.com/lukasz-madon/awesome-remote-job#job-boards (na samoj strani imate još gomilu dobrih resursa za rad od kuće).

Ukoliko zaglavite negde tokom rada na nekom projektu, pogledajte da li matična strana alata/tehnologije sa kojom radite ima i support deo. Ukoliko i tada ne možete da nađete rešenje, uvek vam je tu StackOverflow, trenutno najpopularniji online board za rešavanja svakojakih problema, koji ima i deo posvećen Javascriptu.

Takođe, trudite se da pratite blogove tehnologija (i njihovih autora) koje koristite.

Share-ujte ovaj članak ukoliko Vam se dopada i mislite da će nekome pomoći 🙂