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

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

3. 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

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

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

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

7. 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
JS Inheritance
Typescript

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

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

10. Angular 2 Typescript Dependency injection Components Routing
Async support
Unit testing

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

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

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

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

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

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

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

19. Mobile-first Demo
Ng-bootstrap

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