What does Angular 2.0 hold in store? - SDD...

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

19

manfred.steyer@SOFTWAREarchitekt.at

SOFTWAREarchitekt.at

ManfredSteyer

Contakt