„Async/Await“ sintaksa za bolje „Promise“

by

Uvod

asyn/await

Korišćenje samo jednog promisa je jasno i jednostavno, medjutim kada se program zakomplikuje asinhronom logikom, rad sa promisima se rapidno otežava. Sa ES2017 standardnom je stigla i nova sintaksa „async/await“, koja olakšava rad sa promisima, i omogućava jednostavnije predstavljanje serije asinhronih promisa. Korišćenje „async/await“ sintakse nam omogućava da višestruke medjusobno zavisne asinhrone radnje, prikažemo čitljivije i tako izbegnemo tzv. „promise hell“. Treba napomenuti da se uz async funcije ne mogu koristiti „obične“ callback funkcije.

„Async/await“ sintaksa ne isključuje promise, nego menja način „konzumacije“ promisa. Async/Await sintaksa nam omogućava da pišemo asinhroni kod prema sekvencijalnom redosledu izvršavanja tako da liči na sinhroni kod.

Chrome DevTools

by

Uvod

chrome devtools

U ovome članku je napravljen pregled specijalizovanih alata u okviru „Chrome“ browsera, pod nazivom „DevTools“. Chrome DevTools su nezamenjivi set alatki namenjeni web developerima kao pomoć u svakodnevnom radu. Kroz DevTools je omogućen pregled HTML stranice i rad sa DOM elementima, kao i pristup svim CSS svojstvima elemenata.
U ovom paketu alata je naručita pažnja posvećena delu za debagovanje JavaScript koda. Koristeći ovoj alat je omogućeno definisanje raznih načina prekidanja izvršavanja progamskog koda (tzv. breakpoint), što znatno olakšava rad web developerima pri otklanjanju bagova na vebsajtovima. Pri svakom prekidu je omogućen uvid u vrednosti promenjiva kao i njenih oblasti definisanosti.
Pored ovoga postoje sekcije vezane za praćenje performansi web aplikacije, kao i pregled razmene podadaka izmedju klijenta i servera.

Read more

Webpack (osnove)

by

Uvod Prednosti i mane modularnog programiranje Organizacija koda samo u jednom fajlu, čini programiranje veoma komplikovanim. Iz tog razloga se u JavaScript-u kao i u mnogim drugim programskim jezicima, programski kod deli u manje celine tzv. module. Podela se vrši prema odredjenoj šemi, koja omogućava dobru organizaciju i olakšava vizuelnu i strukturnu preglednost. Pri deljenju … Read more

Tipovi podataka u JavaScriptu

by

Podela tipova podataka

tipovi podataka u javascriptu

U okviru JavaScript-a ima 7 vrsta podataka. Podaci mogu da se podele u dve grupe:
a) Podaci koji čuvaju primitivni tip vrednosti:

  • 1) string
  • 2) number
  • 3) boolean
  • 4) undefined
  • 5) null
  • 6) symbol (ES2015)

b) Podaci koji čuvaju referentni tip vrednosti:

  • 7) objekat
    • array
    • Map (ES2015)
    • WeekMap (ES2015)
    • Set (ES2015)
    • WeekSet (ES2015)

Read more

npm & yarn osnove

by

Uvod

npm vs yarn

Package manager je alat zadužen da automatizuje procese vezane za rad sa paketima. Softverski paketi se nalaze u arhivnim fajlovima, i svaki paket sadrži meta-data koji opisuju dati softver (kao što je naziv softvera, verzija i lista svih dependencies).
Najčešća primena package manager-a je kod instaliranja paketa i njihovih dependecies. Package manager eliminiše potrebu za ručnim instaliranjem softvera. Pored toga package manager može da se bavi ažuriranjem, konfigurisanjem i na kraju uklanjanjem svih tih komponenti.

Najveći package menadžer je npm, koji je primarno pravljen za node.js (serversko) okruženje, stoga da bi radio u browser-u potrebno je da se pored njega koristi module bundler (browserify ili webpack). Yarn package manager je „novi klinac je u gradu“, facebook-ovo čedo, može da koristi sve npm pakete i ima veoma sličnu sintaksu ali se smatra da brže izvršava naredbe od npm-a.

Read more

Stilizovanje i pozicioniranje teksta u kontejneru sa CSS-om

by

Svojstvo „overflow“ Svojstvo overflow se koristi za definisanje ponašanja sadržaja koji je veći od samog kontejnera u kome se nalazi. Ovo svojstvo nije rezervisano samo za stilizovanje teksta nego za sve vrste sadržaja, mada se za tekst često koristi. Mogući su sledeći slučajevi: „visible“ – sadržaj je vidljiv čak i preko granica kontejnera (podrazumevano ponašanje) … Read more

