Angular 2.0 — odakle početi i kako migrirati sa Angular 1.x

Angular 2.0 je JavaScript framework koji služi pravljenju dinamičkih web i mobilnih aplikacija. Napravljen je od strane programera iz Google-a. Isprva su ga kreirali za sopstvene potrebe, a kasnije, kada su uvideli da može biti koristan i drugima, podelili su znanje sa ostatkom sveta.

Angular nam omogućava da pravimo dobro struktuirane, tipizirane (upotrebom TypeScript-a), aplikacije koje su lake za testiranje i održavanje. Napravljen je od strane tvoraca Angular 1.x i zato volim da kažem da je Angular 2.0 mlađi brat Angular 1.x. No, iako imaju iste roditelje malo toga im je zajedničkog — toliko je drugačiji da mislim da bi bilo dobro da ima drugo ime.

Šta je novo u Angular 2.0?

Od pre par meseci Angular 2.0 je u beta verziji, što znači da se vreme objavljivanja produkcijske verzije približava. Zato bi bilo korisno pripremiti se za nadolazeći prelazak na novi Angular.

Angular 1.x je MVC framework, u njemu smo koristili Model, View i Controller kao osnovu za kreiranje većine kontrola. Takođe, najbitnija stvar u Angularu jesu direktive, koje nam omogućuju da proširimo HTML, dodajući nove elemente i na taj način proširujemo HTML sintaksu koju poznajemo.

Angular 2.0 počinje da implementira najnovije web standarde i uvodi web componentu kao ključni deo razvoja. Zbog primene web komponenti, arhitektura samih aplikacija postaje drugačija, u osnovi imamo jednu komponenetu i na njoj sve ostale, na taj način obezbećen je jednosmerni tok podataka.

Jednosmerni protok podataka obezbeđuje Angularu 2.0 da ima samo jedan digest cycle, što znači da je je izvor promene podataka uvek poznat i to je jedan od glavnih razloga zašto je brži od Angulara 1.x. Na Slikama 1, 2 i 3 prikazano je poređenje brzina Angulara 1.x i 2 kao i nekih drugih JavaScript framework-a.

Slika pokazuje vreme učitavanja samih JS fajlova neophodnih za pokretanje same aplikacije. Tu se vidi da je Angular 2.0 najsporiji, jer je fajl najveći, negde oko 700kb. Ako uzmemo da je još uvek u beta verziji, može se očekivati da će veličina ovog fajla biti poprilično manja u produkcijskoj verziji.

Na drugoj slici možemo videti da je brzina generisanja i iscrtavanja malog broja podataka relativno slična u većini framework-a. Međutim, ako pogledate učitavanje 50 000 record-a videćete da ih Angular 2 generiše i učitava za nekih 800ms, dok Angular-u 1.4 treba više od 11 sekundi.

Još drastičniji primer prikazan je na trećoj slici, gde se može videti da Angluar 2.0 praktično za isto vreme re-renderuje (ponovo iscrtava stranicu sa već učitanim podacima) 1000 i 50 000 record-a, za razliku od Angulara 1.4, gde je ta razlika veća od 4 sekunde.

Uglavnom, ako dođete u situaciju da na stranici prikazujete više od 1000 record-a, problem nije u frameworku, već u arhitekturi vaše aplikacije. Trudite se da broj record-a na vašim stranicama ne prelazi 50, jer neka istraživanja kažu da ljudski mozak ne može da procesuira više od 50 record-a po stranici.

Unapređen je Dependency injection. Za one koji ne znaju, Dependency injection je mehanizam, koji nam omogućava da povezujemo delove aplikacije koji su odvojeni (na primer Controller sa Servise-om). Angular 1.x je koristio stringove za ovo povezivanje, dok Angular 2.0 koristi tipove.

Ionic 2.0 je u beta verziji i za sve one koji su koristili 1.x verziju Ionic-a ovo je značajna informacija. Ionic je hibridni framework za mobilne uređaje, koji omogućava da se, koristeći HTML5 i Angular, prave native (aplikacija koja se instalira na mobilini uređaj sa store-a predviđenog za taj operativni sistem — Google store, Apple store ili Windows store ili kroz instalacioni paket) mobilne aplikacije.

Typescript

TypeScript će biti default razvojni jezik Angular-a 2.0, ali biće dostupne varijante pisane i u klasičnom JavaScriptu i u Google-ovom Dart jeziku.

TypeScript je napravljen od strane Microsoft-a i postoji od 2012. godine. Otvorenog je kôd-a, može se preuzeti sa Github-a.

