Software development speed: Angular template comparisons

Software development speed: Angular template comparisons

Liam Ward

16 November 2018 - 4 min read

AngularAzureNET
Software development speed: Angular template comparisons

Angular software development projects

For the past two years, the majority of Audacia's new web development projects have been built on a stack of:

  • ASP.NET Core RESTful API
  • An Angular UI running within an ASP.NET Core project.

The ASP.NET Core UI running Angular was based on Microsoft's initial Angular 2 template. As a result of this, we had to configure the Angular build steps of the application within webpack and we were unable to take advantage of the capabilities of the Angular CLI. A typical Startup.cs file looked like the below:

public class Startup
{
    // Rest of code emitted for brevity
    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env, IOptions configOptions)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();

            app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
            {
                HotModuleReplacement = true
            });
        }
        // Rest of code omitted for brevity
    }
}

Following our upgrade to ASP.NET Core 2+ a new option became available, and a new template for Angular was released by Microsoft, that would allow us to use the Angular CLI to configure the application.

A typical Startup.cs file for an Angular CLI configured ASP.NET Core project looks like the below:

public class Startup
{
    // This method gets called by the runtime. Use this method to add services to the container.
    // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
    public void ConfigureServices(IServiceCollection services)
    {
        // In production, the Angular files will be served from this directory
        services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "Client/dist";
        });
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        app.UseSpa(spa =>
        {
            // This is the folder that contains your Angular CLI application
            spa.Options.SourcePath = "Client";
    
            if (env.IsDevelopment())
            {
                // This is the method that should be run to start your application
                // This should call "ng serve" with no ssl
                // Here an npm script called start has been created
                //to wrap around this command
                spa.UseAngularCliServer(npmScript: "start");
            }
        });
    }
}

Thanks to this we were able to review our hosting process as well. We have previously hosted all of our applications via IIS, or Azure Web Apps on Windows. However, we could now think about static hosting of a site as all we need to host are the files generated by Angular along with a single html file.

As such we've been able to look at hosting within Linux using alternative web servers like nginx. A basic nginx configuration will look something like this:

server {
    listen 80;
    server_name # server name goes here;
    root /usr/share/nginx/html;
    index index.html index.htm;
    location / {
        try_files $uri $uri/ /index.html;
        # This will allow you to refresh page in your angular app. Which will not
        give error 404.
    }
}

Using nginx we were able to drastically reduce the initial load times of our application. Below I have laid out a comparison between using the old and new ASP.NET Core Templates, as well as using nginx to host as a static site:

Run Angular CLI on ASP.NET Core (ms) Angular CLI on NGINX (ms) ASP.NET Core MVC (ms)
1 329 312 600
2 237 182 413
3 185 340 970
4 389 316 723
5 371 210 796
Avg 302 270 700

As you can see moving to the new template is massively beneficial, giving us a >50% increase in performance. Moving to nginx provides another, albeit smaller, improvement to performance. One that we hope will get better as the hosted files get larger.

We're now moving all our new projects, and migrating older projects, to use Angular CLI for this reason.

Ebook Available

How to maximise the performance of your existing systems

Free download