←  Nazad

Angular Architecture Tutorial – Prvi dio

Ovaj priručnik predstavlja seriju članaka fokusiranih na izgradnju efektivne aplikacijske arhitekture u Angularu, temeljeno na iskustvima korištenim u Ekobitu.

 

Preduvjeti

 

Za čitanje ovog članka se pretpostavlja da ste upoznati s osnovama NuGet paketa i paradigme single-page aplikacija (SPA), koja se koristi prilikom izrade web aplikacija na strani klijenta. Pretpostavlja se i da ste upoznati s TypeScript-om i da imate barem neko iskustvo u izradi aplikacija u Angularu.

 

Početna struktura Angular aplikacije

 

Kao zadana organizacija projekta (od Angular verzije 2 nadalje), za vas se kreira mapa src nakon što izvršite sljedeću naredbu putem Angular CLI-a:

 

ng new <ime-projekta>

 

‘Angular aplikacija’ u ovom slučaju znači da se Angular kôd može pokrenuti izravno na pregledniku pomoću webpack live poslužitelja (prema zadanom radi na adresi http://localhost:4200) koristeći slijedeću naredbu:

 

ng serve

 

Lako je raditi s Angular framework-om korištenjem razvojnog okružja Visual Studio Code jer je to najpopularniji IDE za web razvoj te stoga sadrži mnoštvo korisnih alata za pisanje kôda, uklanjanje pogrešaka i kontrolu source code-a.

Evo popisa najvažnijih datoteka u korijenskoj mapi, kreiranog od strane Angular CLI-a:

 

–  package.json –sadrži sve pakete potrebne za razvoj i produkciju

–  tsconfig.json – sadrži konfiguraciju prevođenja (transpilinga) TypeScript-a

–  tslint.json –sadrži sva pravila za statičku analizu TypeScript kôda (tzv. linting)

–  angular.json – sadrži opcije za izgradnju i konfiguriranje Angular projekata

 

Sve ostalo nalazi se u src mapi, uključujući sljedeće:

 

– index.html – datoteka koja je ulazna točka za posluživanje Angular aplikacije

– main.ts –predstavlja glavnu TypeScript datoteku za pokretanje aplikacije

– styles.scss – globalno definirana datoteka SCSS kaskadnih tablica stilova (CSS) (ili bilo koja druga vrsta CSS datoteke podržana konfiguracijom)

mapa app – koja sadrži sav Angular kod

mapa assets – koja sadrži statičke datoteke (npr. slike, fontove, JSON datoteke)

mapa environments – koja sadrži različita okruženja koja se koriste prilikom razvoja ili testiranja aplikacije

 

Evo kako izgleda ova zadana Angular struktura aplikacije u Visual Studio Code-u:

 

Angular Architecture Tutorial – Prvi dio

 

 

Postupak izrade Angular aplikacije

 

Važno je napomenuti kako je Angular aplikacija izrađena, kao i kako se izvodi njezin životni ciklus. Prilikom pripreme aplikacije za pokretanje (tj. postupak ‘bildanja’), Angular CLI koristi alat WebPack koji služi za sastavljanje paketa od elemenata koji će se poslužiti na host-u. Ti elementi uključuju:

– prevođenje TypeScript kôda u običan JavaScript kôd (jer je JavaScript jedini jezik koji web preglednik može razumjeti)

– paketiranje asset-a u jednu datoteku radi optimizacije performansi

– paketiranje stilova u jednu datoteku (također radi optimizacije učitavanja)

 

Angular CLI koristi output hashing za generiranje jedinstvenih naziva rezultirajućih datoteka kako bi ih osvježio pri svakom sastavljanju. To se može promijeniti u konfiguracijskoj datoteci angular.json. (Na ovo ćemo doći kasnije u ovoj seriji.)

 

Dobiveni JavaScript kôd dalje je odvojen namjenom i podrijetlom, sadržavajući:

 

– main.js – koji sadrži prevedeni kôd iz aplikacijskog kôda (kojeg smo napravili sami)

 

– polyfills.js – koji sadrže dodatnu logiku kôda za podržavanje starijih preglednika

 

– runtime.js – koji sadrži potrebni sistemski kôd za pokretanje Angular aplikacije

 

-scripts.js – sa svim skriptama potrebnih za stilove i prilagođene JavaScript biblioteke

 

– styles.js – koji sadrže stilove definirane aplikacijom te vanjskim bibliotekama (kao što je Bootstrap)

 

– vendor.ts – koji sadrži kôd koji dolazi iz mape node_modules (tj. vanjskih biblioteka, uključujući i samog Angular sustava).

 

Možete pitati zašto je potrebno takvo razdvajanje u postupku izrade. Angular CLI gradi te datoteke na takav način da bi se dobilo što brže početno učitavanje aplikacije. Također radi na ovaj način, tako da može učitati neke datoteke tek onda kada su mu potrebne (tj. učitavanje na zahtjev).

 

Izrada za produkciju

 

Iz gornje snimke zaslona vidi se kako se te datoteke nazivaju i koliko su velike. Možete zamisliti važnost odvajanja kôda na manje dijelove ako prelaze nekoliko megabajta. Da biste testirali i pripremili rezultirajući kôd za produkciju, na terminalu trebate pokrenuti sljedeću naredbu:

 

ng build --prod

 

Ovo su datoteke kao rezultat izgradnje s uključenom opcijom output hashing, koje se nalazi u mapi dist:

 

Angular Architecture Tutorial – Prvi dio

 

Da biste dodatno optimizirali veličinu paketa, od verzije 8, Angular CLI producira dvije vrste datoteka: jednu za podržavanje ES5 (za starije preglednike) i jednu za podršku ES2015 standarda (za moderne verzije preglednika) – kao što je gore prikazano. To znači da, ako ste sigurni da najnoviji EcmaScript standard podržavaju ciljani preglednici, možete uštedjeti nekoliko kilobajta – čak i MB-a – i učitati aplikaciju brže.

Za detaljnije informacije o veličini vaše aplikacije, pogledajte Webpack Bundle Analyzer Tool, koji daje grafički pregled zauzimanja memorije različitih datoteka u paketu.

____________________________________________________________

Napomena: Sav izvorni kôd koji se koristi u ovim člancima je dostupan ovdje.

 

 

Ratko Ćosić
Latest posts by Ratko Ćosić (see all)

8 prosinca, 2019

Želite podijeliti sadržaj?

Možda će biti zanimljiv Vašim prijateljima.

Mogle bi Vam biti zanimljive i druge teme.