Angular 2 with ASP.NET Core in Practice Greg Burke – Software Architect

Application Requirements Maintain application customizations Self-service Mobile-first Standalone application

Single Page Apps Limit page requests for UX Load content up front (bundled) Load additional data through async requests Route-first Data-binding Module management

Previous SPA Framework Custom for FPI Dedicated framework resources High flexibility, high cost “Dead framework” Expensive onboarding

Choosing a Framework Comprehensive framework We don’t have to build it Large ecosystem Training/resources available

Choosing Angular 2 Comprehensive Supported by Google developers, OSS Many plugins available Good documentation, Pluralsight Paid support available (NRWL) React/Vue Aurelia

Stack Comparison Functionality FPI SPA Framework + ASP.NET Angular2 + ASP.NET Core Routing SammyJS / Custom wrapper Angular Router Data-binding KnockoutJS Angular Templating Event Model Custom Angular Component Lifecycle Web Components KnockoutJS Components Angular Components UI Controls Custom + Bootstrap Ng-bootstrap Module Loading RequireJS Webpack Bundling ASP.NET Bundling C# packages DLLs in TFS Nuget JS packages Manual NPM C# dependency injection Ninject ASP.NET Core JS dependency injection N/A Angular @Injectable JS Inheritance Typescript

NPM Node Package Manager Client JS packages Build tool packages Cleaner dependency management

Webpack NPM package Bundler Module loader Recommended for Angular 2 Loaders HMR

Angular 2 Typescript Dependency injection Components Routing Async support Unit testing

Angular 2 Ecosystem Plugins on NPM Integrated libraries Ng-bootstrap Ng2-idle Ng-busy Open source contributions

Webpack Demo Bundling Vendor vs main Loaders HMR Image bundling Style inlining

Typescript Demo Type annotations Renaming Go to definition Type definitions Edge cases Source maps

Angular 2 Demo Modules Services Components (async) Route Guards (async) Resolvers Ecosystem

ASP.NET Core Demo Dependency injection Web API Full framework dependencies

Unit Test Demo Npm test Command line tests Karma Jasmine Phantom TestBed Debugging tests

TFS Build Definitions Install .NET Core runtime and SDK Dotnet restore Dotnet publish Project publish scripts

Mobile-first Demo Ng-bootstrap

Framework Fatigue Choosing Angular Ecosystem Angular style guide UI controls TS, Jasmine, DI