Nastao je kao potreba da se nadogradi postojeći JavaScript, jer je uočeno dosta nedostataka, naročito kada je pravljenje enterprise aplikacija u pitanju. Zato je TypeScript implementiran kao nadskup JavaScript-a i kompajlira se nazad u JavaScript. Svi postojeći JavaScript fajlovi su validni TypeScript fajlovi. Najbitnija novina je uvođenje tipova podatka, kao i klasa i modula. Tako je uvođenjem ovih stvari u JavaScript svet omogućeno je da se Front end aplikacije pišu u modernom objektno orijentisanom programskom jeziku.

Većina poznatih razvojnih okruženja imaju podršku za TypeScript (Visual studio, Eclipse, Intellij Idea, Web storm, Sublime Text, Atom, Visual studio Code…).

Primeri upotrebe Typescripta

Deklarisanjem tipova obezbeđujemo tipiziranost naših modela i property-a. Na narednoj slici prikazan je uporedni prikaz deklarisanja promenljivih u JavaScriptu i u TypeScriptu. Ono što je interesantno je da, na primer, promenljivoj „num“ u JavaScriptu možemo dodeliti string vrednost (num=’nekiString’) i to je potpuno validno i dozvoljeno ponašanje u JavaScriptu. Međutim, u Typescriptu dobićemo upozorenje u runtime-u od strane razvojnog okruženja (IDE) da pokušavamo da dodelimo vrednost neodgovarajućeg tipa.

Na gornjoj slici pokazano je poređenje pisanja funkcija u JavaScriptu i TypeScriptu.

Kao što možete videti TypeScript ima deklarisane tipove ulaznih podataka, kao i deklaraciju tipa povratne vrednosti funkcije.

Ako u JavaScriptu pozovemo funkciju max(‘a’,3) dobićemo kao rezulat funkcije vrednost 3, međutim ako napravimo isti poziv u TypeScriptu, dobićemo grešku u razvojnom okruženju da prosleđeni parametri nisu odgovarajući, kao što je prikazano na prethodnoj slici.

TypeScript funkcioniše kao i svi objektni jezici, ima klase, interfejse, module i sve ono što dolazi sa njima, nasleđivanje, override-ovanje… Savetujem ovaj sajt za sve koji žele da pronađu playground za testiranje svih funkcionalnosti.

Svi primeri u daljem tekstu su rađeni u TypeScriptu, tako da ćemo videti puno interesantnih odlika.

Bitno je pomenuti DefinetlyTyped repository, koji sadrži ogroman broj definicija tipova (Interface-a).

Kako i odakle krenuti sa Angular 2.0?

Angular 2.0 ne treba još uvek koristiti u aplikacijama koje su velike i planirane da idu u produkciju, pošto jos uvek nije stabilan, moj predlog je da krenete sa Angular-om 1.5, koji je u stabilnoj verziji od pre par dana. Na Slici 7, možete videti interesantan dijagram, koji će vam olakšati da se odlučite da li i kada da koristite Angular 2.0.

Svakako vas ohrabrujem da već sada krenete sa učenjem Angular 2.0. Pošto je u beta fazi, ništa od funkcionalnosti se neće menjati, već je samo u pitanju stabilizacija postojećeg kôda i popravljanje bug-ova. Najlakši način da započnete rad u Angular 2.0 jeste da koristite komandni tool (CLI tool) napravljen od strane Angular tima.

Sve operacije sa ovim cli toolom radite u command promptu na Windowsu ili u Linux terminalu.

Instaliranje cli tool-a

npm install -g angular-cli

Kreiranje novog projekta:

ng new Ime_Projekta

Pokretanje lokalnog servera:

cd Ime_Projekta

ng serve

Otvorite u vašem browser-u url:

http://localhost:4200/

Kreiranje nove Component-e:

ng g component my-new-component

Kreiranje nove Directive-e:

ng g directive my-new-directive

Kreiranje novog Servis-a:

ng g service my-new-service

Pored toga anglular-cli vam omogućava automatsko kompajliranje TypeScript, tako da sve što vam ostaje jeste da krenete sa učenjem i igranjem.

Sve detalje i opcije koja pruža ovaj cli tool možete pogledati kucanjem

ng –help

Detaljno uputstvo možete naći ovde. Za one koji imaju malo više iskustva predlažem da naprave svoj clean custom install.

Kako započeti produkcijski projekat u Angularu?

