Angular 2 - SSD 2016 London

1. 1
What does Angular 2.0 hold in store?
Manfred Steyer
ManfredSteyer
About me …
Manfred Steyer
Trainer & Consultant
Angular & .NET
Page  2

2. 2
Contents
Overview about Angular 2
Sample with Visual Studio Code (Live-Coding)
Folie 3
MOTIVATION
Page  4

3. 3
Platforms and Usability
HTML + JavaScript
Single Page Application
High-Level Architecture
Page  6
Services
HTML/
JavaScript-Client
HTTP
Single Page Application (SPA)

4. 4
Page  7
HTML + JavaScript => Complexity
Page  8
HTML + JavaScript + jQuery => Complexity

5. 5
Page  9
Several SPA-Frameworks
AngularJS 1.x
Page  10
Community Dispersion
Eco-
System

6. 6
Angular 1
1.1 Million
Developers
angular-connect, Autumn 2015, London
Folie 12

7. 7
angular-connect, Autumn 2015, London
Folie 13
ANGULAR 2
Page  14

8. 8
Focus
Folie 15
Performance Mobile
Components Modern Web
State
RC since May 2016
Folie 16

9. 9
TypeScriptES 6
Languages
Page  17
ES 5
Folie 18
Performance

10. 10
Angular
Universal
Web
Workers
HTML
Template
JavaScript
Template Compiler
Performance
1
4
3
2
Via routes!
Lazy Loading

11. 11
ECO-SYSTEM
Page  21
Installed Mobile

12. 12
Chrome Node
Electron
Installed Desktop
Angular CLI
Folie 24

13. 13
Augury
Folie 25
Mobile Toolkit
Folie 26

14. 14
Component Toolkits
Folie 27
SELECTED PROJECTS
Page  28

15. 15
70 developers
300K LOC
500 components
100s developers
Millions of LOC

16. 16
COMPONENTS
WITH ANGULAR 2
Page  31
Component Controller
Page  32
@Component({
selector: 'flight-list',
templateUrl: 'flight-list.html'
})
export class FlightListComponent {
from: string;
to: string;
flights: Array<Flight>;
constructor(flightService: FlightService) { }
search() { [...] }
select(flight: Flight) { [...] }
}

17. 17
Template
Page  33
<input [(ngModel)]="from">
<input [(ngModel)]="to">
<button [disabled]="!from || !to" (click)="search()">
Search
</button>
<table>
<tr *ngFor="let flight of flights">
<td>{{flight.id}}</td>
<td>{{flight.datum}}</td>
<td>{{flight.von}}</td>
<td>{{flight.zu}}</td>
</tr>
</table>
DEMO
Page  35

18. 18
DEMO
Page  38
Summary
Folie 40
Components
ES6 &
TypeScript
Performance
Ecosystem Browser
Installed
Mobile
Installed
Desktop

19. 19
manfred.steyer@SOFTWAREarchitekt.at
SOFTWAREarchitekt.at
ManfredSteyer
Contact
Credits
Brad Green, Jules Kremer:
Keynote, ngconf 2016,
https://docs.google.com/presentation/d/1GII-
DABSG5D7Yhik4Be5RvL6IXPt-
Kg8lXFLnxkhKsU/edit?pref=2&pli=1
Brad Green, Igor Minar, Jules Kremer: Keynote,
AngularConnect 2015:
https://docs.google.com/presentation/d/1r1ffV-
shRXHXct9DbJRVesNs6oLLk8PFGQvlE1zLpRE/edi
t?pref=2&pli=1#slide=id.ge4d624f6e_1_0
Folie 42