Refactoring Presentation Layer with React and Ajax Calling
Start course
2h 11m
In this advanced course, we take a legacy monolithic .Net application and re-architect it to use a combination of cloud services to increase scalability, performance, and manageability. 
Learning Objectives

This course will enable you to:
  • Understand the principles and patterns associated with microservices
  • Understand the principles and patterns associated with Restful APIs
  • Understand important requirements to consider when migrating a monolithic application into a microservices architecture
  • Understand the benefits of using microservices and associated software patterns and tools to build microservice based applications at speed and scale
  • Understand tradeoffs between different architectural approaches
  • Become familiar and comfortable with modern open source technologies such as Dotnet Core, Docker, Docker Compose, Linux, Terraform, Swagger, React
  • Become familiar with Docker and Container orchestration runtimes to host and run containers, such as Docker Compose, Amazon ECS using Fargate, and Amazon EKS


  • A basic understanding of software development
  • A basic understanding of the software development life cycle
  • A basic understanding of Devops and CICD practices
  • Familiarity with Dotnet and C#
  • Familiarity with AWS
Intended audience
  • Software Developers and Architects
  • DevOps Practitioners interested in CICD implementation
  • Anyone interested in understanding and adopting Microservices and Restful APIs within their own organisation
  • Anyone interested in modernising an existing application
  • Anyone interested in Docker, and Containers in general
  • Anyone interested in container orchestration runtimes such as Kubernetes

Source Code


Welcome back. In this lecture, we're gonna revisit our microservices architecture. In particular, we're gonna take a closer look at the way our presentation layer is constructed. At the moment we have the Store2018 microservice component, who's responsibility is to render on the server side the presentation layer, and return the HTML to the browser upon request. Taking a closer look at the current architecture, you'll see that the Store2018 microservice component is responsible for doing server side rendering using ASP.Net Razor Templates.

Currently when a user attempts to access our store using their browser an HTTP request is sent to the Store2018 microservice component. This request is then processed, and before a response is returned, the Store2018 microservice component makes three synchronous calls to the back end service components. Firstly, it requests consumer information from the account service, followed by a list of available products from the inventory service, and finally a call to the shopping service component for the current users shopping cart. Once all this information is returned back to the Store2018 microservice component, it then begins the process of performing server side rendering, taking all of the data that its received, and rendering it into HTML, which finally gets returned back to the browser. The browser renders it to the screen, and allows the user then to navigate the user interface. Now there's nothing wrong strictly with this approach, however, because we've gone through all the trouble of Web API enabling our services, and turning them into restful interfaces, we have a lot more flexibility in the approach in which we can acquire data from these services. 

So going forward we're gonna convert our server side rendering into client side rendering. Taking this approach will enable us to make direct calls to our service components, thereby further decoupling these service components from the Store2018 presentation layer component. Now the key client side technology that allows us to do this is the introduction of React. For those not familiar with React, React is a JavaScript library for building user interfaces, it's both declarative, and component based, and it allows you to build presentation front ends in a very modular, and reasonable way. We're gonna use it in this lecture to decompose our front end into a set of basic components. React will also support our need to make client side AJAX calls back to our service components. 

In this next diagram, we illustrate how we're gonna go about decomposing our presentation layer into a number of React components. The Store2018 component is composed of a number of child components. For example, the NavBar component, the JumboTron component, the ProductList component, and the Footer component. Here the ProductList component is composed of multiple Product components. Taking a slightly different view of this, we can see the component hierarchy as explained in the right hand side of this diagram. So before we jump back into Visual Studio, and refactor our presentation layer to use React, one further explanation is required in terms of how the data travels. 

The Store2018 React component will be responsible for making AJAX calls to both the account service, and the inventory service. We're not gonna implement calling to the shopping service for now, just to keep the presentation moving along quickly. When the Store2018 component receives data back from these services, it will then pass it into the child components, and then finally React will render the complete page on the client side using all of the data that it's received from the individual services. Okay, that completes this lecture, go ahead and close it, and we'll see you shortly in the next one where we'll begin refactoring the presentation layer using Visual Studio.

About the Author
Learning Paths

Jeremy is a Content Lead Architect and DevOps SME here at Cloud Academy where he specializes in developing DevOps technical training documentation.

He has a strong background in software engineering, and has been coding with various languages, frameworks, and systems for the past 25+ years. In recent times, Jeremy has been focused on DevOps, Cloud (AWS, Azure, GCP), Security, Kubernetes, and Machine Learning.

Jeremy holds professional certifications for AWS, Azure, GCP, Terraform, Kubernetes (CKA, CKAD, CKS).