NWT usmeni Flashcards
Razlike u mogućnostima (front-end vs. back-end)
● Back-end tehnologije se izvršavaju na serveru
○ obrađuju pristigle zahteve (HTTP request)
○ omogućavaju perzistenciju podataka (database)
○ putem šablona generišu odgovore (HTTP response)
● Front-end tehnologije se izvršavaju na klijentu (web browser-u)
○ učestvuju u prikazu veb stranice
○ vrše interakciju sa korisnikom
○ (samostalno) upućuju zahteve i obrađuju odgovore
Multi-page vs. single page aplikacije
Prednosti tradicionalne (multi-page) aplikacije
● brži odziv na početku
● manja zavisnost od JavaScript podrške
● lakša kontrola pristupa
● jednostavnije postići SEO
Prednosti single-page aplikacije:
● brži odziv tokom rada
● manje opterećenje servera
● funkcionisanje i pri gubitku konekcije
● odvojen GUI od podataka, pa isti back-end može opslužiti različite platforme (web, Android, iOS)
Angular
● Open-source framework za razvoj front-end komponente web aplikacija.
● Angular je započet kao Google projekat 2010. godine pod nazivom AngularJS.
● Omogućava implementaciju single page aplikacija, ali se može koristiti i u multi-page
aplikacijama.
● Uz Angular, jednom učitana veb stranica, može vršiti interakciju s korisnikom bez nužnog
učitavanja nove veb stranice.
● Za implementaciju koristi TypeScript jezik koji se potom prevodi u JavaScript.
● Omogućava modularan razvoj što olakšava organizaciju programskog koda i pogoduje
timskom radu.
● Moguća su proširenja funkcionalnosti uključivanjem dodatnih biblioteka.
- godine AngularJS projekat nastavlja razvoj kao Angular 2:
● izvorni kod je napisan ispočetka
● arhitektura je značajno izmenjena
● omogućena je modularizacija (grupisanje programskih komponenti)
● poboljšana podrška za SEO
AngularJS i Angular
● AngularJS za implementaciju koristi JavaScript jezik.
● Razvoj AngularJS radnog okvira je dostigao verziju 1.8.x.
● AngularJS je u stanju dugoročne podrške (Long Term Support - LTS).
● Angular za implementaciju koristi TypeScript jezik.
● Pored veb aplikacija, Angular podržava i razvoj mobilnih aplikacija (uz pomoć Apache Cordova projekta).
● Angular aplikacije se baziraju na komponentama (tipskim elementima veb stranice).
● Performanse Angular aplikacija su značajno napredovale u odnosu na AngularJS.
TypeScript sintaksa
● TypeScript sintaksom Angular omogućava:
○ statičko tipiziranje (static typing) - varijablama se deklaracijom pridružuje tip čime se
izbegavaju potencijalne greške (varijabli je tada moguće dodeliti isključivo vrednosti
koje odgovaraju deklarisanom tipu)
○ objektno orijentisan koncept - programski kod organizovan u klase
○ reaktivno programiranje - rad sa asinhronim tokovima podataka
● Osim toga, TypeScript rešava nedostatak podrške za neke od mogućnosti predviđene ECMAScript standardom.
● TypeScript nije zamena za JavaScript već njegova nadgradnja.
● JavaScript se može smatrati ‘mašinskim jezikom’ za web browser-e.
TypeScript - statičko tipiziranje
Varijable u JavaScript-u nisu tipizirane (ne dodeljuje im se tip).
TypeScript
omogućava tipiziranje varijabli čime obezbeđuje njihovu doslednu primenu u skladu sa konkretnim tipom.
TypeScript - reaktivno programiranje
● Hronološki sled sinhronih i asinhronih poziva je različit:
○ sinhronim pozivom se ujedno i “čeka” na odgovor
○ asinhronim pozivom se u međuvremenu obavljaju druge aktivnosti (odgovor će biti obrađen kada bude primljen)
● Asinhroni pozivi su pogodni za izvršavanje dugotrajnih operacija tokom kojih izvršavanje ostalih funkcionalnosti ne treba biti “zakočeno” (npr. odziv korisničkog interfejsa)
● Uporednim asinhronim pozivima se može optimizovati ukupno trajanje izvršavanja pojedinačnih operacija
Izvršavanje TypeScript programskog koda
● Izvorni kod napisan TypeScript sintaksom i sačuvan u .ts fajlovima se prevodi u JavaScript kod i smešta u .js fajlove.
● Tek nakon prevođenja se programski kod može izvršavati u veb pregledaču.
Arhitektura Angular projekta
● Angular projekat sadrži barem jedan korenski modul.
● Moduli objedinjuju komponente i servise.
● Komponente definišu poglede (view) odn. elemente veb stranice.
*
Komponente omogućavaju povezivanje podataka, logike i HTML šablona.
● Moduli mogu sadržati i servise koji su zaduženi za podatke i logiku, a na
raspolaganju su komponentama.
Prednosti razvoja aplikacije putem komponenti
● Između komponenti se može uspostaviti hijerarhijski odnos tako što se unutar jedne komponente može koristiti druga komponenta (selektor jedne komponente se navede u šablonu druge komponente).
● Ovakvo raščlanjavanje prikaza podataka olakšava razvoj što posebno dolazi do izražaja kod složenijih aplikacija.
● Komponentama se olakšava i timski rad na razvoju aplikacije jer se podela posla unutar tima može vršiti po komponentama.
Angular šabloni
● Angular komponente koriste šablone za formatiranje prikaza i za određivanje načina interakcije sa korisnikom.
● Jezik za pisanje šablona je zasnovan na HTML-u.
● Komponente su povezane sa šablonima pomoću @Component dekoratora na jedan od dva načina:
○ svojstvom template čija vrednost sadrži šablon
○ svojstvom templateUrl čija vrednost je putanja do spoljašnjeg fajla u kome je šablon
Sintaksa Angular šablona
● U osnovi Angular šablona je HTML.
● Komponente u svojim šablonima definišu odgovarajuće segmente veb stranice tako da u celini čine validnu HTML stranicu.
● Da bi se kroz šablon ugradila vrednost nekog podatka u veb stranicu koristi se interpolacija. Interpolacija odn. umetanje se postiže navođenjem izraza unutar duplih vitičastih
zagrada: {{ i }}
● Na primer: <h1>{{naslov}}</h1>
Preuzimanje zavisnosti
● Preuzimanje paketa koji su u Angular projekat dodati kao zavisnosti (dependencies) vrši alat npm (Node Package Manager).
● Na sajtu npmjs.com je dostupan pregled raspoloživih paketa koje je moguće koristiti kao zavisnosti.
● Ovaj sajt omogućava pretragu i rangiranje što može biti korisno u pronalaženju i odabiru željenih paketa.
● npmjs.com sadrži pakete namenjene, ne samo razvoju Angular aplikacija, već i mnogih drugih koje za izvršavanje koriste JavaScript jezik.
● npmjs.com poseduje više od milion paketa.
Ispis poruka u konzoli / prikaz alert dijaloga
● Radi lakšeg testiranja i debug-ovanja korisno je služiti se ispisom pomoćnih poruka o toku izvršavanja programa.
● Ove poruke ostvaljaju trag o stanju programa u konkretnom trenutku izvršavanja.
● Jedna varijanta je ispis poruka u konzoli. Naredba bi, na primer, glasila:
○ console.log(‘Hello World’);
● Drugi način prikaza poruka je putem alert dijaloga:
○ alert(‘Hello World’);
● Ispis poruka u konzoli je suptilniji način za praćenje rada programa.
Metode u Angular komponentama
● Do sada smo u komponentama koristili varijable i pomoću šablona ugrađivali njihove vrednosti u veb stranicu.
● Pored varijabli, komponente mogu sadržati i metode koje, kada su pozvane, izvršavaju neki deo programskog koda
● Metode imaju naziv, parametre i telo.
● Parametri su opcioni.
● Pozivi metoda se dešavaju nastupanjem određenih događaja.
Neki od tih događaja nastaju prilikom učitavanja komponente, a neki tokom interakcije sa korisnikom.
Životni ciklus Angular komponente
● Životni ciklus komponente obuhvata sve događaje od njenog instanciranja (zauzimanja memorije) do njenog uništenja (oslobađanje iz memorije).
● Prvi događaj u životnom ciklusu komponente je njeno instanciranje.
● Angular vrši instanciranje komponente kada u HTML-u veb stranice naiđe na tagove koji odgovaraju selektoru te komponente (definisano svojstvom selector u @Component dekoratoru).
● Prilikom instanciranja će se izvršiti metoda constructor() ukoliko je definisana unutar komponente. ● Ovom metodom se najčešće omogućava tzv. injektiranje zavisnosti (povezivanje s drugim elementima aplikacije). Više o tome kasnije…
Pristup varijablama iz metoda
● Metode, u svom telu, mogu pristupati vrednostima varijabli.
● Pri tome se ove varijable koriste uz navođenje reference this koja označava tekuću instancu komponente.
Pregled tipova povezivanja
U zavisnosti od željenih rezultata, potrebno je izabrati način povezivanja između komponente i šablona. Sledeći dijagram ilustruje nekoliko slučaja povezivanja i njihove smerove sa jednostavnim primerima:
○ interpolacija (jednosmerno od komponente ka šablonu)
○ povezivanje svojstava (property binding) (jednosmerno od komponente ka šablonu)
○ povezivanje događaja (event binding) (jednosmerno od šablona ka komponenti)
○ dvosmerno povezivanje
Binding od komponente ka šablonu: interpolacija
Interpolaciju smo već koristili i ona je tipičan primer za ovaj smer povezivanja. Vrednosti kojima raspolaže šablon su vezane za vrednosti koje postoje u komponenti. Bilo kakva promena ovih vrednosti u komponenti će se istovremeno odraziti na prikaz tih vrednosti putem šablona.
Binding od komponente ka šablonu: povezivanje svojstava
● Osim interpolacije, povezivanje svojstava (property binding) takođe ima smer od komponente ka šablonu.
● Ovaj način se koristi kada neki atribut HTML elementa treba povezati sa nekom vrednošću iz komponente.
● Povezivanje se vrši tako što se u šablonu odgovarajući atribut navodi unutar uglastih zagrada [ ].
● I kod ovog načina će se bilo kakva promena ove vrednosti u komponenti istovremeno odraziti na prikaz
Razlika između interpolacije i povezivanja svojstava
● Tekstualne podatke je u većini slučajeva moguće ugraditi u šablon interpolacijom.
● Ipak, ako bi vrednost bila logičkog tipa, interpolacija ne bi funkcionisala.
● Interpolacijom logičke vrednosti true odn. false postaju stringovi ‘true’ i ‘false’.
● Pošto se u HTML-u logički atributi zapisuju drugačije (na primer: disabled, selected, checked) preporučljivo je da se za svojstva uvek koristi property binding. Tada Angular vodi računa o ispravnom nazivu atributa.
Povezivanje svojstava primenjeno na CSS stilove
● Povezivanjem svojstava je moguće kontrolisati pridruživanje stilova nekom HTML elementu.
● Kao uslov za pridruživanje može poslužiti izraz čija istinitost određuje da li će stil biti pridružen ili ne.
● Tako se, na primer, postojeća CSS klasa može primeniti na neki element ako se u njega ugradi atribut [class.naziv_klase] pa mu se kao vrednost dodeli izraz koji određuje da li će stil biti primenjen.
Binding od šablona ka komponenti: povezivanje događaja
Sa povezivanjem događaja (event binding) smo se već upoznali i koristili ga za obradu događaja koji se dešavaju na veb stranici. Nastupanjem konkretnog događaja se poziva zadata funkcija unutar komponente.
