The Reimagined Trailblazer Community is Here! Learn More.

Explore Headless Architecture and Implementation Roles

Learning Objectives

After completing this unit, you’ll be able to:

  • List the lower-level architectural elements that require granular choices.
  • List four roles required to implement headless architecture with Salesforce B2C Commerce.
  • List three components you can combine to develop a custom head.
  • Explain what a custom head does.
  • List three architectural components you can use for your B2C Commerce implementation.

Headless Architecture and B2C Commerce

Vijay Lahiri is a developer at Cloud Kicks, a company that specializes in high-end custom sneakers. He recently researched going headless with Salesforce B2C Commerce. Headless means being able to interact with shoppers on multiple touchpoints using APIs. This architecture makes it easy for Vijay and his team to focus on the front-end user experience while leaving the heavy lifting to Salesforce when it comes to programmatically interacting with digital ecommerce resources.

Vijay Lahiri, Cloud Kicks developer

Speaking of heavy lifting, Vijay has come to rely on the B2C Commerce platform’s highly reliable, scalable, and performant ecommerce solution. He has access to:

  • A dedicated 24/7 operations team
  • Networking and security experts
  • Performance experts
  • Database experts
  • Load-testing experts

Rolling out a new architecture requires the cooperation of multiple people in certain roles. Larger companies typically have more people involved, each with specific expertise. In smaller companies, skill sets can overlap. Each merchant can define roles differently. Here are the typical roles for a B2C Commerce headless implementation.

Solutions architect
Designs the technical solution and oversees the development from a technical and process perspective.
Delivers a functional product that meets the requirements defined by the solutions architect.
  • Front-end developer: Builds the front-end user interface (UI).
  • Back-end developer: Delivers an API client for the front-end developer to leverage from the UI.
  • Full stack developer: An experienced full stack developer can work on the front end and the back end.
Quality assurance (QA) engineer
  • Validates the quality of the application stack, including functional, performance, and resilience characteristics.
  • Defines the test suite and executes it against the application after each build.
  • Designs load test requirements and advises the technical team on performance optimizations.
 Security engineer
  • Protects the network and applications from malicious users.
  • Oversees security-related tests.
  • Helps investigate security-related incidents.
Site reliability engineer (SRE)
  • Manages the overall health and performance of the application stack.
  • Provides emergency response to production incidents.
  • Builds systems to monitor and maintain application reliability and performance.
Operations engineer
  • Provides expertise on systems and network engineering.
  • Helps design and maintain operating systems and middleware configuration.
  • Patches software and systems.
  • Maintains and troubleshoots network-related issues.


Vijay wants to move toward a 100% headless architecture for his storefront. But for now, he plans to mix and match a traditional B2C Commerce implementation based on Storefront Reference Architecture (SFRA) with headless implementations for other touchpoints such as:

  • Mobile/social applications
  • Smartwatch integrations
  • Connected vehicle integrations

For all touchpoints, the high-level architecture is pretty much the same, but with granular choices for these.

  • Deployment architecture
  • Application scalability
  • Caching
  • Middleware
  • Networking
  • Serviceability

Many of these components don’t come out of the box with a headless implementation, and yet are required for the same level of performance and scale Vijay has come to expect with a more robust application, such as SFRA. So he has to add them.

Here’s an example of an architecture he’s considering.

A sample architecture includes components such as the CloudFlare CDN, Amazon API Gateway, Apollo, B2C Commerce, and third-party services.

In this example, he uses these components.

CloudFlare content delivery network (CDN)
Caches and serves static content at the edge (much closer in proximity to the user than other layers of the infrastructure).
Runs the underlying business processes that use:
  • Node.js APIs
  • Redis
  • Kubernetes cluster
B2C Commerce
Stores and serves storefront data and processes such as cart, catalog, pricing, and promotions.
Third-party services
Runs external processes, such as tax, credit card, and shipping.

For a full headless implementation, all the B2C Commerce API calls go through the CDN that B2C Commerce provides. The headless implementation has its own CDN. The flow is API Call > merchant CDN > merchant BFF > Salesforce CDN (no features) > service.

Apollo has both client and server components.

Apollo Client

