Modernising Your Applications with Azure Tools: User Experience

Joao Goncalves
Version 1
Published in
8 min readDec 11, 2020

Joao Gonçalves, Solutions Architect at Version 1

I recently co-hosted a webinar with Microsoft on the topic of Modernising Applications with Microsoft Azure tools and you can watch it on-demand here if you want to check it out.

Following on from my webinar, I’m releasing a blog series on Application Modernisation covering User Experience, Integration and Analytics. As you can tell by the title of this blog post, I’ll be kicking off with User Experience and the Azure Tools that can be taken advantage of to modernise legacy applications to satisfy your users — to make their lives much easier when performing tasks and collaborating in an enterprise setting.

Photo by Christina Morillo from Pexels

As defined by Gartner, Application Modernisation refers to:

A project that is designed to deliver new business value from existing ageing applications by updating them with modern features and capabilities.

It’s not a replacement, but it’s not a technology refresh either. It’s a targeted use of technology in a specific area of an existing solution, for some level of modernisation, but enables some level of business value to be released. Business value is a key focus here and the approach taken tends to be more of a targeted incremental approach, which minimises risks to ongoing operations and activities of the business and is heavily driven by business cases.

At Version 1 we have seen an unprecedented move towards legacy system modernisation (view our customer NEL’s story here) and public cloud adoption to take advantage of modern technologies in the past 4 months due to the COVID-19 pandemic.

Photo by Anete Lusina from Pexels

The necessity to keep the business running and employees working has been a huge driver for application modernisation and the crisis has been a wake-up call for many organisations in terms of the danger of not modernizing quickly enough, exposing the risks of waiting too long to transform and the need to become more agile and establish a path for modernising the current systems.

Unfortunately, in the current climate, modernisation and the ability to adapt systems and processes can be the defining factor in keeping the business above water.

What Business Value is Released by User Experience Enhancement?

So, with those key distinctions covered, let’s get back to User Experience and the Azure tools you can utilise to ensure your applications are delivering the value they should be for your business.

Why is User Experience So Important?

Everyone knows the benefits of great UX for external users as we’re all on our smartphones every day visiting websites, completing purchases, sorting out household bills and more. We know that we will become frustrated and disengaged with a website or application if it performs poorly or if there are too many steps for us to take.

Photo by Anna Shvets from Pexels

It’s no different for internal users. The constant improvements in consumer UX only make enterprise applications in contrast look and feel more outdated!

Employees and stakeholders interact with enterprise applications multiple to dozens, even hundreds of times a day. Why should User Experience be a strategic priority for them? Because happy users (employees) = better business!

Photo by freestocks.org from Pexels

Research shows that:

“a simple, intuitive user experience for internal systems can re-energize disengaged workers.”

Mobile enterprise applications can accommodate (and allow) employees working remotely. Millennials increasingly expect their employers to invest in user-friendly tech and better collaboration tools and legacy applications with poor user experiences can alienate and disengage these employees leading to higher employee turnover.

Technical

When we talk about modern web application and modernising UX, it usually means web applications a rich UI, more intuitive and modern, quick, responsive, and mobile-ready. That shift is noticeable with the increased adoption of static HTML/CSS architectures that leverages RESTful APIs as the backend data services.

In most legacy applications, modernising requires a rebuild, meaning a rewrite of something that was for example built in a technology like classic ASP compared to a more modern framework like Angular, React, Vue or Blazor.

In the cases that legacy applications were built quite recently, and the frameworks are still under active support, planning a re-platform through containerization gives the application some of the cloud-native capabilities that will improve resiliency, performance, availability, etc. and reduces the amount of time on modernisation when compared to a rebuild.

Since the focus on this post is modernizing UX in Azure we will focus on services that offer web application hosting capabilities:

Azure Tools for Modernising Applications for Better User Experiences

1. Azure App Service

App Service is a fully managed platform for building, deploying and scaling web applications. It has capabilities for hosting web applications, APIs and mobile backends.

Credit: Microsoft Azure App Service Demo

App Services are very flexible and support web applications written in .NET, .NET Core, Node.js, Java, Python, PHP, and Ruby as well as containers. App Service apps run and scale with ease and can be hosted on both Windows and Linux-based environments.

There is built-in integration for Continuous Deployment so if you have existing applications stored in Azure DevOps or GitHub, connecting those services to Azure becomes a very straight forward process.

Some of the key features of Azure App Services are:

  • Multiple languages, frameworks, and containerization.
  • Automatic patches and maintenance of the OS and language frameworks.
  • Integrated continuous integration and deployment with Azure DevOps, GitHub, BitBucket, Docker Hub, or Azure Container Registry.
  • Test and Staging environments with deployment slots.
  • Security and compliance — Authenticate users with Azure Active Directory, Google, Facebook, Twitter, or Microsoft account.
  • TLS certificates & Custom domains
  • Backups
  • Monitoring
  • Scaling

