# Architecture
Vue Storefront Next has been built upon the idea of microservice architecture, that is, also known as, including but not limited to agnostic design, declarative protocol, modular packages, and basically all the good things you can think of when it comes to software development. (It's not the one shot perfect solution, but let's focus on good things first)
Throughout the countless trials and errors, we have managed to come up with a better solution that fits the ideal structure we had aimed at with low coupling and high cohesion. (Still improving and it will never stop improving though)
We are going to talk about the underlying architecture of Vue Storefront Next in this section including Templates, API, Theme, and other components with visual representation.
# Templates
All the integration have their own best practices and in case of Vue Storefront Next, we prepared boilerplate template for the starting point for that matter. The boilerplate packages are the minimum template to guide your own integration. They consist of 3 individual packages; API client, Composables, and Theme.
This is the simple overview of how Vue Storefront Next works. For an integration to fully work, you need to prepare those 3 packages in green, and boilerplate packages are there for just that purpose helping you start it with boilerplate, boilerplate-api, boilerplate-theme in npm package which is linked to ./packages/boilerplate and its equivalent subfolder.
Here is a story. Your customer visits your online shop powered by vue Storefront Next. It is a product page with a certain route. The core part of app will be initialized creating Composables to make API calls to backend frameworks via API client. Once the data is successfully fetched, then it will be passed down to Composables which then to populate Theme files such as pages/Product.vue with requested data.
EVER WONDER?
Why would we need Composables before API client when Theme needs data? Composables are basically Vue Composition API which is designed to better organize features and enhance reusability. So the business logics needed for e-commerce platform are implemented in those Composables for reusability and low coupling between Presentation Layer and Data Layer.
# API
API client is a data layer of your eCommerce integration. It provides a friendly abstraction layer over network calls to your e-commerce platform.
It expresses each network request as a declarative method like getProduct or getCategory. By having this additional layer we can hide implementation details of how we get the data which gives you freedom of introducing major changes in this layer without influencing other parts of the app.
API client by itself is a Vanilla JavaScript application and it doesn't require any frontend framework to run. It's usually not used directly in the UI and is responsible only for providing data to Composables.
# Theme
It is presentation layer (TBD)
# Composables
It is service layer that deals with business logic. (TBD)
← Introduction Commons →