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.

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

https://aka.ms/advocates @azureAdvocates   https://aka.ms/advocates @azureAdvocates https://jlik.me/d6s //Angular with .NET Core

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

.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

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

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.

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.

.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

.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

.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 10.0 10.0.16299 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

2.0 .NET Standard 2.0 20,000 new APIs! .NET Core 1.0 2.0 2.1 .NET Framework 4.6.1 Mono 4.6 5.4 Xamarin.iOS 10.0 10.14 Xamarin.mac 3.0 3.8 Xamarin.Android 7.0 8.0 UWP 10.0.16299 20,000 new APIs! 1.6 > 2x more APIs 2.0

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

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 https://docs.microsoft.com/en-us/dotnet/standard/net-standard Data - DataSet * DataTable * SQLClient THREADING Threads • Thread Pool • Tasks CORE Primitives • Collections • Reflection • Interop • Linq

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

Choice of tools Visual Studio

Choice of tools Visual Studio Visual Studio Code

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

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

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

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

Why .NET Core for Angular?

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)

Angular as a static website npm i –g @angular/cli ng new static-app ng serve --open mkdir core-api cd core-api dotnet new webapi dotnet run

Angular as a static website

Angular hosted by .NET Core mkdir ng-hosted cd ng-hosted dotnet new angular dotnet run // template: https://jlik.me/d8s

Angular hosted by .NET Core

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)

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" }; });

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

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

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

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.

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.

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.

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.

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

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

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

What about cost? Storage

What about cost? Storage

What about cost? Storage

What about cost? Functions

What about cost? Functions

What about cost? Functions

Hosting Angular and .NET Core

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