Start tracking your progress
Trailhead Home
Trailhead Home

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.

Role
Description
Solutions architect
Designs the technical solution and oversees the development from a technical and process perspective.
Developer
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.

Architecture

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, B2C Commerce, and third-party services.

In this example, he uses these components.

Component
Purpose
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).
Apollo
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.

Components

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.

Category
Technology
Description
Information
Learning
API gateway
MuleSoft
Design high-performance APIs and integrations with ecommerce platforms using prebuilt connectors and integration templates
mulesoft.com
Tutorials
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
Trailhead
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
Java
Application development language for back-end systems
oracle.com/ OpenJDK
The Java Tutorials
Back end
GraphQL
A query language for designing APIs and server-side runtime for executing queries using custom type system
Graphql.org
Apollo
Introduction to GraphQL

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

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

Open source container orchestration system for automating application deployment, scaling, and management
kubernetes.io
Tutorials
Container management

Docker
Enterprise container runtime
docker.com
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
lwc.dev
Quick Start: Lightning Web Components
Front end
NodeJS
JavaScript runtime built on Chrome’s V8 VM JavaScript engine
nodejs.org

Node.js Tutorial

Front end
Reactjs
A component-based JavaScript library for building user interfaces
reactjs.org
Intro to React
Storage
MongoDB

Document-based (NoSQL) distributed database
mongodb.com
Getting Started
Web tier
NGINX
High-performance load balancer, web server, and reverse proxy
nginx.com
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.

Resources