Guide to Application Digital Transformation in Cloud & On-Premise — Part 3 (Technical Solution)

Digital Transformation & Cloud are the buzz words in IT for last 4–5 years and after COVID, the Remote way of work (Infrastructure and Resources), the momentum increases multi-fold. The pandemic resulted organizations to think modernizing their online capabilities and that too at a scale which were never imagined before invention of the Cloud.

In this article, I broke the Application Digital Transformation Journey in 3 Parts and majority of the topics are applicable for both on-premise and Cloud.

Part 1 (“Preparation”) and Part 2 (“Program Management”) is covered in previous blog. In this post we will talk about the Part 3 (Technical Solutions).

Part 3 — Technical Solutions Architecture

Sample Architecture for Web Application

As this is a responsive web application and primary intention is User Experience and Performance, let me propose a Architecture Block diagram

[ There can be many alternatives but the above is one of the possible options ]

Data Migration

Obviously this is one of the most important and first thing to consider for any migration. However in this article we will focus more on UI / Microservices and domain data model will be created as part of Microservices design.

Microservices Design and Development Approach

UI Architecture and Design Approach

This section has a prerequisite — The UX Design (Wireframe) should be developed by UX design Team. Now, let’s see how the typical UI application Architecture look like and how to make it more modularized –

Typical Angular Architecture –

Creation of Component Hierarchy –

Based on the UX design, the below needs to be identified –

1. Generate the Module hierarchy i.e. The child / parent structure of the feature components and module structures. For our example we can consider something like below

• Product Search Module
• Product Details Module — We will extend it in #2
• Carts Module
• Payment Module
• Order History Module

2. Let’s create a component hierarchy for Product Details Module. Let’s pick up Amazon.in Product details screen and break that into 3 large components

3. Now let’s break the Product Details Component into child components (Check the Red, Blue, Green blocks in the below diagram)

4. So, finally the component hierarchy of our Forest.com will look like below (Expanded only Product Details) –

5. Some of the UI Best Practices should be followed –

• Follow Angular.io style guide and Cheat sheet
• Use Lazy Loading and different pre-Loading Strategy for better performance. For example while in Cart module, you can start pre-load payment module. Follow the link for details on Pre-Load Strategy
• Micro-UI — Create reusable UI component with the HTML, CSS, TS. This can be broken down in two stages –
• Prelim Stage — Create an internal site with all the Reusable UI and Business components and the corresponding Code
• Advanced Stage — Create a component library and even provide the GUI to change features of the component through GUI i.e. change color of a text and down the customized component code
• Use CSSlint, ESlint, TSlint for static code review
• Prepare a manual code review tool during foundation phase and ensure adherence

Azure / AWS Services — When to Use What

There are many more and the link will help you get a cheat sheet of purpose of the services (both Azure and AWS).

AWS to Azure services comparison - Azure Architecture Center

Cloud best practices and design principles related to “Resiliency / Performance” are essential to leverage full potential of cloud and should be considered during API / Microservices design phase itself.

Cloud Best Practices

Cloud computing is standing on 5 pillars

Let’s try to achieve some of the above pillars by some great design principles to make your application more scalable (Performant), resilient (fault Tolerant, reliable), and manageable (Easy to monitor, troubleshoot).

Design for self healing. In a distributed system, failures happen. Design your application to be self healing when failures occur.

Make all things redundant. Build redundancy into your application, to avoid having single points of failure.

Minimize coordination. Minimize coordination between application services to achieve scalability.

Design to scale out. Design your application so that it can scale horizontally, adding or removing new instances as demand requires.

Partition around limits. Use partitioning to work around database, network, and compute limits.

Design for operations. Design your application so that the operations team has the tools they need.

Use managed services. When possible, use platform as a service (PaaS) rather than infrastructure as a service (IaaS).

Use the best data store for the job. Pick the storage technology that is the best fit for your data and how it will be used.

Design for evolution. All successful applications change over time. An evolutionary design is key for continuous innovation.

Build for the needs of business. Every design decision must be justified by a business requirement.

I will explain each of these above points and their benefits in a separate blog but the above links are excellent source of information from Microsoft.

Be it Cloud or On-Premise, patterns like Re-try, Circuit Breaker, CQRS, materialized View in combination with rightly designed microservices and modular UI with proper UI Loading Strategy should make most applications performant / resilient

Innovation

Finally innovations for tools / accelerators that you should not ignore. Few ideas for our Forest.com.

• Build a API Request/Response (JSON) to .NET Class (Model) generation tool to avoid manual effort
• Create Component Library for UI to promote re-usability, uniformity
• Create nuget package for performing generic functionalities in .NET like Encryption, Service Bus Subscription / listeners creation, DB operations, Map DB objects to .NET model

Hope, this is helpful. Post comments or suggestions as you feel appropriate. Check out my other travel / technology blogs.

Till next time, Cheers!