Limitations of Azure App Services

Remote Desktop Is Not Available

Typically, when we are deploying an app or troubleshooting application problems, you would tend to remote into the server to look at log files, review IIS settings, look at event viewer, etc. When you first start using Azure Web Apps, you have to get used to this and learn about the other ways of doing most of these functions. Deploying code is done via Visual Studio, git, a build server, or FTP. Viewing App Service log files, event viewer, running processes, and other tasks can be accomplished via the kudu console, Stackify, and/or Azure portal.

Limits on Installing 3rd Party Software and Management Tools

One of the biggest benefits of Azure App Services is also a big limitation. You don’t have to manage Windows Server at all and Microsoft is completely responsible for everything. But, you also have no access to install virtually all 3rd party software. This can be a negative if your corporate IT uses traditional monitoring tools like Nagios, SolarWinds, Dynatrace, Splunk and many others.

There are some vendors who have adapted their products to work with Azure App Services but there are very few. You can check the Azure marketplace to look for potential solutions. Do note that some of the listed products may only work for virtual machines and not Azure Web Apps.

Performance Counters Are Not Available

Performance counters can be a pain to work with. But they are critical to understanding key metrics about IIS, applications, and the .NET CLR. Without performance counters there is no way to monitor things like garbage collection, IIS queuing and a lot of other data that can be critical to troubleshooting weird performance problems.

 

Antimalware for Azure Cloud Services

The modern threat landscape for cloud environments is extremely dynamic, the solution is built on the same anti-malware platform as Microsoft Anti-malware for Azure. It is a single-agent solution for applications and tenant environments, designed to run in the background without human intervention. You can deploy protection based on the needs of your application workloads, with either basic secure-by-default or advanced custom configuration, including anti-malware monitoring.

When you deploy and enable Microsoft Antimalware for Azure for your applications, the following core features are available:

  • Real-time protectio
  • Scheduled scanning
  • Malware remediation 
  • Signature updates 
  • Anti-malware Engine updates 
  • Anti-malware Platform updates 
  • Active protection 
  • Samples reporting 
  • Exclusions 
  • Anti-malware event collection 

Logging and Auditing in Azure

Types of Logs in Azure

Cloud applications are complex with many moving parts. Logs provide data to ensure that your application stays up and running in a healthy state. It also helps you to stave off potential problems or troubleshoot past ones. In addition, you can use logging data to gain deep insights about your application. That knowledge can help you to improve application performance or maintainability, or automate actions that would otherwise require manual intervention.

Azure produces extensive logging for every Azure service. These logs are categorized by these main types:

Control/management logs give visibility into the Azure Resource Manager CREATE, UPDATE, and DELETE operations. Azure Activity Logs is an example of this type of log.

Data plane logs give visibility into the events raised as part of the usage of an Azure resource. Examples of this type of log are the Windows event System, Security, and Application logs in a virtual machine and the Diagnostics Logs configured through Azure Monitor

Processed events give information about analyzed events/alerts that have been processed on your behalf. Examples of this type are Azure Security Center Alerts where Azure Security Center has processed and analyzed your subscription and provides concise security alerts.

Activity Log

The Azure Activity Log, provides insight into the operations that were performed on resources in your subscription. The Activity Log was previously known as “Audit Logs” or “Operational Logs,” since it reports control-plane events for your subscriptions. Using the Activity Log, you can determine the “what, who, and when” for any write operations (PUT, POST, DELETE) taken on the resources in your subscription. You can also understand the status of the operation and other relevant properties. The Activity Log does not include read (GET) operations.

Here PUT, POST, DELETE refers to all the write operations activity log contains on the resources. For example, you can use the activity logs to find an error when troubleshooting or to monitor how a user in your organization modified a resource.

Azure Diagnostic Logs

Azure Diagnostic Logs are emitted by a resource that provide rich, frequent data about the operation of that resource. The content of these logs varies by resource type (for example, Windows event system logsare one category of Diagnostic Log for VMs and blob, table, and queue logs are categories of Diagnostic Logs for storage accounts) and differ from the Activity Log, which provides insight into the operations that were performed on resources in your subscription.

Advantages of API Management in Azure

Protect your assets

With API Management, you can protect your enterprises’ APIs by providing security solutions including SSL, API authentication, API Keys management and other runtime policies such as API quota and rate limit.