For most modernisation scenarios, App Service is the best choice. App Services run on a set price per month and can host several applications which makes them very cost-effective.

Example architecture:

Source — https://azure.microsoft.com/en-us/services/app-service

2. Azure Static Web Apps

Azure Static Apps are a new service released by Microsoft at Build 2019.

The Static Web App service offers a single service within Azure that is specifically built for hosting static file-based web applications. Within the service is the ability to deploy RESTful APIs using Azure Functions code to the same Static Web App service that is hosting the web application.

With Static Web Apps, static assets are separated from a traditional web server and are instead served from points geographically distributed around the world. This distribution makes serving files much faster as files are physically closer to end-users.

Some of the key features of Azure Static Web Apps are:

  • Web hosting for static content like HTML, CSS, JavaScript, and images.
  • Integrated API support provided by Azure Functions.
  • Globally distributed static content, putting content closer to your users.
  • Free SSL certificates, which are automatically renewed.
  • Custom domains to provide branded customizations to your app.
  • Seamless security model with a reverse-proxy when calling APIs, which requires no CORS configuration.
  • Authentication provider integrations with Azure Active Directory, Facebook, Google, GitHub, and Twitter.
  • Customizable authorization role definition and assignments.

Notes:

  • Service is still in preview.
  • Only GitHub support for automated deployments is available now.

With the above if the modernisation plan involves building a UI using frameworks like Angular, React, Vue, or Blazor and does not require a web server to render content then Azure Static Apps are a great fit.

Example architecture:

Source — https://azure.microsoft.com/en-us/services/app-service/static

3. Azure Storage Static Website

Like Azure Static Web Apps, if you have static content that needs to be exposed to the public, using Azure Storage Account is a viable alternative.

Using Azure Storage Static Content can be served (HTML, CSS, JavaScript, and image files) directly from a storage container.

Azure Storage Static Website hosting is a great option in cases where you do not require a web server to render content as well as regarding cost since only the storage and operation costs are billed.

Using storage websites in combination with other services like CDN and Azure Front Door enables you to host the website in multiple geographies and provides failover capabilities.

Some of the key features of Azure Storage Static Website are:

  • Low cost, pay-per-use.
  • No underlying infrastructure to manage.
  • Automatic scaling and Failover.
  • Easy integration with Azure CDN for faster content serving on a global level.
  • Custom domains.

Example architecture:

Source — https://techcommunity.microsoft.com/t5/azure-developer-community-blog/azure-on-the-cheap-azure-storage-static-website-and-azure-front/ba-p/1297084

What about container services?

The main 2 services on Azure for containers are Azure Container Instances and Azure Kubernetes Service. Although they are valid choices for hosting web applications depending on the scenario it might not be the ideal choice.

Azure Container Instances offers a fast and simple way to run a container in Azure. ACI is great for isolated containers, including simple applications, task automation, and build jobs where there is no need for container orchestration.

Azure Kubernetes Service is the Azure managed version of Kubernetes, an open-source fully managed container orchestration service that can be used to deploy, scale and manage Docker containers and container-based applications. In modernisation scenarios where the organization is planning to adopt or already operates a microservices architecture, using AKS is a perfect choice, especially now where support for Linux and Windows workloads is available.

And why does this benefit the business?

Modernising using Azure gives some significant benefits to organisations such as:

Reduced Total Cost of Ownership

  • Moving an on-premise application into Azure provides an opportunity to reduce the associated infrastructure spend.
  • Reduced downtime due to improved resiliency.

Agility and Scalability

  • Remaking an on-premise app for the cloud lets organizations act more quickly on opportunities, without the impediments of relying on legacy code and infrastructure.
  • Allows for harnessing technologies such as containerization and continuous delivery in the cloud.
  • Changes can be implemented more efficiently, and the application can be scaled on demand.

Security and Performance

  • Azure features many built-in security mechanisms and services like granular controls for compliance and privacy.
  • Deep insights on how applications are performing and actionable recommendations.

Bonus:

The Microsoft documentation has a very useful decision tree that helps to look for the ideal service when migrating or building cloud-native applications.

https://docs.microsoft.com/en-us/azure/architecture/guide/technology-choices/compute-decision-tree

For more information about modernising existing application with Azure, check out my webinar targeted at developers here.

About Joao Gonçalves

Joao Gonçalves is a Solutions Architect with Version 1’s UK Digital & Cloud Services practice. Version 1 proves that IT can make a real difference to our customers’ businesses. We are trusted by global brands to deliver IT services and solutions which drive customer success. Our 1300+ strong team works closely with our technology partners to provide independent advice that helps our customers navigate the rapidly changing world of IT.

--

--

Joao Goncalves
Version 1

Solutions Architect @version1 | Azure Solutions Architect and DevOps Certified | Craft beer, House music & Gym fanatic.