JS snippets razno (tips & tricks)

by

Pozajmljivanje metode iz drugog objekta

Metode call, apply i bind se koriste da definišu značenje rezervisane reči this, medjutim to nam takodje omogućava da sa promenom značenja „this“ objekat može da „pozajmi“ metodu drugog objekata, kao u sledećem primeru:

Čest je slučaj da se pozamljuje neka od metoda Array-a koji su ugradjenih u njegov prototype objekat.

Na ovaj način smo pozajmili Array-ovu metodu slice nekom objektu.

Read more

Simbioza JavaScripta i njegovog okruženja

by

Uvod

asnhorni JS okruzenje

JavaScript je skriptni jezik, stoga je neophodno da se „smesti“ u neki kontejner koji bi mu omogućio rad, taj kontejner se zove JS Runtime Environment (srp. okruženje). Postoje dva tipa okruženja: browser (za rad na klijentu) i node.js (za rad na serveru). Runtime Environment čine :

  1. JS Engine/Runtime
    • Heap
    • Stack
  2. External API
  3. Queue
  4. Event loop

OBJAŠNJENJE:
JavaScript je „single thread“ programski jezik i on sam ne može da izvršava više istovremenih paralelnih radnji. Ipak izvršavanje više paralelnih radnji (tzv. asihrono izvršavanje) je moguće uz medjusobnu saradnju JavaScript-a i njegovog okruženja. Više o ovome prolitajte u članku „Princip rada asinhronog JavaScript-a“.

Read more

Promise (osnove)

by

Uvod


pyramid of doom

U JavaScript-u postoji izraz za deo koda sa ugnježdenim callback funkcijama pod nazivom „callback hell“ ili „pyramid of doom“. Debagovanje takvog programskog koda pa čak i samo razumevanje je veoma otežano. Sa ES2015 standardom je došla nova syntax-a pod nazivom „promise“ (srp. obećanje), koja sa svojim API-jem obezbedjuje bolji i pregledniji način za organizovanje callback funkcija. Ovo se naručito primećuje u radu sa asinhronim operacijama jer sa promisima sintaksa veoma liči na standardnu sinhronu sintaksu.

Primer – „callback hell“

Najpoznatija i najčešća primena callback funkcija je „hendlovanje“ akcija nakon izvršenog dogadjaja. Upravo je „hendlovanje“ medjusobno zavisnih dogadjaja najčešće uzrok „callback hell-a“. U ovom primeru je prikazan izgled takvog koda:

Read more

Klase u JavaScript-u

by

Uvod

Klase u javascript-u

Klase u JavaScript-u su samo drugačiji način predstavljanja konstruktorske funkcije i metoda iz „prototype objekata“, ali bez suštinske promene samog mehanizama nasledjivanja. Pozadina nasledjivanje klasa je poznati mehanizam „delegiranje metoda“ kroz „prototype lanac nasledjivanja“.
U JavaScript-u rezervisana reč „class“ samo ukazuje na to da je upitanju specijalna vrsta funkcije, koja za razliku od obične funkcije ne može da se pozove (invoke), nego se jedino može koristiti uz rezervisanu reč „new“.
Ova funkcionalnost je ubačena u jezik sa ES2015 standardom, sa namerom da poboljša čitljivost i olakša pisanje objektno orjentisanih programa. Pri definisanju izgleda sinktakse dizajneri standarda su se vodili idejom da naprave takvu sinktaksu koja će ličiti na sinktaksu većine „klasnih“ jezika“, i tako pomoći programerima koji već programiraju u nekom „klasnom“ jeziku“ da lakše usvoje JavaScript sinktaksu.
Ako u narednim primerima uporedimo delove koda pisane različitim sintaksama, možemo uočiti da je bolja čitljivost klasne sintakse u odnosu na ES5 sintaksu:

Primer: ES5 sintaksa

Primer: Klasna sintaksa

Izgled klase je veoma sličan sintaksi kreiranja objekta prema ES5 standardu, mada je čitljiviji zbog manje redova i izbačenih nepotrebnih delova:

NAPOMENA:
Za razliku od drugih „klasnih jezika“, kreiranje objekata u Javascript-u (čak i kada se koriste klase) nije statičko tj. nije nepromenjivo nakon deklarisanja objekta. U JavaScript-u objekat nakon instanciranja ostaje „vezan“ za klasu, svojim „prototype objektom“ preko lanca nasledjivanja. Stoga, ukoliko naknadno dodamo ili promenimo neku metodu u samoj klasi, tu promenu će osetiti svaki objekat instanciran na osnovu te klase.

Read more