Monitor and analyze

Get thorough insight in the performance, health and quality of your APIs. API Management provides an in-depth look into your APIs trough a diverse set of metrics about the API usage. You will be able to discover the trends that are most impacting your business.

Embrace the API economy

Exposes business assets and services to unlock additional business and generate new revenue and opportunities. API Management allows enterprises to successfully share core services across the organization and across boundaries. The lightweight virtualization layer of Azure API Management enables modern and restful APIs to integrate data and resources with today’s mobile devices, without any security sacrifice.

Drive API adoption

Provides comprehensive documentation to drive API adoption and reduce the learning curve of performing the API intake in the first place. The developer portal helps developers to easy understand and promote the use of the API and prevent misuse.

 

CORS in Azure

Cross-Origin Resource Sharing (CORS) defines a policy-driven approach for controlling how web applications make cross-domain requests. This is in contrast to the long-established single-origin policy (SOP), which says that URLs in JavaScript (and elsewhere) can only refer to the origin URL of the page. The advantage of CORS is that it allows a web app to pull resources (e.g., data and other features) from multiple websites onto one page without having to construct proxies or use other workarounds. CORS defines a contract between the client-side browser and the server application as well as an algorithm that is followed to enable server applications to opt in to allowing cross-origin requests.

Finding Your Origin

A typical web application consists of a rich browser-based client (using HTML5, JavaScript, and CSS3), served up from a web server application (such as with ASP.NET or MVC 3 in an Azure Web role) and integrating data from various Representational State Transfer (REST) services. From the perspective of the browser, there are two scenarios for how the web app gets its data from the services: same-origin and cross-origin (aka cross-domain).

In the same-origin scenario, the services are hosted within the same web server application that delivered the web page, or they may exist externally and be called from the web server application logic with their resultant data integrated in the web server application’s response. In either case, from the browser’s perspective they are being reached from the same server — the same origin. When services are accessed with different hostnames, protocols, or ports, the request is considered cross-origin. This is very common for websites that use third-party services for their data, where the browser-based client calls the service directly and the domain used to access the service is different from the domain that delivered the web page. The subtle issue here is that browsers enforce an SOP whereby such cross-domain requests are not allowed, in order to protect the browser from malicious code loaded from the external domain.

This is not an issue specific to web applications hosted on Azure, but if you are doing any amount of web application development on Azure you will undoubtedly encounter the SOP. In fact, Azure introduces additional scenarios where cross-origin resource access is required. Naturally it is best to architect your Azure-hosted solution with the SOP in mind, rather than encounter SOP and have to make drastic changes to your web application when you least expect it.

WPF 3D with Helix Toolkit

Helix Toolkit builds on the 3-D functionality in Windows Presentation Foundation (WPF).  This toolkit provides a higher level API for working with 3D in WPF, via a collection of controls and helper classes.

Using the Package Manager Console To install HelixToolkit.Wpf, run the following command in the Package Manager Console.

PM> Install-Package HelixToolkit.Wpf

Using the Nuget UI

To find HelixToolkit in NuGet, follow these steps:
1. Open your project in Visual Studio.
2. Right click on the References folder and select “Manage Nuget Packages…” from the context menu.
3. In the “Manage Nuget Packages” dialog, select “Online” on the right.
4. In the search field, enter “HelixToolkit”.
5. Select the HelixToolkit.Wpf package and press the Install button.

Creating a 3D view

The HelixViewport3D is the object that will contain our 3D scene. This is a WPF control allowing for imperative or declarative coding. Lets create a HelixViewport3D object using C#.

private void Create3DViewPort() { var hVp3D = new HelixViewport3D(); }

Using XAML object creation would look like this.

<code>&lt;Window x:Class="GettingStartedDemo.MainWindow" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:h="http://helix-toolkit.org/wpf"
        Title="Getting Started Demo" Height="480" Width="640"&gt;

     &lt;h:HelixViewport3D &gt;
     &lt;/h:HelixViewport3D&gt;

 &lt;/Window&gt;
</code>

This gives us a 3D space in which to setup our scene and work with 3D objects.

Adding lights

Next we need to add lighting to the HelixViewport3D. Without lighting, objects in the view-port scene will not be visible.

In C#:

