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.