ANGULAR 2 & TYPESCRIPTAnte 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

ListPet

Komponente? Angular 2Ev

ent

Dat

aAPP

People

ListPetList

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

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.hrvladan@netmedia.hr

HVALA NA PAŽNJIhttp://

meet.netmedia.hr