Angular 1.x je već dugo vremena stabilan, sa velikom dokumentacijom i ogromnim community-em iza sebe, tako da je savet da započnete novi projekat u Angularu 1.x, ali sa jasnim planom migracije na 2.0, koji će se desiti u bliskoj budućnosti.

Odlična polazna tačka je John Papa styleguide. Koristite TypeScript, jer će vam olakšati buduću migraciju, a i jednom kad u uđete u svet TypeScripta, verujte, nećete se vratiti na JavaScript. To garantujem.

Pošto u Angular 2.0 nema više standarnih Controller-a, kao što smo navikli u klasičnim MVC aplikacijama, pokušajte da ih ne koristite u vašem novom Angular 1.x projektu.

Kako?

Tako što ćete pokušati da vašu aplikaciju svedete samo na Directive-e i Component-e (od verzije 1.5 ).

Component-a je novina uvedena u verziji 1.5. Component-a je zapravo Directiv-a, koja ima svoj template, izolovani scope, koristi ControllerAs sintaksu, bindToController je podešen na true, ove vrednosti su predefinisane, tako da je sintaksa Component-e jednostavnija od sintakse Directiv-e, i definitivno preporuka za one koji kreću sa novim projektom da gde god mogu koriste Component-e umesto Directive-a.

Ako planirate da koristite verziju manju od 1.5 ili je već koristite, onda koristite Directive sa izolovanim scope-om, posebnim template-om i stilovima. Koristite ControllerAs sintaksu, umesto link funkcije koristite Controller, izbacite u potpunosti upotrebu $scope-a.

Pokušajte da vizualizujete delove vaše aplikacije, koji su funkcionalno odvojeni, na taj način možete da ih grupišete u Directive (ili Component). Na sledećoj slici prikazan je primer pripremanja Angular 1.x kôda za migraciju na Angular 2.0.

Arhitektura Angular 1.x projekata

Najbitnija stvar u samoj organizaciji Angular 1.x projekta, jeste da pokušate da odvojite funkcionalne celine. Za odvajanje funkcionalnih celina koristite foldere.

Primer dobro organizovanog projekta prikazan je na gornjoj slici.

Folderi configs, locale su opšti i oni se koriste za globalne stvari, koje će se koristiti po celoj aplikaciji.

Folderi header i testFeature su funkcionalne celine. Unutar tih foldera se nalazi se Directive-a (isto je i sa Componet-om) sa svim potrebnim pratećim klasama, primer je prikazan ovde:

_app.ts fajl je jedan od najbitnijih fajlova u solution-u, tu se čuvaju reference ka svim fajlovama u solution-u.

I ono što je bitno je da svi ostali fajlovi imaju referencu samo na njega, na taj način obezbeđuje se dostupnost svih ostalih referenci unutar aplikacije. Svaki TypeScript fajl treba da sadrži referencu na _app.ts:

/// <reference path=’../_all.ts’ />

Takođe, bitno je pomenuti i fajl app.ts, u kome registrujemo sve delove Angular aplikacije.

Svi fajlovi unutar solution-a mogu se pisati kao klase u TypeScript-u. Evo primera nekih od najčešće korišćenih:

Pripremanje kôda za migraciju na 2.0

Za aproksimaciju Component-e iz Angular 2.0, koristićemo Angular 1.x Directive (ili ako koristite Angular 1.5 preporučujem da koristite novu Component funkcionalnost) sa odvojenim HTML template-om, posebnim Controller-om, naravno koristićemo ControllerAs sinksu i najbitnije Directiv-a će koristiti izolovani scope.

Primer koji ćemo posmatrati prikazan je na poslednje dve gornje slike i to je najobičniji message box:

Korišćenje Angular 2.0 Component-e u HTML-u je prikazano na levoj slici, a korišćenje Directive-e u Angular 1.x desno.

Primetićete novu sintaksu u odnosu na Angular 1.x. Uglaste zagrade [ ] se koriste za bind-ovanje property-a, i koriste se za jednosmerno bind-ovanje. Obične zagrade ( ) se koriste za bind-ovanje eventa, a ovo se takođe koristi za jednosmerno bind-ovanje, ali u drugom smeru.

Ako Component posmatramo kao crnu kutiju izolovanu od svega, bind-ovanjem property-a se definišu ulazne vrednosti u Component-u, a bind-ovanjem event-a se definišu izlazne akcije i vrednosti, ilustracija ovog primera je prikazana ovde:

