SAP CC, Composable Storefront (Spartacus) Alternatives: A Comprehensive Comparison

This article was written with  James Johnstone , Lead SAP Commerce Solution Architect at  Brave Bison .

In business, just as in sports, it’s always important to have an advantage. And while investing in the latest and best technology does not necessarily win you any marathons, it sure does help!

The same applies to eCommerce. SAP CC, Composable Storefront, formerly Spartacus, has been a reliable choice for many companies, offering a robust eCommerce solution. However, as technology progresses and new options emerge, it's important to explore other solutions that might better meet your business goals, especially if you're considering a headless/composable approach. Let’s take a closer look at SAP Composable Storefront, its strengths and shortcomings, and introduce Vue Storefront as an up-and-coming option businesses should not ignore.

Introduction to SAP Spartacus storefront

SAP CC, Composable Storefront, formerly Spartacus, has played a significant role for SAP users, although it might not be widely recognized in the broader eCommerce industry due to its integration with SAP Commerce Cloud exclusively.

What is SAP Spartacus?

A lean, Angular-based JavaScript storefront for SAP Commerce Cloud. The product was created as a storefront for SAP commerce to deliver a convenient all-in-one solution. Therefore, Spartacus "talked" to SAP Commerce Cloud exclusively through the Commerce REST API. 

Spartacus or SAP, Composable storefront? Here's the scoop:

Not too long ago, the eCommerce scene got a slight jolt: SAP Commerce Cloud decided to wrap up its Spartacus 4.x open-source software. This tool was a favorite for many, making setting up SAP Commerce storefronts a breeze. But, as they say, out with the old and in with the new! SAP has now introduced its 5.0 version, which is all about B2B eCommerce. This version is not publicly available as a GitHub repo, only for SAP Commerce Cloud customers.

The newly announced version has the same core as Spartacus - also applicable for SAP eCommerce. However, SAP has enriched its composable storefront with useful features for B2B merchants, such as Multi-Site Data Isolation, B2B Unit-Level Orders, Account Summaries, etc.

So, if you've built your online store with SAP Commerce Cloud, you're at a crossroads. You can stick with the new SAP version or venture out and try composable storefronts from other trusted vendors. It's your call, and there's no wrong answer – just what's right for your business.

Key features of Spartacus storefront for SAP commerce cloud

Compatibility of Spartacus composable storefront and other SAP solutions

Spartacus is closely linked to the Omni Commerce Connect (OCC) layer of SAP Commerce. This connection is crucial for compatibility with other SAP products, like Smartedit, ensuring a smooth user experience.

Support for complex B2B use cases

Spartacus stands out regarding B2B features, and a lot of that comes from its tight-knit relationship with SAP Commerce Cloud. Built on Angular, Spartacus can smoothly handle the nitty-gritty of B2B tasks by making the most of what SAP CC offers. And it looks like they're doubling down on B2B – their roadmap for the year shows it's a big focus. Plus, SAP offers extra support by rolling out ready-made storefronts for B2B areas, like the telecom industry.

Challenges of building with Spartacus storefronts

A steep learning curve

To some extent, the Spartacus complexity was caused by Angular being used as a main part of its tech stack. Merchants needed to involve experts in this technology to learn the product functionality and develop eCommerce storefronts. Usually, the selection process is time-consuming and costly since it's challenging to find Angular developers charging rates comparatively affordable for businesses. This obstacle slowed down the time-to-market and required additional efforts from merchants.

Lack of Flexibility in Customization with Spartacus

Spartacus offers businesses a prebuilt storefront, which, while convenient, poses challenges in customization. The platform's inherent design, centered around a default accelerator template, often requires significant deconstruction for deeper customizations. Whether it's minor style tweaks or a complete brand-aligned redesign, the process can be cumbersome and sometimes requires rewriting the accelerator from the ground up.

The illusion of truly headless architecture

While SAP CC's composable storefront is API-driven and suggests a decoupled architecture, it doesn't fully embrace the headless commerce paradigm. Despite benefits like separate deployment cycles and scalable frontends, Spartacus's monolithic design restricts its integrations to SAP solutions, such as SAP Commerce Cloud and SAP Commerce SmartEdit. This limitation confines users to a singular system, preventing them from branching out to other eCommerce platforms, CMS options, or diverse payment methods.

Modernize your SAP store

Download ebook

What are the alternatives for headless commerce?

In the quest for the ideal eCommerce tech stack, businesses often find themselves at a crossroads with multiple paths to explore. This chapter delves into a comprehensive comparison between Spartacus, Vue Storefront, and the option of custom frontend development, and we will compare their distinctive strengths and approaches.

Custom Frontend Development: Expensive but Tailored

While Vue Storefront and Spartacus-based storefront offer comprehensive solutions, custom frontend development is an alternative that deserves consideration when choosing your tech stack. Though it may be more expensive and time-consuming, this approach allows businesses to create a fully tailored eCommerce solution designed precisely to meet their unique requirements. Custom frontend development offers the ultimate level of flexibility and control, but it should be undertaken with a clear understanding of the investment it entails.

