Traditional Commerce Approach
- Traditional approach supports complex, tightly coupled software on monolithic systems.
- Changing features mean editing databases, updating system code, and customizing the front-end platform.
- To make a single customization, we have to go through multiple layers of code from the front end to the back end because changes affect multiple areas.
- Salesforce offers reference architectures with a lot of flexibility, but changes can still impact the back end and the front end. Moving to the headless architecture gives greater flexibility.
Headless Commerce
- Headless commerce is where the content (product, prices, text, and graphics) is stored and then delivered without a front-end layer.
- The front end (or the head) is decoupled from the back end and APIs bridge the gap, delivering content like products, blog posts, or customer reviews to any screen or device.
- Front-end developers present fabulous content using a framework that best meets their business requirements.
- The front end of an ecommerce site represents the shopper experience, including everything that shows up on the storefront, such as product details, graphics, and promotional content.
- The back end represents the business processes resulting from the shopper experience, the commerce services supporting it, and the data underlying it, such as search, promotions, pricing, inventory, and checkout.
- The front and back ends operate independently so that changes to one don’t require changes to the other.
With the acquisition of Mobify, Salesforce now has an API-first approach to implementing storefronts with Mobify’s managed runtime environment offering a “boxed” Backend for Frontend (BFF) layer.
By combining Salesforce’s Headless Commerce APIs with a ready-made ReactJS based PWA component library and BFF runtime they have created an attractive package for delivering world-class commerce experiences. The benefits of this architecture include modern UX framework (ReactJS), NodeJS-based Backend-for-Frontend (BFF) runtime, and the ability to consume any APIs merchants want or need to consume.
The technologies and frameworks use in pwa-kit are the most advanced and modern in web development. According to stack overflow
- JavaScript is used by 69.7% of professional developers
- ReactJS is the most popular modern framework with 36.8% of professional developers
- NodeJS is used by 51.9% of professional developers
Due To API approach, this architecture has a clear advantage to storefront operators over traditional Salesforce Commerce Cloud B2C implementation using their Storefront Architecture and Storefront Reference Architecture (SFRA).