Overview leveraging the APIs released

If you've read our article on Choosing Which Storefront to Use for Your SAP Commerce Cloud Solution or Five Reasons to Move to a Project Spartacus JavaScript Storefront, you may be wondering how to get started with the SAP Commerce Cloud Project "Spartacus" (henceforth referred to as "Spartacus"). In this article, we'll cover the architecture for Spartacus and discuss how you can get started with it.

Table of Contents

What is Spartacus?

Spartacus is a free, open-source JavaScript web application that hit the 1.0 Release in May 2019 and continues to release new updates every couple of weeks. It allows you to quickly create your own branded JavaScript-based storefront for SAP Commerce Cloud. Spartacus is written using Angular and published as a set of libraries. The recommended approach to using JavaScript is to build your own JavaScript web app and import the Spartacus libraries. Without modification, the storefront works out-of-the-box, but Spartacus has been designed to be upgradable, customizable, and extendable, to suit all your branding and functionality requirements.

Spartacus is the strategic way forward for maintaining a customizable storefront with SAP Commerce Cloud. It replaces Accelerator templates (link), which were first introduced in SAP Commerce v4.4 to provide a ready-to-use starter implementation. Although the Accelerator templates allowed partners to quickly develop an omni-channel experience by changing a sample storefront, the templates were not easily upgradable, they were JSP-based, and the storefronts were coupled tightly with the SAP Commerce core platform.

For a brief, 1.5 minute introduction on Spartacus please watch the following:

For a more detailed look at Spartacus you may choose to watch the following:

Spartacus Architecture

Although Spartacus is decoupled from SAP Commerce Cloud, it is designed to work with the SAP Commerce Cloud platform only. Spartacus relies on SAP Commerce Cloud APIs and CMS content to function. It is 100% API-driven and is intended to be run in a headless fashion. You are free to extend the libraries that come with Spartacus to include your own customizations. Your Spartacus implementation can also be extended through SAP Extension Suite. Because Spartacus is decoupled from the SAP Commerce Cloud platform, you can choose to separate your front-end and back-end development, even potentially having separate deployment/release cycles. Your Spartacus storefront(s) can also be scaled separately from the SAP Commerce Cloud platform. The only time you may need to align releases is in the case where an API becomes available in SAP Commerce Cloud for Spartacus to use. For example the 2.0 release of Spartacus has some features that are only activated by leveraging the APIs released in SAP Commerce core 2005.

Spartacus uses a combination of languages, technologies and libraries, including Angular, TypeScript, RxJS, NgRx, SASS, and Bootstrap. The final output is pure JavaScript. Angular is currently used as the development framework, though the goal is to allow usage of other frameworks. Please see the documentation (link) for the correct versions required.

Spartacus is responsive and includes support for mobile, tablet, desktop, and wide-desktop breakpoints, but you are free to configure your own breakpoints. Progressive Web Application(PWA) functionality is also built into Spartacus and you can configure your storefront to use it. This will allow your storefront to act more like a traditional native iOS/Android mobile application, with great performance and reliability, and mobile-native features.

Getting Started

The first place to start is to get yourself familiar with the documentation. If you're just starting to look at Spartacus, you can get up and running quickly by following the step by step instructions here or look at one of the Spartacus branches in the Open Source Sample Repo. We also cover how to get Spartacus working with your SAP Commerce Cloud solution in the article Build and Deploy Your First SAP Commerce Cloud Project. There is also an extensive playlist of videos & tutorials related to Spartacus which can be seen below:

https://microlearning.opensap.com/category/Spartacus/178316081

Spartacus is purely a set of libraries that contain a set of core libraries, components and styling. It has its own release cycle with the goal to release every two weeks. You are in total control of whether to accept these library updates. You can choose which versions of the libraries you would like to use in your application (Spartacus uses Semantic versioning 2.0), and these can be used to fully configure and customize your storefront. For more details on a major release update please see this page.

Customization is not done in the same way as with the Accelerators; you never customize Spartacus code directly – rather, you override or replace styling and code. This approach allows ease of upgradability. For more on extending Spartacus, you can look at our video library.

Underlying Frameworks/Libraries

If you have been developing SAP Commerce Cloud solutions in the past you may be more familiar with our accelerators (covered below), which are Spring Model View Controller(MVC) based applications. With Spartacus being a JavaScript application, the underlying frameworks/libraries are completely different. Before you get started developing a Spartacus application you may need to take time to become familiar with the technologies/frameworks.

