1. Angular in the .NET World
1/11/2019 3:21 PM
Angular in the .NET World
@JeremyLikness
Cloud Developer Advocate
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

2. Jeremy Likness https://blog.jeremylikness.com/ @JeremyLikness
Cloud Dev Microsoft
Professional Developer for 24+ Years
@JeremyLikness

3. https://aka.ms/advocates @azureAdvocates
@azureAdvocates
//Angular with .NET Core

5. What is .NET Core?
Why use .NET for Angular?
How do they work together?
Where can they be hosted?

6. .NET Core .NET Core 1.0 (**web) .NET Standard 1.0 – 1.6
ASP.NET Core 1.0
Entity Framework Core 1.0
.NET Core 2.x (**compat.)
.NET Standard 2.x
ASP.NET Core 2.x
Entity Framework Core 2.x
.NET Core June 2016
.NET Core 2 Aug 2017

7. Evolution of .NET 1.0 4.5 4.0 4.6 4.7 4.7.1 4.6.2 Feb 2002 Oct 2017
Aug 2016
Core 1.0
Core 2.0
Core 2.1
.NET Framework still receiving updates and features. Not going away.
Jun 2016
Aug 2017
May 2018
End of Life
October 1, 2018

8. Quick note… .NET Standard is the interface
1/11/2019 3:21 PM
Quick note…
.NET Standard is the interface
.NET Core 2.1 is one of many implementations
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

9. Quick history… Remember when we’d share source code files as links?
1/11/2019 3:21 PM
Quick history…
Remember when we’d share source code files as links?
Portable Class Library (PCL) provided a lowest common denominator
.NET standard sets the specification to implement
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

10. .NET Standard
WINDOWS
DESKTOP
WINDOWS UWP
CLOUD MICROSERVICES
IOS, ANDROID
.NET STANDARD
INFRASTRUCTURE
COMPILERS
LANGUAGES
RUNTIME COMPONENTS
GAMES/ 3D
Visual Studio
Visual Studio Code
Visual Studio for Mac
Implementation
Interface
.NET Standard allows sharing code, binaries, and skills between .NET client, server, and all flavors
.NET Standard provides a specification for any platform to implement
All .NET runtimes provided by Microsoft implement the standard

11. .NET Standard 1.0 .NET Core 1.0 .NET Framework 4.5 Mono 4.6
Xamarin.iOS 10.0
Xamarin.mac 3.0
Xamarin.Android 7.0
UWP 10.0
Windows 8.0
Windows Phone 8.0
1.0
.NET Standard 1 – supports lots of platforms but small API surface area

12. .NET Standard 1.6 .NET Core 1.0 .NET Framework 4.5 4.6.1 Mono 4.6
Xamarin.iOS 10.0
Xamarin.mac 3.0
Xamarin.Android 7.0
UWP
Windows 8.0
Windows Phone 8.0
1.0
Higher levels of .NET Standard includes previous
Bigger API surface areas – fewer supported platforms
Still not big enough. Lots of APIs missing if porting from .NET Framework
1.6

13. 2.0 .NET Standard 2.0 20,000 new APIs! .NET Core 1.0 2.0 2.1
.NET Framework 4.6.1
Mono
Xamarin.iOS
Xamarin.mac
Xamarin.Android
UWP
20,000 new APIs!
1.6
> 2x more APIs
2.0

14. +20K ~70% .NET Standard 2.0 Has much bigger API surface
1/11/2019 3:21 PM
.NET Standard 2.0
+20K
More APIs than
.NET Standard 1.x
Has much bigger API surface
Extended to cover intersection between .NET Framework and Xamarin
Also makes .NET Core 2.0 bigger as it implements .NET Standard 2.0
~70%
of NuGet packages
are API compatible
Can reference .NET Framework libraries
Compatibility shim allows referencing existing .NET Framework binaries
No recompile required – also covers existing NuGet packages
Limited to libraries that only use APIs that are available for .NET Standard
© 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

15. APIs in .NET Standard 2.0 DATA XML SERIALIZATION NETWORKING IO
DataSet • DataTable • SQLClient
XML
XLinq • XML Document • XPath • Schema • XSL
SERIALIZATION
BinaryFormatter • Data Contract • XML
NETWORKING
Sockets • HTTP • Mail • WebSockets IO
Files • Compression • MMF
Data - DataSet * DataTable * SQLClient
THREADING
Threads • Thread Pool • Tasks
CORE
Primitives • Collections • Reflection • Interop • Linq

16. RHEL CentOS Oracle Linux
More platforms
Windows 7
Windows 8
Windows 10
Windows Server 2008 R2
Windows
macOS
macOS (Sierra)
Linux
RHEL  CentOS  Oracle Linux
Fedora
Debian
Ubuntu
Linux Mint
openSUSE
SLES

17. Choice of tools
Visual Studio

18. Choice of tools
Visual Studio
Visual Studio Code

19. Choice of tools
Visual Studio
Visual Studio Code
Visual Studio for Mac

20. Fast ASP.NET Core ASP.NET Core 2
20% faster
Requests per second - github.com/aspnet/benchmarks

21. Fast ASP.NET 4.6 ASP.NET Core ASP.NET Core 2
Requests per second - github.com/aspnet/benchmarks

22. Explore ASP.NET Core Documentation https://jlik.me/d6t
.NET Standard
Getting Started/Install

