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, Apollo, 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.  

#1 platform for integration, APIs, and automation.
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.

Personalizes commerce experiences on a fast, flexible platform.
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.

Is an open-source, spec-compliant GraphQL server that's compatible with any GraphQL client, including Apollo Client.)
Apollo Server

Back end
Java
Application development language for back-end systems

Is a place to collaborate on an open-source implementation of the Java Platform
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

Unifies representation of all your data, services, and digital capabilities. The graph enables app developers to delete thousands of lines of boilerplate code, move fast without waiting on backend teams, and keep features consistent across web and mobile platforms.
Graphql.org
Apollo
Introduction to GraphQL

Apollo Basics
Cache
Redis
In-memory, distributed data structure database

Serves as an open source (BSD licensed), in-memory data structure store, used as a database, cache, and message broker. Redis provides data structures such as strings, hashes, lists, sets, sorted sets with range queries, bitmaps, hyperloglogs, geospatial indexes, and streams.)
redis.io
Interactive Tutorial
CDN
Content delivery network
Use to cache and serve static content to the user to reduce the pressure on downstream systems.

Serves as a global network designed to make everything you connect to the Internet secure, private, fast, and reliable. Also known as a CDN.
cloudflare.com
What is a CDN?
Cloud services
Amazon Web Services
Amazon Drive platform as a service (PaaS)

Helps build sophisticated applications with increased flexibility, scalability and reliability. Also known as AWS.
aws.amazon.com
10-Minute Tutorials
Cloud services
Google Cloud Platform
Google Cloud PaaS

Provides consistency between public and private clouds as an open cloud solution that enables businesses to modernize and developers to build faster in any environment.
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

Provides a fully-managed platform that is the simplest path to delivering apps quickly.
heroku.com
Getting Started on Heroku
Container management
Kubernetes

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

Automates deployment, scaling, and management of containerized applications. An open-source system also known as K8s.
kubernetes.io
Tutorials
Container management

Docker
Enterprise container runtime

Helps millions of developers build, share and run any app, anywhere -- on-prem or in the cloud. #1 most wanted and #2 most loved developer tool.
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.

Serves as a flexible, community-focused JavaScript GraphQL client.
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

Operates as custom elements built using HTML and modern JavaScript.)
lwc.dev
Quick Start: Lightning Web Components
Front end
NodeJS
JavaScript runtime built on Chrome’s V8 VM JavaScript engine

Is a JavaScript runtime built on Chrome's V8 JavaScript engine.)
nodejs.org

Node.js Tutorial

Front end
Reactjs
Builds user interfaces as a component-based JavaScript library.
reactjs.org
Intro to React
Storage
MongoDB
Document-based (NoSQL) distributed database

Powers mission critical apps and systems for global orgs.

mongodb.com
Getting Started
Web tier
NGINX
High-performance load balancer, web server, and reverse proxy.

Implements mTLS and end-to-end encryption in Kubernetes.
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

Keep learning for
free!
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