Embed Size (px)
Citation preview
1
What does Angular 2.0 hold in store?
Manfred Steyer
ManfredSteyer
About me …
Manfred Steyer
Trainer & Consultant
Angular & .NET
Page 2
2
Contents
Overview about Angular 2
Sample with Visual Studio Code
Outlook: Angular 2 and ASP.NET
Folie 3
MOTIVATION
Page 4
3
Platforms and Usability
HTML + JavaScript
Single Page Application
High-Level Architecture
Page 6
Services
HTML/
JavaScript-Client
HTTP
Single Page Application (SPA)
4
Page 7
HTML + JavaScript => Complexity
Page 8
HTML + JavaScript + jQuery => Complexity
5
Page 9
Several SPA-Frameworks
AngularJS 1
Page 10
Community Dispersion
Eco-System
6
Angular 1
1.1 MillionDevelopers
angular-connect, Autumn 2015, London
Folie 12
7
angular-connect, Autumn 2015, London
Folie 13
ANGULAR 2
Page 14
8
Focus
Folie 15
Performance Mobile
Components Modern Web
TypeScriptES6ES5 Dart
No JS
TypeScriptES6
Languages
JavaScript-Based Syntax
9
Folie 17
Performance
Angular
UniversalWeb
Workers
HTML
TemplateJavaScript
Template Compiler
Performance
10
1
4
3
2
Via routes!
Lazy Loading
ECO-SYSTEM
Page 20
11
Installed Mobile
Chrome Node
Electron
Installed Desktop
12
Angular CLI
Folie 23
Augury
Folie 24
13
Mobile Toolkit
Folie 25
Component Toolkits
Folie 26
14
SELECTED PROJECTS
Page 27
70 developers
300K LOC
500 components
15
100s developers
Millions of LOC
COMPONENTS WITH ANGULAR 2
Page 30
16
Component Controller
Page 31
@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) { [...] }
}
Template
Page 32
<input [(ngModel)]="from">
<input [(ngModel)]="to">
<button [disabled]="!from || !to" (click)="search()">
Search
</button>
<table>
<tr *ngFor="let flug of fluege">
<td>{{flug.id}}</td>
<td>{{flug.datum}}</td>
<td>{{flug.von}}</td>
<td>{{flug.zu}}</td>
</tr>
</table>
17
DEMO
Page 34
ANGULAR & ASP.NET ?
Page 35
18
Ideas
[Model-Metadata for Validation and Forms]
Serverside Rendering
10 x Startup-Performance
SEO
Reach
Folie 36
DEMO
Page 37