Vue Storefront for SAP Commerce Cloud

Vue Storefront Frontend as a Service (FEaaS) built a pre-composed setup for SAP Commerce Cloud that allows you to create highly performant storefronts and simultaneously count on SAP's robust backend base.

You can build a lightning-fast and future-proof frontend for headless commerce by leveraging the ecosystem of ready-to-use integrations with market-proven CMSes, payment methods, and search tools.

Vue Storefront and SAP CC, Composable storefront (Spartacus) comparison

Vue Storefront vs. Spartacus architecture

The composable storefront from SAP CC is fully API-driven. A split from SAP Commerce Cloud provided an illusion of decoupled architecture and headless-like opportunities. This way, merchants could:

• have separate deployment cycles
• scale up the frontend without affecting the backend
• PWA
• apply mobile, tablet, desktop, and wide-desktop breakpoints and configure their own

It seems like an excellent start to a headless commerce story, but it is impossible to go headless with the Spartacus storefront. The solution had a monolithic architecture, offering ready-to-use integrations only with other SAP solutions such as SAP Commerce Cloud (backend) and SAP Commerce SmartEdit (CMS). Therefore, users partially got the functionality for headless commerce but remained hostages of one system without the ability to use other eCommerce platforms, CMSes, or payment methods.

How does it work in the case of Vue Storefront?

At its heart, Vue Storefront is fully headless, meaning the frontend and backend are decoupled, allowing for greater agility and innovation. This separation ensures that changes or additions to one layer don't disrupt the other, offering a seamless user experience.

• Storefront UI
• SDK
• Middleware
• Console
• Storefront

While these components collectively offer a state-of-the-art architecture, they can also function independently, catering to the unique needs of different projects. This extensibility is a testament to Vue Storefront's commitment to flexibility, allowing businesses to pick components that align with their requirements and replace or augment as needed.

Vue Storefront vs. Spartacus performance

A significant technical distinction between Vue Storefront and SAP Commerce Cloud, Composable storefront lies in the framework choice. The first one leverages the power of Next.js and Nuxt.js, JavaScript frameworks praised for their native performance. Spartacus is an Angular-based javascript storefront, and while Angular is a powerful framework, it might not be recognized among the developer community as the easiest one to achieve high-performance scores with. Why? Let's dive deeper into that:

Spartacus (Angular):

• Server-Side Rendering (SSR): Angular does not have a built-in SSR. Spartacus had to devise its custom SSR solution, which can introduce potential inefficiencies and complexities.
• SEO Capabilities: Angular has been noted in the developer community for its limitations in SEO optimization. While it's possible to optimize Angular for SEO, it often requires additional configurations and tools.
• Performance Features: While SAP CC's composable storefront offers performance optimization guides and PWA features, the custom nature of these solutions can sometimes lag behind native implementations in terms of efficiency and optimization.

Vue Storefront (Next.js and Nuxt.js):

• Native SSR: Both Next.js and Nuxt.js come with built-in SSR, ensuring optimized page loads and improved SEO out of the box.
• Performance Optimizations: Next.js, built on the latest React features, incorporates advanced performance features like Turbopack, an incremental bundler optimized for JavaScript and TypeScript. This ensures faster page loads and efficient code bundling.
• SEO Capabilities: Next.js is renowned for its superior SEO optimization capabilities. With built-in SSR and other performance features, it offers a more SEO-friendly environment compared to Angular.
• Image Optimization: Next.js provides native image optimization, automatically resizing, optimizing, and serving images in modern formats, which can significantly improve page load times.

In summary, while Spartacus offers certain performance features, the inherent advantages of Next.js and Nuxt.js in Vue Storefront, such as native SSR and advanced optimization techniques, provide a more robust and efficient performance framework.

We've talked to clients who were on the verge of choosing Spartacus, and then they looked at performance scores versus Vue Storefront and they changed their mind right away.

James Johnstone - Lead SAP Commerce Solution Architect at Brave Bison

Vue Storefront vs. Spartacus documentation

Spartacus offers very detailed documentation , complete with numerous "How to" guides that provide step-by-step instructions for implementation and connectivity. However, it does have its shortcomings: some details are missing, and the user experience can be challenging due to navigation difficulties. Moreover, Spartacus lacks an active developer community, and there's a noticeable absence of content beyond the written documentation.

On the other hand, Vue Storefront's documentation , while less detailed, is presented on a modern platform that boasts an excellent search and user experience. What Vue Storefront might lack in exhaustive written content, like cookbooks or detailed guides, it compensates for a wealth of up-to-date content delivered through platforms like YouTube and blogs. Additionally, regular training sessions and workshops are available for developers, ensuring continuous learning and engagement within their community.

Vue Storefront vs. Spartacus customization and extension

