Angular 2 for .NET Developers

Transcript

1. Angular 2 for .NET Developers Pawel Gerr Thinktecture AG @pawelgerr
2. Motivation Why should we look into Angular 2? Do we have to rethink everything we learned? Live Coding Testing Going Native Talking Points 2
3. • 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
4. 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
5. Fortunately, we don’t have to … Do we have to rethink everything we learned? 5
6. 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
7. MVVM (Model-View-ViewModel) Architectural Pattern – WPF 7
8. MVC (Model-View-Controller) Architectural Pattern – ASP.NET MVC 8
9. MVW (Model-View-WhatEver) Architectural Pattern – Angular 2 (SPA) 9
10. Compose desired user control Usage Components in WPF 10 <UserControl ... > <Grid> <StackPanel> <DockPanel> <Label>Name:</Label> <TextBox Text="{Binding Path=Name}"></TextBox> </DockPanel> </StackPanel> </Grid> </UserControl> <StackPanel Margin="10"> <local:CustomerForm></local:CustomerForm> </StackPanel>
11. 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))
12. Create and export a component Usage Components in Angular 2 12 @Component({ selector: 'customer-form', template: ` <label>Name:</label> <input type="text" [(ngModel)]="name" /> ` }) export class CustomerForm { public name: string; constructor() { this.name = 'Customer name'; } } <customer-form></customer-form>
13. 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
14. 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 <TextBox Text="{Binding Path=Name, Mode=OneWay}"></TextBox> <TextBox Text="{Binding Path=Name, Mode=TwoWay}"></TextBox> @Html.TextBoxFor(model => model.Name) @Model.Name <input type="text" [ngModel]="name" /> {{name}} <input type="text" [(ngModel)]="name" />
15. .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 { … } }
16. .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
17. .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); }); });
18. 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
19. Setup and Bootstrapping Live Coding 19
20. • Hierarchical dependency injectors Live Coding – Dependency Injection 20
21. Pawel Gerr Thinktecture AG pawel.gerr@thinktecture.com @pawelgerr Contact 21
22. 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
23. Thank you. 23