The following covers the main sites for the frameworks/libraries being used and are good references for information that can help your development efforts:

• Languages: Typescript, Sass
• Frameworks: Angular, RxJS, NgRx
• Dependency management: Yarn, npm
• Build: Angular CLI (under the hood: webpack, ng-packagr)
• Testing: Jasmine, Cypress, Karma
• Code Quality: Prettier, TSLint
• IDE: Visual Studio Code (or equivalent)
• Source control / distribution: Github, npmjs

If you're new to Javascript it may be easier to attend an instructor-led training (separate from SAP) or see if you have access to a learning management system that provides tutorials on the frameworks/libraries above. Since most of the items above are open source and industry-standard there are plenty of online resources to help you get started. If you're looking for free options you may want to review some of the following:

• Typescript in 50 minutes
• Angular for Beginners
• Angular: Your First App
• RxJS Primer

Once you're comfortable with underlying technologies you may also want to consider taking the OpenSAP course on Routing in Spartacus.

SAP Commerce Cloud Accelerators

Because Spartacus is decoupled from SAP Commerce Cloud, you are not required to use Spartacus. You are free to create and maintain your own JavaScript web application, or you can continue to use the Accelerator templates that are embedded with SAP Commerce Cloud, though these are not the strategic way forward. At release, Spartacus will not have feature parity with all functionality of the SAP Commerce Cloud Accelerators, but these gaps will be covered in the Spartacus documentation. 

If you're already using an Accelerator-based solution and are looking to migrate to Spartacus, you're better off to start from scratch.  Spartacus is a complete paradigm shift from the Accelerators in terms of technologies and architecture (template versus libraries, headless versus embedded, JSP versus Angular). They are so different that there is no way to port your Accelerator-based code to a Spartacus storefront. That said, because Spartacus is decoupled from the SAP Commerce Cloud platform, you can ease the transition to Spartacus by running both an Accelerator-based store and a Spartacus storefront at the same time. For example, if you currently have a B2B Accelerator storefront and are wanting to set up a new B2C storefront, you could create the B2C storefront with Spartacus, while still hosting your B2B accelerator-based storefront. Assuming you already have your source repository set up to build and deploy your B2B Accelerator storefront, to add the B2C storefront:

1. Modify your repository to include the correct structure for building/deploying a JavaScript-based storefront (link).
2. Configure your manifest.json file to define an API aspect for Spartacus to call (link).
3. Define a new application in your manifest.json file that points to where your Spartacus storefront is located (link).

You can continue to add new Spartacus storefront applications and configure your endpoints to allow certain traffic to your storefront. They are still using the same SAP Commerce Cloud platform, so you can run multiple storefronts at the same time while still maintaining the same information (customer, cart, order, and more). For more on configuring endpoints see:

Scalability

As mentioned above, because your Spartacus storefront is decoupled from the SAP Commerce Cloud storefront, you have the option to scale it separately. Other scaling considerations such as a Content Delivery Network (CDN) can also be leveraged to help decrease the load. Additionally, Spartacus will include PWA capabilities, such as cache-first networking capabilities, which will give you the option to cache resources locally on a user’s device. Lazy loading can also be used to determine if/when to load portions of your components. Finally, because Spartacus is API-driven, it can leverage SAP Business Technology Platform, Kyma runtime and the scalable microservices that come with it to quickly add new functionality to your Spartacus storefront.

Server-side vs. Client-Side Rendering

By default Spartacus is set up for Client-Side Rendering, but you can configure Server-side rendering (SSR). It is important to consider the pros and cons of each option and determine which option best aligns with your requirements. For an eCommerce solution, typically the importance of search engine optimization (SEO) that requires SSR outweigh any of the benefits of client-side rendering.

Support

Spartacus is provided "as-is" with no official lines of support. To get help from the Spartacus community, post a question in the Help chat of the Slack workspace. You can also post a question to Stack Overflow with the 'spartacus' tag, but the Slack workspace is experiencing the most developer discussion at the moment.

It is an open-source project and the team welcomes feedback, ideas, requests, and especially code contributions. If you have something to share, post comments to our Feedback chat in the Slack channel, or read the Contributing document and learn how to help others, report an issue, or contribute code to Spartacus.

Conclusion

You should now have an idea of what Spartacus is and how you can incorporate it into your SAP Commerce Cloud solution. If you're still trying to understand when/where you would use Spartacus, we recommend reading Choosing Which Storefront to Use for Your SAP Commerce Cloud Solution or looking at running a Design Workshop.