Angular 2 for .NET Developers Pawel Gerr Thinktecture AG @pawelgerr 

Motivation Why should we look into Angular 2? Do we have to rethink everything we learned? Live Coding Testing Going Native Talking Points 2 

• WPF (Windows Presentation Foundation) • UWP (Universal Windows Platform) runs on Windows 10+ only • Xamarin supports mobile devices basically (at the moment) What about WPF/ UWP / Xamarin? 3 

Web applications are accessible on all devices in a browser … if we have access to the network • HTML, scripts and styles have to be downloaded • Unless we are using Application Cache that is deprecated • Service Workers whose specification isn’t finished yet • The views are rendered on the server, in general ASP.NET applications are usually not designed to run completely offline What about ASP.NET? 4 

Fortunately, we don’t have to … Do we have to rethink everything we learned? 5 

Macro Architecture 6 Server Web API STS API Controller (Facade) Business Logic Ressource / Data Access (EF) SQL Server MySQL Sqlite WS Files Angular + HTML + JS Browser Cordova iOS Android Electron Win MacOS Linux CefSharp .exe Win 8 & 10 

MVVM (Model-View-ViewModel) Architectural Pattern – WPF 7 

MVC (Model-View-Controller) Architectural Pattern – ASP.NET MVC 8 

MVW (Model-View-WhatEver) Architectural Pattern – Angular 2 (SPA) 9 

Compose desired user control Usage Components in WPF 10 Name: 

Child Actions (MVC 5) or ViewComponents (MVC 6) Usage Component in ASP.NET 11 [ViewComponent] public class CustomerFormViewComponent : ViewComponent { public IViewComponentResult Invoke() { var customer = new CustomerViewModel() { Name = "Customer name"}; return View(customer); } } @using (Html.BeginForm()) { @Html.Label("Name:"); @Html.TextBoxFor(model => model.Name); } @Component.Invoke(typeof(CustomerFormViewComponent)) 

Create and export a component Usage Components in Angular 2 12 @Component({ selector: 'customer-form', template: ` Name: ` }) export class CustomerForm { public name: string; constructor() { this.name = 'Customer name'; } } 

WPF • XAML ASP.NET MVC • HTML (Razor Engine) • Server-side rendering Angular 2 • HTML (Built-in Parser) • Client-side rendering by default • Open rendering architecture (can be done on server or in mobile native environments) Declarative View Definition 13 

XAML • One-Way • Two-Way ASP.NET • One-Way • Two-Way not applicable because the rendering happens on server Angular 2 • One-Way • Two-Way Data Binding 14 @Html.TextBoxFor(model => model.Name) @Model.Name {{name}} 

.NET • Yes, .NET offers compile-time type safety  • Razor markup is type safe as well Angular 2 • Uses TypeScript that is a typed superset of Javascript Type Safety 15 @Component({ … }) class CustomerForm { public name: string; constructor() { … } public submit(): void { … } } 

.NET • Libraries: Ninject, AutoFac, Unity, … • Supports: Constructor/property/method injection Angular 2 • Build-in dependency injection • Supports: Constructor injection Loose Coupling via Dependency Injection 16 

.NET • Unit and integration tests with the help of dependency injection • Libraries: MSTest, nUnit, Moq, FluentAssertions, … Angular 2 • Unit and end-to-end tests • Libraries: Jasmine, Karma, Instanbul, Protractor Testing 17 describe(‘getCustomers', () => { const service = new CustomerService(); it('should return 3 customers', () => { var list = service.getCustomers(); expect(list.length).toBe(3); }); }); 

Here are some tools you should look at • Package Manager: NuGet => NPM • Building Projects: MsBuild/„F6“ in Visual Studio => Gulp • [Optional] Testing: MsTest/nUnit etc. => jasmine and karma • [Optional] Debugger: Visual Studio => Chrome Dev-Tools • [Optional] IDE: Visual Studio => WebStorm Tooling 18 

Setup and Bootstrapping Live Coding 19 

• Hierarchical dependency injectors Live Coding – Dependency Injection 20 

Pawel Gerr Thinktecture AG [email protected] @pawelgerr Contact 21 

Angular 2 • https://angular.io • https://angular.io/docs/ts/latest/guide/ architecture.html Angular 2 – Unit Testing • https://medium.com/google-developer- experts/angular-2-unit-testing-with- jasmine-defe20421584#.gii2d4r29 Bootstrap • http://getbootstrap.com AdminLTE 2 • https://almsaeedstudio.com/themes/Ad minLTE/index2.html WebStorm • https://www.jetbrains.com/webstorm/speci als/webstorm/webstorm.html Cordova • http://cordova.apache.org/ Electron • http://electron.atom.io/ Gulp • http://gulpjs.com/ Demo App • https://github.com/PawelGerr/angular2- todolist/tree/usergroupevents Resources 22 

Thank you. 23