<code>private void Create3DViewPort()
{
    var hVp3D = new HelixViewport3D();
    var lights = new DefaultLights();
    hVp3D.Children.Add(lights);
} 
</code>

In XAML:

<code>&lt;h:HelixViewport3D &gt;
     &lt;h:DefaultLights/&gt;
 &lt;/h:HelixViewport3D&gt;
</code>

Adding 3D content

Now that we have light and a view-port we can add a 3D object. Helix Toolkit comes with several 3D objects such as a box, tube, helix, pipe, and of course a teapot. Let’s add the teapot to the view-port.

In C#:

<code> private void Create3DViewPort()
 {
     var hVp3D = new HelixViewport3D();
     var lights = new DefaultLights();
     var teaPot = new Teapot();
     hVp3D.Children.Add(lights);
     hVp3D.Children.Add(teaPot);
  } 
</code>

In XAML:

<code> &lt;h:HelixViewport3D &gt;
      &lt;h:DefaultLights/&gt;
      &lt;h:Teapot/&gt;
 &lt;/h:HelixViewport3D&gt;
</code>

Complete Getting Started Example Code

In C#:

<code>public partial class MainWindow
{
    public MainWindow()
    {
        this.InitializeComponent();
        Create3DViewPort();
    }

    private void Create3DViewPort()
    {
        var hVp3D = new HelixViewport3D();
        var lights = new DefaultLights();
        var teaPot = new Teapot();
        hVp3D.Children.Add(lights);
        hVp3D.Children.Add(teaPot);
        this.AddChild(hVp3D);
    }
}
</code>

In XAML:

<code>&lt;Window x:Class="GettingStartedDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:h="http://helix-toolkit.org/wpf"
        Title="Getting Started Demo" Height="480" Width="640"&gt;

    &lt;h:HelixViewport3D &gt;
        &lt;h:DefaultLights/&gt;
        &lt;h:Teapot/&gt;
    &lt;/h:HelixViewport3D&gt;</code>

Future Versions of JavaScript Frameworks

React

After a 3 months wait, v15.5.0 is released. The team is also busy working towards v16 which is currently in alpha.
You can find React’s Patent clause here. Robert Pierce of El Camino Legal LLP has written this article criticizing Facebook’s patent clause and arguing it is not open source software. Hacker News comments here.

Aurelia

It’s now approaching a whole year since Aurelia reached v1.0.
Following the Early March Mega Release there will be an April update with — aurelia-router 1.3.0
aurelia-templating-resources 1.4.0
aurelia-cli 0.28.0
aurelia-ui-virtualization 1.0.0-beta.3.1.0
aurelia-i18n 1.5.0
and some patch releases
Several other great new Aurelia features are coming in future releases:
New Chrome Debugger
Webpack v2 support
CLI enhancements
Hot module reload
VS Code plugin enhancements
HTML Template Validation
For more details see the Aurelia blog.

Angular 2+

Angular 4 RTM will be released in March 2017! (v4.0.2)
Angular 2 reached RTM on 15th September and reached v2.4.10 before v4.
Since v2 was released, the Google team has mostly met its own proposed schedule on releasing new minor and major versions
Angular 2.1 — Route Preloading
Angular 2.2 — AOT + ngUpgrade
Angular 2.3 — Language Service
Angular 2.4 — “Stability Interjection”
Angular 4 — March 2017

The Google Team have agreed to release new patch versions every week, a new minor version every month and a major version every 6 months.

So this is the plan for new major versions

Angular 5 — Sept/Oct 2017
Angular 6 — March 2018
Angular 7 — Sept/Oct 2018

By new major version we mean new features and potential breaking changes since the last release. So we should not necessarily get overexcited about new major versions, or conflate higher major numbers with very much higher quality.

For full details see Igor Minar’s blog post and opening keynote. Igor makes many interesting points in the keynote.
Google always use the latest version of AngularJS for their own applications. He also mentions TypeScript and the desire to support v2.1.

Some of the new Angular features we can expect by March are:
– Better Compiler Errors
– Faster
– Smaller

Angular 4 is backwards compatible with Angular 2 (but not Angular 1) so Angular 2+ looks to be the better bet for new applications that you will need to maintain and improve over a long lifetime.

For applications that you expect to be one-off releases and need to release very soon, it might still make more sense to use Angular 1.x if your experience is with Angular 1.x and you want to take advantage of the more mature ecosystem that surrounds it, however the case for Angular v2+ over v1 will only grow stronger as time goes on.