The Apollo Client within the front end is the single point of entry into the underlying back-end systems that comprise the ecommerce solution. The Apollo Client retrieves data from the Apollo Server via GraphQL queries over HTTP.

Apollo Server

The Apollo Server is a graph-based platform for connecting clients to back-end services using GraphQL, a simple query language. The Apollo Server, the front end’s single point of entry into multiple underlying ecommerce solution systems, provides these benefits.

  • Reduces the number of requests between front-end and back-end systems
  • Abstracts back-end systems from front-end developers, requiring them to learn just one API
  • Improves performance with fine-grained cache control
  • Offers built-in monitoring and logging for execution of GraphQL operations

Custom Head

A custom head serves as the front-end presentation layer, providing a rich digital experience for shoppers. The head interacts with B2C Commerce APIs to provide the shopper with content and functionality to complete a purchase from a variety of devices. B2C Commerce APIs provide the functionality to easily and securely interact with all content, while the custom head connects to third-party services so shoppers can complete their transactions.

Vijay can develop a custom head with a combination of industry-standard open-source technologies, home-grown frameworks, or Salesforce-guided solutions that use technologies like Heroku to manage and deploy the runtime. He can provide shoppers with the best front-end experience possible while maintaining a highly performant and scalable system no matter the load level.

Back-End for Front-End (BFF) Approach

B2C Commerce uses a back-end for front-end architecture approach to headless commerce. Having a BFF layer custom tailored for each user experience lets Vijay design his back end to support the use cases of his front end in a way that can perform and scale to suit growing demands for his brand. Designing a BFF layer reduces direct chatter between the client and back-end systems, and allows his front-end and back-end teams to work independently while delivering new functionality.


Vijay hasn’t figured out all the components yet, but that’s OK. In the headless world, one architecture doesn’t suit every need. He has many choices to meet his evolving business requirements.

He starts with this handy table that breaks down some of the industry-standard technologies we recommend that he can use to develop and manage his custom head.

Note: Some of these technologies overlap when you use them together.

API gateway
Design high-performance APIs and integrations with ecommerce platforms using prebuilt connectors and integration templates
Back end
B2C Commerce
Provides the resources and processing for an ecommerce storefront. It also provides HTTP REST APIs and a NodeJS SDK for managing storefront resources.
Commerce Cloud Developer Center
Back end
Apollo Server
A graph-based platform for connecting clients to back-end services using a simple query language called GraphQL.
Apollo Server

Back end
Application development language for back-end systems OpenJDK
The Java Tutorials
Back end
A query language for designing APIs and server-side runtime for executing queries using custom type system
Introduction to GraphQL

Apollo Basics
In-memory, distributed data structure database
Interactive Tutorial
Content delivery network (CDN)
Use to cache and serve static content to the user to reduce the pressure on downstream systems.
What is a CDN?
Cloud services
Amazon Web Services (AWS)
Amazon Drive platform as a service (PaaS)
10-Minute Tutorials
Cloud services
Google Cloud Platform (GCP)
Google Cloud PaaS
Getting Started with Google Cloud Platform
Container management

Salesforce cloud PaaS that allows you to build, deliver, monitor, and scale your custom applications
Getting Started on Heroku
Container management

Open source container orchestration system for automating application deployment, scaling, and management
Container management

Enterprise container runtime
Get Started with Docker
Front end
Apollo Client
A client-side library that uses a GraphQL API within the front end as the single point of entry into the underlying back-end systems. It retrieves data from the Apollo Server via GraphQL queries over HTTP.
Apollo Client 1.0

Front end
Lightning Web Components
Salesforce Web UI framework that provides custom UI elements built using handheld device markup language (HDML) and JavaScript
Quick Start: Lightning Web Components
Front end
JavaScript runtime built on Chrome’s V8 VM JavaScript engine

Node.js Tutorial

Front end
A component-based JavaScript library for building user interfaces
Intro to React

Document-based (NoSQL) distributed database
Getting Started
Web tier
High-performance load balancer, web server, and reverse proxy
Getting Started

Next Steps

In this unit you learned about the roles involved in a B2C Commerce headless implementation, the general architecture, and some of the components you can use. Next, you explore some strategies for optimizing storefront performance and reliability.


Keep learning for
Sign up for an account to continue.
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities