Izrada kompleksnih AngularJS aplikacija

DaFED#26
Speaker: Miloš Janjić
Ovo predavanje će vas upoznati sa "best practices" prilikom kreiranja naprednijih AngularJS aplikacija.

Transcript

1. IZRADA KOMPLEKSNIH ANGULARJS APLIKACIJA DaFED#26 - 01.10.2014
2. PREDAVAČ… • Miloš Janjić • Vivify Ideas - www.vivifyideas.com • Vivify Scrum - www.vivifyscrum.com • @milosjanjic • milos@vivifyideas.com
3. O ČEMU NEĆEMO PRIČATI • Šta je Angular? • “Magični” two-way binding • TODO aplikacija na 101 način • Šta su to: directives, filters, scope, DI, services, controllers? • Da li je bolje pisati Angular aplikacije u CS ili JS? • itd…
4. O ČEMU ĆEMO ZAPRAVO PRIČATI… • O stvarima koje bih voleo da sam znao, kada sam počinjao sa prvom “ozbiljnijom” AngularJS aplikacijom
6. STRUKTURA APLIKACIJE • Savet: Počnite jednostavno, i kako dodajete više stvari tako pravite organizaciju. 
 Ne trebaju vam kule i gradovi na početku - kada nemate ni temelje! • Najvažnije - budite dosledni jednog standarda!

7. STRUKTURA APLIKACIJE • Ne postoji ispravna/najbolja struktura! • LIFT princip L I F T Locating our code is easy Identify code at a glance Flat structure as long as we can Try to stay DRY
8. STRUKTURA APLIKACIJE Po tipu Po funkcionalnosti app/ controllers/ services/ directives/ templates/ app/ layout/ slides/ dashboard/ navigation/ Hibrid?
9. PRIMER STRUKTURE
10. OBRASCI (DATA PATTERNS) • Mali kontroleri koji samo služe kao sprega izmedju view-a / servisa / modela • Svi XHR trebaju da budu izolovani u posebne servise • Samim tim je i testabilno i može se koristiti na više mesta
11. OBRASCI (DATA PATTERNS)
12. OBRASCI (DATA PATTERNS)
13. MODULARNOST • Želim da rewrite-ujem aplikaciju koja ima 400 strana u Angular? Kako? • Pogotovo prilikom rewrite stare/velike aplikacije.
14. ČIST KOD • JSHint • Globalne varijable - koristite IIFE (immediately invoked function expression) • Anonimne funkcije?
15. ČIST KOD
16. RUKOVANJE GREŠKAMA • Pomoću dekoratora možemo reći koji Angular-ov servis želimo da “doradimo” • $exceptionHandler servis
17. RUKOVANJE GREŠKAMA
18. $HTTP INTERCEPTORS • request / requestError • response / responseError
19. KEŠIRANJE TEMPLATE-OVA • Pre postavljanja u produkciju obavezno • Štedimo na XHR requestovima • Može se automatizovati
20. DI • Kod mene u lokalu radi… ne znam otkud ove greške u produkciji!? • Bezbedno minifikovanje DI
 array ili $inject ili ngMin [deprecated] ili ngAnnotate
21. DI
22. DI • Koji način je najbolji? 
 
 Izaberi jedan i pridržavaj se toga…
23. BACKENDLESS • CouchDB (PouchDB) • Firebase (AngularFire) • Koristiti samo za neke delove sistema. • Korisno u offline režimu rada.
24. “NAJVEĆI” PROBLEM • Sve postaje “jako sporo” kada broj watcher-a po stranici postane veći od ~2000.
25. OPTIMIZACIJA • Smanjiti broj watcher-a • Koristiti Bindonce modul gde vam ne treba two-way binding • Izbegavati angular $filter i custom filtere • Kompleksne stvari u $digest ciklusu • $templateCache • Compile i link funkcije
26. AUTOMATIZACIJA
27. ŠTA MOŽEMO DA AUTOMATIZUJEMO? • Minifikacija (zajedno sa ngAnnotate) • Spajanje svih fajlova u jedan (eventualno 2 fajla) • Verzionisanje (JS i CSS fajlova) • Keširanje template-a (zajedno sa minifikacijom) • Pokretanje testova • Build (i deploy) proces • Linter • Optimizacija slika i css-a
28. KORISNE BIBLIOTEKE • restangular • angular-gestures • angular-ui-router • angular-loading-bar • angular-bootstrap • angular-local-storage • angular-translate • ng-file-upload • angular-google-chart • angular-bindonce
29. Hvala na pažnji!