The Google team recommends we use the latest version.

Polymer

Polymer v1.9 has been released.
If you haven’t currently invested in Polymer 1.x, I recommend using v2.x instead.
The 4th Release Candidate version of Polymer 2.0 has now been released. A series of videos from Polymer Summit 2016 are available on YouTube.
To learn about the upgrade path to Polymer 2.0 watch Polymer 2.0 in 2.0 seconds. To understand how it works see Polymer 2.0: Under the Hood. Rob Dodson describes Polymer as an opinionated usage of Web Components.

Ember

Ember v2.12 and v2.13 Beta are out

Full-Stack MVC Application Development with AngularJS

These days, developers are interested to use AngularJS and ASP.NET MVC (wiring MVC and AngularJS). So in this post we will learn how to combine the best of both worlds and use the goodness of AngularJS in ASP.NET MVC. 

To start, let’s create ASP.NET MVC application and right click on the MVC project. From the context menu, click on Manage Nuget Package. Search for the AngularJS package and install into the project.

After successfully adding the AnngularJS library, you can find those files inside the Scripts folders.

Reference of AngularJS library

You have two options to add an AngularJS library reference in the project: MVC minification and bundling or by adding AngularJS in the Script section of an individual view. If you use bundling, then AngularJS will be available in the whole project. However you have the option to use AngularJS on a particular view as well.

Let’s say you want to use AngularJS on a particular view (Index.cshtml) of the Home controller. First you need to refer to the AngularJS library inside the scripts section as shown below:

@section scripts{

    <script src=”~/Scripts/angular.js”>script>

}

Next, apply the ng-app directive and any other required directives on the HTML element as shown below:

<div ng-app=”” class=”row”>

     <input type=”text” ng-model=”name” />

     {{name}}

div>

When you run the application you will find AngularJS is up and running in the Index view. In this approach you will not be able to use AngularJS on the other views because the AngularJS library is only referenced in the Index view.

