Unrivaled innovation, mobile-first approach, pixel perfect online stores- this is what Salesforce Reference Architecture (SFRA) empowers you with and a lot more. Building an online store is a tedious approach, especially when you consider the mammoth of competitors you battle against. To portray your superiority in the market, you need to consider a few must-haves- appealing UI/UX design, lighting fast performance, and speedy on-the-go solutions.
If you run an eCommerce business, you’re aware of Salesforce Commerce Cloud and its top-end agility, scalability, and flexibility features. Undeniably, the SFCC platform delivers differentiated customer experiences, boosts personalized engagements, invokes the power of AI to study customer behavior, and does a lot more thanks to the underlying code base of Storefront Reference Architecture (SFRA).
Traditionally, Salesforce Commerce was built on Demandware and employed SiteGenesis as its code architecture. However, with changing customer requirements, evolving market trends and growing challenges around SiteGenesis’ performance and scalability, Salesforce updated it to the SFRA (Storefront Reference Architecture). This modern blueprint is loaded with the latest mobile-first design capabilities, next-gen improvements in the UX, and all the other features that promise top-notch speed and performance.
However, if you’re still using the legacy SiteGenesis architecture, it is imperative to know its differences from the SFRA and the opportunities that the latter offers for your growing eCommerce business.
What is Storefront Reference Architecture (SFRA)?
Launched in 2018 by Salesforce B2C Commerce, Storefront Reference Architecture (SFRA) offers retailers a platform that is necessary to launch their webstore. Salesforce built the SFRA framework keeping in mind the growing trends around mCommerce and that most technologies were built around desktop, which when viewed on smartphones results in friction in user experience.
SFRA was developed on mobile-first optimized UX, a more robust, scalable and efficient framework than the older SiteGenesis model. It is synonymous with an out-of-the-box and best-in-class experience, with extensibility and customization as its unique features.
SiteGenesis to SFRA: The timeline
SiteGenesis 1.0 (2009): Developed by Demandware, SiteGenesis was developed along the lines of the ‘Pipeline’ (a code execution sequence organized in a prescribed manner within an XML file) architecture, which did not natively support mobile web experiences. Although SiteGenesis provided developers with the freedom to insert custom code during pipeline execution, often finding functionalities relevant to the SiteGenesis architecture was challenging.
SiteGenesis 2.0 (2014): SiteGenesis was responsible for the evolution of the backend architecture, thanks to the ‘controllers’ in the MVC (model view controller) pattern. Although it did enable the quicker development of desktop-led eCommerce experiences, it did not natively support webstore experiences.
The controller model did lead to better code organization, which meant improved support of storefront requests. Yet, not many eCommerce businesses found value in the SiteGenesis 2.0 model.
Mobile-First Reference Architecture (MFRA) (2016): Post the acquisition of Demandware by Salesforce, the latter strived to improve mobile web experiences. This meant, driving significant changes in mobile and desktop web architectures without changing much of the backend. The MFRA architecture allowed the development of mobile web foundation through Bootstrap, HTML5, and CSS3.
Storefront Reference Architecture (SFRA) (2018): After the significant storefront overhaul of MFRA, Salesforce now focussed on revamping the backend to support the latest developments. Salesforce analyzed customer needs and use cases to understand what lacked in the previous versions.
This led to a modern model with improved mobile responsiveness, efficient checkout management, and other developments that would deliver unrivaled ecommerce experiences.
Benefits of Storefront Reference Architecture over SiteGenesis
The following is a comparison between SFRA and SiteGenesis architecture.
| SFRA | SiteGenesis | |
|---|---|---|
| User Experience | The SFRA architecture was built keeping in mind the growing trend around mobile commerce. It follows a well-designed mobile-first model based on data-driven analysis, customer journey analysis, and heat mapping. This modular coding approach significantly elevates its m-stores and webstore performance. | It focussed on desktop rather than mobile responsiveness. Its design consists of more features per form factor to build and maintain the desktop codebase, which often led to performance lag. |
| Maintenance & Support | Developers can build storefronts by adding a customization layer on top of the existing reference code and implement new features and capabilities. This way, developers can launch new user-centered features to the storefronts without modifying the core code architecture.
| SiteGenesis is a legacy model that allowed code duplication and modifying existing ref. Code to implement other features. However, this became a hassle especially as the codebase aged. Subsequently, developers found it challenging to upgrade, maintain, customize, or extend the existing code architecture, which, in some cases, was impossible.
|
| Code Architecture | SFRA follows the MVC architecture that leverages technologies like JavaScript controllers, Bootstrap HTML5 and CSS3 that modern developers are well-versed with to create impactful mobile experiences. Moreover, the modular abstracted model supports customizations and upgrades. | Sitegenesis is based on proprietary technologies and requires professionals with knowledge of pipelines, UX Studio, pipelets, and Demandware Scripts. In case of customizations, vendors will have to look to industry experts with relevant experience and expertise. |
| Continuous Integration | SFRA provides modern CI/CD support via automation testing. It includes the integration, unit, and functional testing functionalities for controllers, models and views. This means SFRA goes well with the modern agile and microservices methodologies. | While SiteGenesis does support continuous integration, it lacks the examples included in SFRA, automation testing, and does not contain command line tooling. This means, developers have to create a custom solution if they want to implement CI/CD support in SiteGenesis |
| Total cost of ownership | The mobile-first extensible MVC architecture along with other architectural improvements are positioned in a way to offer superior mobile experiences at a reduced TCO. | While SiteGenesis is still an productive option for businesses currently, managing and maintaining this legacy architecture will be highly costly as compared to SFRA in the future. |
Why Storefront Reference Architecture (SFRA)?
Statistics suggest more customers prefer shopping from their smartphones and tablets than their laptops or desktops. Undeniably, it is easier and more comfortable to shop via on-the-go solutions. This growing trend around mobile commerce has sparked interest in technologies that empower merchants and retailers to offer such seamless and effective shopping experiences on mobile devices and webstores. And this is exactly what Salesforce had in mind while designing the Storefront Reference Architecture (SFRA).
- The open, standard-based SFRA architecture was designed with a mobile-first perspective and optimized for mobile shoppers.
- It employs the ‘Bootstrap Mobile Framework’ which is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first sites.
- Modular separation of core features, merchant customization and integration cartridges make implementing new features and maintenance smooth and seamless. Ultimately, it allows merchants to deliver customer-driven experiences, which boosts conversion rates.
- Collectively, the mobile-first MVC approach and architectural improvements are designed to reduce TCO as compared to SiteGenesis.
Move from SiteGenesis to SFRA with certified Salesforce experts
With superior customer experiences becoming a critical demand, the first step to achieving this goal is laying a concrete technical foundation that achieves current demands and promises future agility, scalability, and responsiveness. An eCommerce store built on Salesforce Commerce Cloud with a SFRA architecture delivers unparalleled performance at an accelerated speed across the growing number of touchpoints, including smartphones, tablets, and so on.
Phoenix, an innovative eCommerce accelerator built on top of the Salesforce Commerce Cloud platform leverages the SFRA model with custom integrations to rapidly and iteratively develop new features and meet the evolving market demands. The best part- it allows merchants to launch their online stores within 6 weeks, reducing time to market by 60%. Its pre-coded themes and templates fulfills 80% of the retail needs at a reduced TCO while allowing easy customizations for the rest. With Phoenix, merchants can now accelerate the launch of their eCommerce solutions while flexibly and seamlessly adapting for the future.
Need help implementing the SFRA Architecture?
Sneha Khode
System Analyst
Sneha is a System Analyst at Ranosys and has 10+ years of experience in the IT industry. In her previous role as Salesforce Certified B2C Commerce Developer, she has worked on various enterprises and leading brands in the market. She has been part of the team receiving the 2021 Salesforce Partner Innovation Award in the Communications industry category. She is well-versed with Agile methodologies and Agile delivery model.
Shivendra Singh Rathore
Senior System Analyst
Shivendra is a Senior System Analyst at Ranosys and possesses over 12+ years of experience in IT industry with enterprise eCommerce as his primary area of expertise. In his previous role as a Technical Architect, he has seen several Salesforce Commerce Cloud projects for various brands to its successful completion. Apart from work, Shivendra is a fitness enthusiast and has an zeal for exploring new things and places.
