Angular 2 and TypeScript presentation from 2016 Dump Day.

1. ANGULAR 2 & TYPESCRIPT
Ante Burazer, Vladan Strigo

2.  Kakve su to moderne web aplikacije?
 Kako smo došli do ovdje?
 Što je zapravo Angular?
 Zašto ga odabrati, a zašto i ne?
 Osnovni dijelovi
 Što novog nosi Angular 2?
 Gdje u svemu ovome dođe TypeScript?

3. Kakve su to moderne web aplikacije?
 Ideja je ”glumiti” Windows aplikaciju
 JavaScript bazirane aplikacije
 Vrte se na klijentu
 SPA – Single Page Aplikacije
 Sva logika na jednoj stranici!
 ”The worlds most misunderstood programming language”
- Douglas Crockford

4. Što je zapravo Angular?
 ”What HTML would have been, had it been designed for
applications”
 ” Angular is built around the belief that declarative code is better
than imperative when it comes to building UIs and wiring
software components together, while imperative code is
excellent for expressing business logic.”
 Naglašava HTML stranu aplikacije
 MVC / MVVM design patterni na klijentu
 Potpuni framework

5. Zašto ga odabrati?
 Jedan od vodećih frontend frameworka
 Zreo framework iza kojeg stoji Google i aktivan community
 Aktivno prati trendove i prilagođava se potrebama korisnika
 Upravo prepisan za v2 iz nule
 Out-of-the-box kompletan framework
 Routing, ajax, testing, DI
 Potiče konzistentnost, olakšava learning curve
 Može se koristiti i za razvoj hibridnih mobilnih aplikacija

6. Zašto ga ne odabrati?
 Framework je velik
 Nemogućnost selektivnog odabira komponenti
 Specifična sintaksa i HTML tagovi

7. Osnovni dijelovi
Components Directives
Routes Services

8. DEMO

9. Što novog nosi Angular 2?
 Prepisan iz nule da riješi arhitekturna ograničenja iz v1
DirectivesChange DetectionComponents
Dependecy Inject. TypeScript NPM Packages

10. Komponente? Angular 1
Event
Data
APP Person
People
List
Pet

11. Komponente? Angular 2
Event
Data
APP
People
List
Pet
List
Pet Pet Person Person

12. Change Detection? Što želimo?

13. Change Detection? Kako radi?
 Napravljeno da bude proširiv / zamjenjiv mehanizam
 Sada je moguće birati za svaku komponentu način detekcije
 Standardni način, Observables, Immutable
 Također jako bitna promjena - stablasta struktura vs. flat
strukture iz v1

14. Change Detection? Kako radi?

15. DEMO

16. TypeScript
 Najveća mana JavaScripta  nema type checking
 Najveća prednost JavaScripta  nema type checking

 TypeScript = JavaScript + Types

17. TypeScript
JavaScript

18. TypeScript
 Microsoft did it right 
 Design time alat
 Ne dodaje type checking ni provjere u naš kod
 Provjere sintakse
 Objektno orijentiran JS
 Generira ES5 kod
 ECMAScript 4, ECMAScript 5, ECMAScript 6…?

19. DEMO

20.  Moderne web aplikacije?
 Upoznali smo se s Angularom
 Pronašli mjeru i razloge za koristiti ga
 Upoznali Angular 2
 Stavili TypeScript na kartu
Što smo prošli?

21. PITANJA?
aburazer@netmedia.hr
vladan@netmedia.hr

22. HVALA NA PAŽNJI
http://meet.netmedia.hr