You may have a requirement to use AngularJS in the whole MVC application. In this case, it’s better to use bundling and minification of MVC and all the AngularJS libraries at the layout level. To do this, open BundleConfig.cs from the App_Start folder and add a bundle for the AngularJS library as shown below:

  public static void RegisterBundles(BundleCollection bundles)

        {

            bundles.Add(new ScriptBundle(“~/bundles/angular”).Include(

                        “~/Scripts/angular.js”));

 

After adding the bundle in the BundleConfig file, next you need to add the AngularJS bundle in the _Layout.cshtml as listed below:

<head>

    <meta charset=”utf-8″ />

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>@ViewBag.Title – My ASP.NET Applicationtitle>

    @Styles.Render(“~/Content/css”)

    @Scripts.Render(“~/bundles/modernizr”)

    @Scripts.Render(“~/bundles/angular”)

    @Scripts.Render(“~/bundles/jquery”)

    @Scripts.Render(“~/bundles/bootstrap”)

    @RenderSection(“scripts”, required: false)

head>

After creating an AngularJS bundle and referring to it in _Layout.cshtml, you should be able to use AngularJS in the entire application.

 

Performance of JavaScript Frameworks

Technical

Size (minified, not gzipped)

React+Redux — 156k or 167k with plugins
Angular 1 – 158k minimum, 240k with router, HTTP and animation system
Polymer — 222k minimum, 302k (spec compliant)
Aurelia — 252k minimum, 302k with standard plugin
Ember — 435k including router
Angular 2 — 698k minimum, 919k with RxJS, 1023k with RxJS and router and HTTP client

(Not that Redux is in any way large, but it is unfair to add Redux to the file size for React only. Redux happens to be more commonly used by React users, but it is an optional extra regardless of which framework you choose.)

Rob mentions that the Angular team are using tree shaking to reduce the file size.

Latest Performance Developments 

The dbmon tool to measure the performance was popularised by Ryan Florence from Facebook in his talk at Conf 2015 showing React was faster than Angular 1 and much faster than Ember back in 2015.

The dbmon test has recently been updated with adjustable mutations percentage. This is the latest performance results using this tool:

React — 52 to 54fps
Angular — 45 to 46fps
Angular 2– 49 to 52fps

Only naive implementations for Polymer and Ember are currently available
Polymer 1.8 — 44–46 fps
Polymer 2.0 –37 to 40 fps
Ember — 44–46 fps

Some other selected framework/technology results:
Vue — 51–53 fps
Vue 2–41 to 44fps
Elm — 51 to 53fps
Inferno — 54 to 56fps
Vanilla JS varies from 50 to 72 fps

 

Full-Stack MVC Application with Redux

This post covers the end-to-end process (wiring MVC and React) of creating a brand new ASP.NET MVC website and adding a React component in it. We will start from scratch and end with a fully functioning component.

We can use .NET Framework, but you can instead use .NET Core if you want to be able to run your site on Linux or Mac OS. Currently .NET Core is missing some of the functionality provided by .NET Framework, so it is recommended to use .NET Framework unless you have a reason to use .NET Core specifically (eg. cross-platform support).

Start by creating a new ASP.NET Core MVC project:

  1. File → New → Project
  2. Ensure “.NET Framework 4.6” is selected in the dropdown list at the top
  3. Go to Templates → Visual C# → Web and select the “ASP.NET Core Web Application (.NET Framework)” template. 

We need to install ReactJS.NET to the newly-created project. This is accomplished using NuGet, a package manager for .NET. Right-click on your project in the Solution Explorer and select “Manage NuGet Packages”. Click the “Browse” tab, search for “React.AspNet”, and install the React.AspNet package.

We also need to modify the Startup.cs file to initialize ReactJS.NET. Open Startup.cs and perform the following changes:

At the top of the file, add:

<code class="csharp language-csharp" data-lang="csharp"><span class="k">using</span> <span class="nn">Microsoft.AspNetCore.Http</span><span class="p">;</span>
<span class="k">using</span> <span class="nn">React.AspNet</span><span class="p">;</span>
</code>

Directly above:

<code class="csharp language-csharp" data-lang="csharp"><span class="c1">// Add framework services.</span>
<span class="n">services</span><span class="p">.</span><span class="n">AddMvc</span><span class="p">();</span>
</code>

Add:

<code class="csharp language-csharp" data-lang="csharp"><span class="n">services</span><span class="p">.</span><span class="n">AddSingleton</span><span class="p">&lt;</span><span class="n">IHttpContextAccessor</span><span class="p">,</span> <span class="n">HttpContextAccessor</span><span class="p">&gt;();</span>
<span class="n">services</span><span class="p">.</span><span class="n">AddReact</span><span class="p">();</span>
</code>

Directly above:

<code class="csharp language-csharp" data-lang="csharp"><span class="n">app</span><span class="p">.</span><span class="n">UseStaticFiles</span><span class="p">();</span>
</code>

Add:

<code class="csharp language-csharp" data-lang="csharp"><span class="c1">// Initialise ReactJS.NET. Must be before static files.</span>
<span class="n">app</span><span class="p">.</span><span class="n">UseReact</span><span class="p">(</span><span class="n">config</span> <span class="p">=&gt;</span>
<span class="p">{</span>
  <span class="c1">// If you want to use server-side rendering of React components,</span>
  <span class="c1">// add all the necessary JavaScript files here. This includes</span>
  <span class="c1">// your components as well as all of their dependencies.</span>
  <span class="c1">// See http://reactjs.net/ for more information. Example:</span>
  <span class="c1">//config</span>
  <span class="c1">//  .AddScript("~/Scripts/First.jsx")</span>
  <span class="c1">//  .AddScript("~/Scripts/Second.jsx");</span>

  <span class="c1">// If you use an external build too (for example, Babel, Webpack,</span>
  <span class="c1">// Browserify or Gulp), you can improve performance by disabling</span>
  <span class="c1">// ReactJS.NET's version of Babel and loading the pre-transpiled</span>
  <span class="c1">// scripts. Example:</span>
  <span class="c1">//config</span>
  <span class="c1">//  .SetLoadBabel(false)</span>
  <span class="c1">//  .AddScriptWithoutTransform("~/Scripts/bundle.server.js");</span>
<span class="p">});</span>
</code>

Finally, add this to Views\_ViewImports.cshtml:

<code class="csharp language-csharp" data-lang="csharp"><span class="n">@using</span> <span class="n">React</span><span class="p">.</span><span class="n">AspNet</span></code>

 

Copyright © All Rights Reserved - C# Learners