ANGULAR 2 & TYPESCRIPT
Ante Burazer, Vladan Strigo

 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?

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

Š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

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

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

Osnovni dijelovi
Components Directives
Routes Services

DEMO

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

Komponente? Angular 1
Event
Data
APP Person
People
List
Pet

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

Change Detection? Što želimo?

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

Change Detection? Kako radi?

DEMO

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

TypeScript
JavaScript

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…?

DEMO

 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?

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

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