23. Why .NET Core for Angular?

24. Why .NET Core for Angular?
Angular as a static website
.NET Core for authentication
.NET Core for Web API (REST endpoints)
Angular hosted in .NET Core, like a static website
Angular pages “pass through”
Rest is like static configuration
Angular hosted in .NET Core
Server-side rendering (SSR)

25. Angular as a static website
npm i
ng new static-app
ng serve --open
mkdir core-api
cd core-api
dotnet new webapi
dotnet run

26. Angular as a static website

27. Angular hosted by .NET Core
mkdir ng-hosted
cd ng-hosted
dotnet new angular
dotnet run
// template:

28. Angular hosted by .NET Core

29. Benefits of .NET Core Hosting
Retain full use of Angular CLI (everything in ClientApp)
Source maps to debug through TypeScript
Auto re-compile (of client code)
Automatically produces AoT compiled build for production
Pre-rendering (server side rendering)

30. Pre-rendered Angular https://jlik.me/d8f
spa.UseSpaPrerendering(options => {
options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/main.bundle.js";
options.BootModuleBuilder = env.IsDevelopment()
? new AngularCliBuilder(npmScript: "build:ssr")
: null;
options.ExcludeUrls = new[] { "/sockjs-node" };
});

31. Pre-rendered Angular https://jlik.me/d8f

32. Caution flag Server-side rendering (SSR) requires Node.js installation
SSR publishes the full node_modules directory and will break the Internet
SSR requires code does additional checks for objects that don’t exist on the server, such as window and localStorage
Client rendering triggers immediately after initial render

33. Hosting Angular and .NET Core
Static website with Azure Storage
Azure Functions
Azure App Service
Azure App Service for Linux (containers)

34. Microsoft Tech Summit FY17
1/11/2019 3:21 PM
What is the right size of
servers for my business needs?
How do I deploy new code to my server?
What happens in case of
server hardware failure?
What media should I
use to keep backup?
Which packages should be on my server?
Who monitors
my App?
What size of servers
should I buy?
How often should I backup my server?
How can I increase server utilization?
How can I scale my app?
Who has physical
access to my servers?
Which OS should I use?
Do I need secondary network connection?
Are my server in a
secure location?
What happens if the
power goes out?
Who monitors
my Servers?
Do I need a UPS?
What storage I need to use?
Starting on site. Lots of responsibility and questions to answer.
How many servers
do I need?
How can I dynamically configure my app?
It takes how long to provision a new server?
How often should
I patch my servers?
On-Premises
The “evolution” of application platforms
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

35. Microsoft Tech Summit FY17
1/11/2019 3:21 PM
What is the right size of servers for my business needs?
How can I increase server utilization?
How many servers do I need?
How can I scale my app?
How often should I patch my servers?
How do I deploy new code to my server?
How often should I backup my server?
Which OS should I use?
Which packages should be on my server?
Who monitors my App?
Infrastructure as a Service addresses a lot of the questions, and paves the way to the cloud.
Virtual
Machine
On-Premises
IaaS
The “evolution” of application platforms
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

36. Microsoft Tech Summit FY17
1/11/2019 3:21 PM
What is the right size of “servers” for my business needs?
How can I increase “server” utilization?
How many “servers” do I need?
How can I scale my app?
App
Service
Platform-as-a-Service is the next evolution: host a runtime, so we stop worrying about hardware and operating system and even dependencies and just focus on our project.
On-Premises
IaaS
PaaS
The “evolution” of application platforms
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

37. Microsoft Tech Summit FY17
1/11/2019 3:21 PM
Functions
How do I architect my app?
Serverless takes us to the ultimate cloud native experience: we simply focus on code.
Serverless, the platform for cloud native apps
On-Premises
IaaS
PaaS
Serverless
The “evolution” of application platforms
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

38. What is Serverless? Abstraction of servers Event-driven/ instant scale$
Abstraction of servers
Event-driven/ instant scale
Micro-billing
Abstraction of servers, infrastructure and configuration of operating system
Event-driven scale
Sub-second billing
Stateless
Serverless compute is a fully managed service. Some refer to it as Functions as a Service
OS and Framework patching is performed for you
There is zero administrative tasks and no need to manage any infrastructure
You just deploy your code (function) and it runs
Your code runs within seconds and for very short period of time
Serverless compute scales quickly (almost instantly) and vastly
Automatically scales within seconds
No scale configuration is required (there is no way to configure scale or limits)
Scales to match any given workload. Scales from zero to handle tens of thousands concurrent functions invocations within seconds
Pay only for the time your code is running
Serverless compute reacts to events
React, in near real-time, to events and triggers
Triggered by virtually any event from Azure service or 3rd party services
Setup time, provisioning is long & costly

39. What is Serverless? Micro-billing $
Highlight of micro-billing and low cost

40. What is Serverless? $
Micro-billing
Serverless “rules”

41. What about cost? Storage

42. What about cost? Storage

43. What about cost? Storage

44. What about cost? Functions

45. What about cost? Functions

46. What about cost? Functions

47. Hosting Angular and .NET Core

48. https://blog.jeremylikness.com/ @JeremyLikness
1/11/2019 3:21 PM
@JeremyLikness
Source code:
.NET Core Documentation
.NET Standard
Getting Started/Install .NET Core
Angular template for .NET Core
Server-side rendering (SSR)
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.