Dvosmerno bind-ovanje je i dalje moguće u Angularu 2.0, ali se savetuje da se koristi samo na mestima gde je to neophodno, kao što su, na primer, forme za unos i izmenu i tamo gde ne možete izbeći korišćenje. Sintaksa za dvosmerno bind-ovanje je [( model )], deluje logično, zar ne? Ulaz [] i izlaz () kombinovani.

HTML template Angular 2.0 Component-e i HTML template Directive-e su poprilično slični, jedina razlika je što kod Angular 2.0 Componente ne mora da se navodi koji Controller se koristi, jer se uvek koristi Controller vezan za Component-u, poređenje možeti videti ovde:

Pogledajmo razliku u TypeScript kôdu između Angular 2.0 Component-e i Angular 1.x Directive-e (Slike 20,21 i 22.). Angular 2.0 Compoment-a ima samo jedan fajl, u kome se nalazi klasa koja definiše sve neophodne funkcije i property-e, i ta klasa je gotovo identična sa klasom koja se nalazi u Controller-u Directive-e Angular 1.x.

Ono što je takođe primetna razlika jesu tagovi u kôdu koji počinju sa @ i to su Decorator-i, novina uvedena u 2.0, preko kojih definišemo ponašanje Component-e, jednoznačno određujemo šta su ulazi, a šta izlazi, kog je tip-a. I jako bitna stvar je selector polje unutar @Component decorator-a, kojim definišemo naziv CSS selector-a, za tu Component-u.

Tačno definisan CSS selector omogućava da imamo CSS tako napravljen da je vezan samo i isključivo za tu Component-u, što nam sa druge strane obezbeđuje izolovanost naše Component-e, što se tiče stilova.

Migracija postojećeg Angular 1.x kôda na 2.0

Za sada postoje dve strategije kojima se treba voditi kod migracije na Angular 2.0. Prva je tzv. Bing bang i podrazumeva da nemate referenci na externe biblioteke (ili ako imate da one već imaju verziju za Angular 2.0) i jednostavno celu vašu aplikaciju migrirate u jednoj iteraciji.

Drugi način je upotrebom ng-upgrade funkcionalnosti (malo više o njoj na kraju ovog teksta), gde ćemo upgrade-ati funkcionalnost po funkcionalnost.

Moja preporuka je ići na Bing bang varijantu, iz prostog razloga što plivanjem u međustanju izmedju Angulara 1.x i 2.0 dolazite u situaciju da vaš kôd nikada u potpunosti ne bude migriran. Nezavršavanjem migracije imaćete dve biblioteke uključene, dva frameworka, tako da benefiti koje dobijate korišćenjem nekih Angular 2.0 funkcionalnosti i nisu tako veliki, ali ovo je odluka koju treba da donese vaš tim — vi, ipak, najbolje poznajete vaš kôd, pa shodno tome i donesite odluku o strategiji migracije na 2.0.

Pripremanje postojećeg Angular 1.x kôda za migraciju

Prvo i najbitnije je da pokušate da locirate sve logičke celine, koje možete da izolujete, tako da su nezavisne od ostatka aplikacije, što znači da takvu celinu možete da iskoristite na bilo kom mestu u aplikaciji tako što ćete joj obezbediti sve neophodne ulaze i na odgovarajući nači prihvatati izlaze.

Zato je najlakše krenuti sa refaktorom kôda koji je već izolovan. Nakon toga, naredni korak je lociranje kôda koji nije izolovan, ali bi mogao biti. Nad takvim blokovima kôda možemo primetiti da je moguće izdvojiti ih kao celinu i tada bi trebalo da pokušamo da identifikujemo logičke ulaze i logičke izlaze te celine. Preko sekcije BindToController (ili bindings od verzije Angular-a 1.5), povezujemo sve ulaze i izlaze korišćenjem sledeće sintakse:

oneWay: ‘@’ -jednosmerno bind-ovanje

twoWay: ‘=’ -dvosmerno bind-ovanje

 expr: ‘&’ -bind-ovanje expression-a

Naredni korak je potpuno izbacivanje $scope-a, ako ste pratili John Papa-in Styleguide, onda nećete imati ovih problema; ako niste, onda počnite da koristite ControllerAs sintaksu i refaktorujte kompletan kôd, tako da vise nemate nigde poziva $scope-a.

Što se tiče migracije servisa, tu bi stvar trebala da bude najjednostavnija, jedini problem može nastati je ako ste koristili dodatne biblioteke, tipa restangular, ako ste koristili najobičniji http servis za komunikaciju sa serverom, onda je migracija krajnje jednostana, i u ovom tekstu se nećemo baviti time.

