A day in the life of a Composable Storefront Request
Have you ever wondered how a customer’s website request gets converted into a response? Or how their browser information reaches the right parts of your system to ensure that the response is correct? Understanding these system-level processes and the architecture that supports them will help you make better decisions to ensure that your eCommerce sites that utilize B2C Commerce Cloud’s Composable Storefront functionality provide smooth and efficient customer experiences.
We’re going to be focusing on are the Progressive Web Application (PWA) Kit, Managed Runtime, and Salesforce B2C Commerce Cloud backend. The diagram above shows a visual depiction of how these components are connected. Let’s also dive into the ways that the ways that they work together to handle customer requests.
Progressive Web Application (PWA) Kit
The PWA Kit is a set of tools and frameworks that help create Progressive Web Applications (PWAs). A PWA is a type of web application that uses modern web capabilities to deliver an app-like experience to users. This can include features like offline support (so that users can still access the app even when they don’t have an internet connection), push notifications, and the ability to be installed on a device’s home screen.
The main parts of the PWA Kit architecture are:
- The Retail React App
- Rendering and Routing
- The GitHub Repository.
Retail React App
The Retail React App is an isomorphic React app (it can run on both the server and the client) optimized for eCommerce. It provides a starting point for building storefronts with features such as code bundling, a component library with theming, and scripts for automating routine development tasks. The storefront includes standard eCommerce pages and functionality like a product listing page, product details page, cart, and checkout.
Rendering and Routing System
The rendering and Routing system is declared in the Retail React App. It runs the same source code in two different contexts, server-side and client-side (serving route-specific and minimal bundles from the server), to optimize the shopper experience and support SEO best practices.
GitHub
The PWA Kit is open-source and hosted on GitHub, and it is set up as a monorepo with several packages, including libraries, project templates, SDKs, and other tools. It should be noted however, that most packages will never be customised or touched in a project, except for the “template-retail-react-app”.
The Salesforce B2C Commerce Cloud license includes everything mentioned above, so there’s no need for additional systems or add-on packages.
Managed Runtime
When a customer makes a request to the PWA Kit, it first hits the Managed Runtime.
Content Delivery Network (CDN)
Within the Managed Runtime, there is a CDN in charge of directing the request to the right location to be handled. It is powered by Amazon Cloudfront, which is a service that helps distribute requests to the nearest server to ensure quick and efficient handling.
The CDN also improves response times by storing frequently requested information in its cache. This way, if the same request is made again, the response can be retrieved from the cache instead of having to be generated again. This improves the overall customer experience by providing faster response times.
Proxy Service
The Salesforce Managed Runtime includes a built-in proxy service that handles API requests. This service improves speed and efficiency by ensuring that no extra configuration is needed for CORS (Cross-Origin Resource Sharing) and that no unnecessary network requests are made (such as preflight requests).
The built-in proxy service also allows you to instruct Managed Runtime’s CDN to cache specific requests. This gives you the ability to choose which requests should be stored in the cache for faster response times in the future.
Additionally, all API requests that are routed through Managed Runtime’s CDN through proxies are logged, which makes them easy to track and monitor.
Serverless Infrastructure
The PWA Kit is hosted on the Managed Runtime serverless as an Amazon Lambda function. The main advantages of using a serverless infrastructure are higher scalability and lower maintenance requirements.
Ssr.js and request-processor.js. are the two Lambda functions that work together to optimize the platform’s performance. Ssr.js is region-locked, while request-processor.js is an AWS Lambda@Edge function, which means that it ensures that the server is always in close proximity to the requesting client. This reduces round trip times (RTT), resulting in faster load times and a smoother user experience.
B2C Commerce Cloud
eCDN
The Embedded Content Delivery Network (eCDN) is an important feature of Salesforce Commerce Cloud that helps to ensure fast and efficient API delivery for customers. The eCDN uses a network of edge servers to speed up the delivery of your APIs by caching them closer to the user. This means that customers can access your APIs faster, regardless of their location. Additionally, the eCDN also provides advanced security features such as Web Application Firewall (WAF) and HTTP Strict Transport Security (HSTS) to help protect your API from common web attacks and other security threats.
It’s also worth mentioning that the eCDN is powered by Cloudflare, a global content delivery network and security provider that offers a wide range of features and tools to help businesses improve the performance and security of their APIs and web applications.
SCAPI
The Salesforce B2C Commerce API, also known as SCAPI, is a set of RESTful APIs that allows developers to interact with B2C Commerce instances. This API can be used to build various applications — including full storefronts, custom merchant tools, and administrative applications.
The API is divided into two main groups: Shopper APIs and Admin APIs. Each group is further divided into API families, with each family focusing on related functionality. The Shopper API group is designed for customer-facing functions such as product browsing, shopping cart management and checkout. The Admin API group is aimed at merchant-facing functionality such as product management, order management, inventory management, and customer management.
Being built on a familiar system, the API has a built-in rate limiter to ensure fair usage and prevent system overloading. Additionally, it also has a bearer token JWT authentication system in place for authentication.
Mulesoft is the underlying technology running this SCAPI show, so if you’re familiar with Mulesoft, you’ll be familiar with how to use it. It’s also worth noting tht this article and diagram only cover the Shopper APIs specifically designed for customer-facing functionality. There are a variety of others that can be found within the B2C Commerce Cloud Developer Guide.
Back End (ECOM) Server Infrastructure
Salesforce B2C Commerce Cloud is built on a highly scalable and secure server infrastructure. This infrastructure is designed to handle large amounts of data and high traffic volume, making it ideal for businesses of all sizes. The system is built on top of a multi-tenant architecture, which means that multiple Salesforce customers share the same infrastructure while maintaining the security and isolation of their own data (sound familiar?).
The Salesforce B2C Commerce Cloud server infrastructure is also equipped with features such as session affinity based on JWT. This ensures shoppers are directed to the same server for each session, improving the overall user experience. The system also has a relational database, which is Oracle. It’s designed to handle large data and high traffic volumes.
The file system is available using the WebDAV protocol, which allows you to easily manage and store large amounts of data, such as images. One important thing to note is that the storage limit is much higher than one is used to in Salesforce core, giving you more space to store your data.
Conclusion
The Salesforce B2C Commerce Cloud infrastructure is a complex system with many different components that work together to provide a seamless and efficient customer experience. From the Shopper APIs to the built-in rate limiter and bearer token JWT authentication system to the server infrastructure that is built on a highly scalable and secure multi-tenant architecture. There are a lot of cogs that make this wheel spin.
Separating the head and body makes the architecture more scalable and adaptable, allowing it to handle large data volumes and traffic without performance implications.