Every business has its unique needs and challenges; that's why Vue Storefront offers a dynamic approach to eCommerce extensibility. We believe in empowering businesses by providing them with tools that balance simplification and the freedom to craft custom experiences.

Your Vue Storefront project is essentially a canvas. The storefront layer provides direct access to the source code, allowing you to mold your online presence by adjusting components, hooks, and plugins.

The non-UI elements of third-party integrations, like SDK and Middleware, are crafted for adaptability. Their behavior can be tailored through extensions, offering a customizable set of building blocks.

Every API call goes through the Vue Storefront middleware layer, which provides you with a lot more flexibility and control over what you're doing. I think and it's it also provides that potential to decouple even further where you can move the commerce platform, use a different connector, and not have too much friction in the middle.

James Johnstone - Lead SAP Commerce Solution Architect at Brave Bison

Key extensibility features include:

• Integrations
• SDK Extensions
• Middleware Extensions

What about customization in the Spartacus storefront?

Spartacus offers a framework designed with customization and extensibility at its core. The storefront is built using numerous JavaScript components corresponding to CMS components from the SAP Commerce Cloud CMS (SmartEdit), which depict the content showcased in the storefront. While this mapping allows for tailored component rendering, such as designing a detailed footer with images or social media links, the customization process of the Spartacus-based storefront can be a bit cumbersome.

One significant challenge is the lack of comprehensive documentation, making it difficult for developers to navigate the customization process. The primary method of customization in Spartacus involves overriding existing code and components. This can be achieved by providing a custom Angular component that replaces an existing CMS component or using outlets.

For instance, you can override the CheckoutReviewOrder component with a custom version and even introduce a unique CheckoutDeliveryService. However, identifying the names of all available CMS components requires manual exploration, given the absence of a complete list in the official documentation.

A challenge arises when clients seek a complete overhaul of the storefront's look and feel to align with their brand identity. Achieving this level of customization can be difficult with Spartacus, as it often requires picking apart the existing prebuilt template of the accelerator and rebuilding it from the ground up.

Vue Storefront vs. Spartacus customer support

As a user of SAP Commerce Cloud, Composable storefront (Spartacus) you get access to the official enterprise support run by SAP. The company offers paid training and workshops to introduce this composable storefront to your dev team.

Vue Storefront offers IMPACT Services to all of its customers. A dedicated Solutions Architect is assigned to your project, ready to help with the implementation and answer any questions regarding the composable ecosystem. Customers can get access to a dedicated Slack channel and organize internal, free-of-charge workshops run by our Developer Advocates team.

A key difference between these two is the SLA provided by these services. When Vue Storefront guarantees 99.9% SLA, the SAP composable storefront didn't provide users with SLA, which means it was impossible to define the requirements regarding quality, availability, and responsibilities.

Vue Storefront vs. Spartacus integrations

Spartacus Integrations:

• Tailored for SAP: Exclusively integrates with SAP software solutions like SmartEdit, Digital Payments, and Customer Data Management Cloud.
• Tight-knit Architecture: As all solutions are SAP products, integrations are closely interwoven, ensuring seamless functionality.
• Comprehensive Feature Coverage: Integrations typically encompass all features provided by the respective SAP software.
• Well-documented: SAP offers thorough documentation for all its integrations.

Vue Storefront Integrations:

• A broad ecosystem of integrations: Supports best-of-breed software and MACH Alliance members, including CMS platforms like Bloomreach or Contentful, payment gateways like Stripe, and search solutions like Algolia.
• Extendable Integrations: VSF integrations are designed for adaptability, offering a foundational start that can be tailored to specific business needs.
• Dynamic Development: Vue Storefront is a growing Frontend as a Service product. New integrations are in constant development; existing integrations are very well maintained.
• Connect custom APIs: Vue Storefront's middleware allows easy connection with third-party API and custom services.

If you're heavily invested in the SAP solutions ecosystem, Spartacus is a straightforward choice, offering seamless integrations within its family of products. However, Vue Storefront provides the flexibility and adaptability you might be seeking for businesses aiming to leverage a diverse range of modern tools, platforms, and third-party solutions. Whether you prefer staying within a familiar environment or branching out to explore new possibilities is a matter.

Which one to choose?

In the evolving landscape of eCommerce, both Spartacus and Vue Storefront offer compelling advantages. Spartacus stands out for B2B merchants, excelling in complex scenarios, especially for enterprises deeply rooted in the SAP ecosystem. Its prowess in handling intricate B2B tasks and seamless integration with SAP tools makes it a preferred choice for businesses aligned with SAP's suite of solutions.

Conversely, Vue Storefront positions itself at the forefront of modern composable eCommerce. Its inherent flexibility, vast array of integrations, and headless approach make it ideal for businesses eyeing adaptability and cutting-edge digital solutions. Ultimately, the decision between the two hinges on specific business objectives and the technological framework a company wishes to embrace.