Najčešći primeri sa kojima ćemo se susretati pri migraciji

NG-INCLUDE

Ovo je najjednostavniji primer izolovanog kôda. Ako pretpostavimo da vaš template nema referencu na spoljašnje scope-ove, onda situaciju sa slike ispod, možemo zameniti jednostavnom Directive-om (ili Component-om od Angular 1.5 verzije), prikazanom na narednoj slici.

Pa tako deo kôda koji je sadržao ng-include, sada prelazi u klasičnu Directive-u prikazanu ovde:

Na narednoj slici prikazan je ksd Direktive, gde je definisan izolovani scope upotrebom scope={};, lokacija HTML template-a je definisana preko templateUrl:string=”…lokacija fajla…”.

Ne zaboravite da registrujete vašu novu Directive-u (ili Component-u) u app.ts fajlu (Slika 26) i u _app.ts.

Ovde takođe možemo videti primer intelisense-a u Visual Studio Code okruženju.

NG-CONTROLLER

Još jedan od jednostavnijih primera je ng-controller, kao i ng-include, uglavnom su nezavisni od ostatka kôda. Koristićemo novi Directive, koja će imati izolovani scope, u template-u će biti neophodni HTML.

NG-REPEAT

Primer ng-repeat je interesantan iz prostog razloga što u ovom primeru možete videti međukorak, koji možete imati u slučaju kompleksnijih primera. Na drugoj slici možete videti kôd koji nije u potpunosti spreman za migraciju, ali daje prostora da u narednoj iteraciji bude odrađen u potpunosti.

U slučaju prikazanom na Slici 32, treba koristiti Directive-u koja nema izolovani scope već podatke preuzima sa parent Controller-a, što naravno nije OK, ali, kao što rekoh, u pojedinim slučajevima, jednostavno, nije moguće izvršiti pripremu za migraciju u jednoj iteraciji. Željeni oblik Directive, možete videti na poslednje dve slike, tu se može videti da Directive-a ima izlovani scope, pa joj se neophodni podaci (u ovom slučaju lista) prosleđuje i na taj način Directive-a je potpuno nezavisna i reuse-abilna.

$WATCH

Ovaj primer je jedan od kompleksnijih i zapravo najteže je migrirati watch-eve, jer ih u Angular 2.0 nema. Ovde je ideja da i ovu Directive-u napravimo nezavisnom i to tako što ćemo proslediti promenljivo koju pratimo u našu novu Directive-u, i napraviti novi watch unutar same directive, koji će pratiti promenu property-a na Controller-u Directive-e, ovo će nam obezediti da aplikacija radi u Angular 1.x. Kada dođemo do same migracije na Angular 2.0, onda ćemo skinuti ovaj watch, i promena će biti automatski detektovana iz razloga što je sam Angular 2.0 tako napravljen da su promene @input parametara Component-e uvek detektovane.

Primetite bindToController deo, kojim se obezbeđuje da property mainCtrl.OldManSelector prosleđen Directive-i, bude bind-ovan za Controller Directive-e i to u property-u testCtrl.oldManSelector.

Kompleksni primer, koji sadrži reference na više Controller-a

U poslednjem primeru se koristi sintaksa koja obezbeđuje jednosmeran tok podataka, upotrebom specijalnog znaka @. Bitno je iskoristiti jednosmerni bind-ing gde god je to moguće, jer na taj način poboljšavamo performanse naše aplikacije, a i olakšavamo sebi posao kod buduće migracije na Angular 2.0.

Upotreba Angular 1.x i Angular 2.0 u istom projektu?

Da, moguće je. Angular tim je napravio dve nove funkcionalnosti: ng-upgrade i ng-forward.

Pa, tako, ng-upgrade omogućava da postojeće Angular 1.x funkcionalnosti koristimo unutar Angular 2.0. Na ovaj način dobijamo mogućnost da neke delove aplikacije kasnije migriramo na Angular 2.0. Ovo je jako korisno u slučaju da ste koristili neke eksterne biblioteke, koje još uvek nemaju Angular 2.0 verziju.

Sa druge strane ng-forward nam daje mogućnost da pišemo Angular 1.x koristeći Angular 2.0 sintaksu, dobijamo mogućnost da koristimo Decorator-e i dobar deo drugih funkcionalnosti koje ima Angular 2.0 (ali nisu sve funkcionalnosti podržane).

Obe ove biblioteke mogu biti jako korisne u postepenoj migraciji vašeg projekta, ali ovo je tema za neku novu priču.