Lightning talk z nekonference jOpenspace 2016. Framework Angular 2 vyšel v dlouho očekávané finální verzi, co přináší proti předchozí verzi, jaká je motivace jeho vzniku a kdy o něm má smysl přemýšlet Materiály: http://www.angular.cz/jopenspace-2016

1. Angular 2
Víťa Plšek
@VitaPlsek
Java / Javascript
www.angular.cz

2. vlastní
kompozice
knihoven framework
Kudy do světa frontendu ?

3. ?

4. Stack Overflow - Developer Survey 2016
MOST POPULAR TECHNOLOGIES
Angular
přerostl své odvětví

5. Angular 1.x
● od roku 2009
● naučil lidi psát SPA
● velká komunita
● oblíbený v enterprise
Source: State of Octoverse 2016

6. ⚠ dirty checking
⚠ lazy loading
⚠ renderování na serveru

7. Angular 2 - nový začátek
● 22. září 2014 - první zmínka
● 30. dubna 2015 - preview
● 15. prosince 2015 - beta
● 4. května 2016 - rc
● 14. září 2016 - finální

8. Angular 2 chce být komplexní platformou

9. Lepší podpora IDE

10. class HeroDetailComponent implements OnInit {
hero: Hero;
onUpdate = new EventEmitter<Hero>();
constructor(private heroService: HeroService) {}
update(): void {
this.heroService.saveHero(this.hero)
.then(hero => this.onUpdate.emit(hero));
});
}
...
}

11. @Component({
selector: 'hero-detail',
templateUrl: './hero-detail.component.html',
styleUrls: ['./hero-detail.component.css'],
providers: [HeroService]
})
class HeroDetailComponent implements OnInit {
hero: Hero;
onUpdate = new EventEmitter<Hero>();
constructor(private heroService: HeroService) {}
update(): void {
this.heroService.saveHero(this.hero)
.then(hero => this.onUpdate.emit(hero));
});
}
...
}

12. @Component({
selector: 'hero-detail',
templateUrl: './hero-detail.component.html',
styleUrls: ['./hero-detail.component.css'],
providers: [HeroService]
})
class HeroDetailComponent implements OnInit {
@Input() hero: Hero;
@Output() onUpdate = new EventEmitter<Hero>();
constructor(private heroService: HeroService) {}
update(): void {
this.heroService.saveHero(this.hero)
.then(hero => this.onUpdate.emit(hero));
});
}
...
}

13. ElementElement
RouterComponent
NgModule
Lazy Loading
NgModule
ElementElement
Component
Platform

14. Angular Universal

15. Angular CLI (Command Line Interface)
Komplexní
vývojový
devstack

16. ** Použitím technologie v ranné fázi akceptujete, že knihovny, nástroje a doporučené postupy nemusí být ve stavu, který očekáváte.
Psát dnes nové aplikace v Angular 2 ?

17. Co se stávajícími systémy ?

18. Vyzkoušejte tutorial
Tour of Heroes na angular.io
Jak začít ?

19. … díky za pozornost
angular.cz/jopenspace-2016