Guide SAP Composable Storefront
Guide SAP Composable Storefront
Authors:
Mateusz Ostafil,
Piotr Karwatka
What’s
inside
The ultimate guide to getting SAP Commerce
started with SAP composable ecosystem | 26
storefront | 3
SAP Commerce
Introduction | 5 accelerators | 28
Bootstrap | 22
Microservice architecture | 24
400+ 350+
global brands eCommerce experts
as clients. on board.
13+ 1400+
years on the market. projects delivered.
Today, mobile-first social media campaigns send people to websites that are often poorly
optimized. There are many user experience (UX) reasons why users leave their journey:
The average load time for mobile sites over 3G connections is 19 seconds. At the same
time, 53% of mobile site visits are abandoned if a page takes longer than three seconds
to load. The majority of mobile sites, 75%, take longer than 10 seconds to load.
69% 31%
Time spent
20% 80%
Money spent
49%
Mobile
Mobile Revenue Gap Desktop
Mobile Revenue Gap: Customers currently browse on mobile devices but buy on desktops.
Share of Consumer Retail Time and Money Spent (source)
Based on just the numbers presented above, there’s a consensus that the front-end
re-platforming, filling the mobile gap, can increase conversions and revenue by
a minimum of 20%. Some case studies even show much better results.
Revenues generated just from front-end improvements can pay off the project’s costs.
The other motivation for implementing a headless front end is more of optimizing the
development efforts and streamlining the process. Having the back end separated from the
front end on the architecture level means these two layers can be developed and, even more
importantly, deployed separately. This means that we can more easily experiment and deploy
the changes more frequently on the front end while still having
a rock-solid and secure release schedule for all the back-end services.
The value for the customer is built, first and foremostly, where your technology faces the
individual clients and their problems. Their needs are a great place for improvements.
No wonder that building and owning a custom, Spartacus-based front end along with other
back-end components is usually the intuitive choice. The business model and conversion rate
are something you need to focus on and invest your effort in.
With that being said, it must be added that the Spartacus project was designed with
upgradeability as its core. This means that owning the Spartacus front end lets you upgrade
it at any time because it’s distributed as a library. This is in contrast to the previously
built eCommerce accelerators. The overall ownership and upgrade costs with Spartacus
are a fraction of what you’re spending by keeping the legacy
architecture.
Piotr Karwatka,
co-founder, advisor 7
at Divante
What is SAP composable
storefront?
You’re probably already familiar with what an SAP composable storefront is, but let’s
revise that in order to be on the same page.
SAP composable storefront is a set of Javascript libraries for the rapid development of
storefronts for SAP Commerce. It’s a successor of the accelerator storefront. It utilizes
headless architecture and Angular framework. The composable storefront also allows
building your storefront as a PWA.
SAP composable storefront was formerly known as Spartacus. Since version 5.0, it has
become an officially supported SAP product and was renamed “composable storefront.”
The main advantage of composable storefront is that it provides a fast time to market
and a low cost of maintenance because of the rich built-in feature set and a battle-tested
architecture.
Angular Developer
Description: Proficient with Angular but has little to no knowledge of SAP
Commerce Cloud.
This guide is suitable for these two types of developers. Correspondingly, the next section
describes the two different learning paths for both of them.
Don’t worry if you don’t identify with either of them. Move on to the next section to create
your own learning path.
Microservices Introduction to
OCC REST API
Architecture Spartacus
Join the
community
Documentation
Spartacus
source code
Other knowledge
sources
Congrats!
■ CSS: What are they? How can I use them to make my pages beautiful?
■ JavaScript: How does it differ from Java? How can I use it to make
my pages dynamic?
Where can you get this knowledge? The internet is overloaded with information about
this, so I’ll share just two sources.
■ MDN Web Docs is the most reliable source of knowledge about web technologies.
You don’t have to know Angular inside and out to start your journey with Spartacus,
although it would be beneficial. Thankfully, Spartacus does a lot of things for you such
as taking care of the routing. Here’s a checklist for you with key Angular concepts that
you should grasp before moving on.
Concept Description
■ Angular in 100 seconds coveres all the crucial Angular concepts in 100 seconds.
■ Free Angular video course is an extensive, but free, Angular video course.
■ Paid Angular video course is very similar to the one above, but the practical
exercises are worth the price.
If you’re new to RxJS, then I have bad news for you. RxJS is difficult at the beginning.
This is because RxJS is not only a library. It’s also an implementation of the reactive
programming paradigm, and this requires a shift in mindset to understand it. That’s
something more than just learning the syntax. The good news is that once you
understand it, I’m pretty sure you’re gonna love it :)
This is time flowing from These are values emitted by This vertical line represents
left to right to represent the Observable. the „complete” notification and
the execution of the input indicates that the Observable
Observable. has completed successfully.
4 6 a 8
multipleByTen
This box indicates
which takes the input
Observable (above)
40 60 to produce the output
Observable (below).
The text inside the box
This X represents an error shows the nature of the
This Observable is
emitted by the output transformation.
the output of the
operator call. Observable, indicating
abnormal termination.
Neither values nor the
vertical will be delivered
therafter.
RxJS operations are often visualized using so-called marble diagrams. (source)
■ RxJS Quick Start with Practical Examples has a good video introduction. It uses the
old syntax as well.
■ RxJS Top Ten - Code This, Not That is a video about the best practices for RxJS.
NgRx
NgRx is a library for managing reactive states in Angular apps inspired by Redux. As
you might have noticed, it didn’t appear in the learning path. That’s because it’s not
mandatory to have any NgRx knowledge before starting to work with SAP composable
storefront. I’m mentioning this because SAP composable storefront uses NgRx internally,
but it hides its complexity nicely, so most of the time, you won’t have to bother with it.
What’s more, the team behind composable storefront is gradually migrating to their own
state management solution called “commands and queries.”
Anyway, in some cases, you might want to dig deeper into the internals of composable
storefront that requires understanding NgRx. Here are some recommended resources:
■ NgRx official website is the official website, and it contains a very good guide.
Selector Store
Reducer Service
SASS has two different syntaxes called SCSS and indented syntax. SAP composable
storefront uses SCSS, so that’s the syntax you should learn.
%cx-add-to-cart {
.quantity {
margin: 0 0 20px;
label {
@include type(’8’);
margin: 15px 0 10px 0;
}
.info {
@include type(’7’);
margin: 0 15px;
color: var(--cx-color-secondary);
}
}
}
If you are familiar with CSS, then SCSS will be easy for you to pick up because it only
adds some features that make CSS easier. I recommend you start with this guide, and
then go through the whole documentation (it’s not that long). In the end, make sure that
you understand these features:
Alternatively, if you’re looking for a video tutorial, then here’s a full video course by
freeCodeCamp.org. Keep in mind that it doesn’t explain placeholder selectors.
Bootstrap knowledge will make storefront styling easier for you and make your application
perform better. SAP composable storefront components use Bootstrap classes and
structures, so knowing them lets you write your CSS more fluently. At the same time, this
has a positive impact on the performance by reducing bundle size because you can reuse
Bootstrap. It’s already installed along with SAP composable storefront styles, so you don’t
need to add another CSS framework or write custom styles.
Bootstrap documentation is a good source of knowledge. You don’t have to read it all.
Just make sure you’re familiar with the following topics:
1 of 2 2 of 2
1 of 3 2 of 3 3 of 3
Composable storefront interacts with Commerce via OCC REST API. This is what makes
it decoupled. Both parties don’t know much about each other. For instance, Spartacus
doesn’t care what lives behind the REST API as long as the API specification is the same.
At the same time, Commerce doesn’t know whether composable storefront or some other
client consumes its API.
REST
Spartacus OCC REST API Accelerator
...
What does this all mean for a developer? A few important things:
■ Front-end development depends on the API. That also means that it’s sometimes
limited by the back end. It’s a common case in storefront development because
composable storefront OOTB supports only standard OCC REST API. It’s relatively
new compared to the whole SAP Commerce platform. So, the OCC API doesn’t
expose all the capabilities known from the accelerators yet. Another factor here
is that SAP Commerce back-end developers might not be used to exposing REST
APIs because the projects were done in a slightly different way.
■ In return, we get some significant benefits. First of all, thanks to microservices,
we can easily improve scalability because both the back end and front end can have
separate infrastructures. Also, some computation and caching responsibility
is pushed to the client. Second, microservices allow parallel development,
so in theory, the work can be done faster.
Learn more about headless architecture and microservices in eCommerce from this eBook.
SAP Commerce Cloud is a very mature eCommerce platform that was formerly called
Hybris. A lot of people still use this name, so don’t get confused. The platform is written
in Java and has more than 10 years of history.
OCC API
Services
Business Logic
Platform Services
Here’s a short video overview about SAP Commerce Cloud, and here’s a textual
explanation.
There were a few types of accelerators. The most important ones are B2C and B2B.
To get more information about the accelerators, watch these videos:
■ B2C Accelerator
■ B2B Accelerator
It’s important for SAP composable storefront developers to have a bit of knowledge about
accelerators because the storefront shares some of their concepts. It’s also easier
to collaborate with people used to accelerators.
If you want to know more about accelerators, then head over to the official
documentation.
Backoffice is a user interface to manage back-end data. It’s worth mentioning this
because SAP composable storefront is data-driven, and it can be said that it’s controlled
by Backoffice.
It depends on the team and the project, but SAP composable storefront developers have
to access Backoffice to set up the data that the storefront is going to use.
Here’s a nice overview of what SmartEdit is. For more detailed information, take a look at
the official documentation.
SAP composable storefront integrates with SmartEdit out of the box. The only thing you
have to do is a little bit of configuration.
This is not required, but if you’re curious how SmartEdit works, you can watch this video
along with this video.
Standard OCC REST API doesn’t expose all the features of Commerce yet, but the work
is in progress. So, SAP composable storefront can’t support features that don’t have the
standard API. Thankfully, both OCC and SAP composable storefront are extendable, and
this is how custom features can be implemented.
It’s not mandatory for you to know the OCC API inside and out. That’s because SAP
composable storefront encapsulates this connectivity quite well. However, some general
knowledge is helpful, especially when you plan to do some customization around the out-
of-the-box API integration.
The most prominent difference is the installation process. If you’re using SAP CCv2, you
can follow this instruction, and if you’re on-premise, follow this instruction.
The best place to start is with the Spartacus in 60 Seconds video and the free
Introduction to “Spartacus” online course on OpenSAP. It gives some background about
what SAP composable storefront is and why it was created. It also gives a nice overview
of extensibility features and its architecture.
Besides Discord, the community also uses StackOverflow. You can search for answers or
post your questions with the “spartacus-storefront” tag. Spartacus Core developers do
their best to answer in a timely fashion.
Documentation
Because SAP composable storefront code is hosted on GitHub, we can get some
additional information about the project. You can browse or post issues and then check
their status. You can also take a sneak peek at the pending pull requests to find out what
features will be delivered in the near future. You can also check the progress of a given
release development.
Last but not least, you can contribute to the SAP composable storefront source.
I’m not joking. It’s a very good way to learn SAP composable storefront inside and out. It
could also be a way to gain recognition or to push maintenance of your feature
to the core team. To get started, read the Contributor’s Guide.
You’ve already met the OpenSAP platform with the Introduction to “Spartacus” course,
but there’s one more SAP composable storefront course available. It’s Routing in
“Spartacus.” There are more courses being made, so stay tuned.
At the time of writing this, and according to my knowledge, there are two commercial
training offers available. One is provided by SAP and one by Divante. I don’t want to
compare the two here, but I just want to mention that they follow completely different
approaches. It’s up to you to compare the two and decide which one works better for you.
CONGRATS
Thanks for getting this far and your willingness to learn new things. Please
feel free to contact us with any questions or feedback because we’d like to
continue growing this powerful and supportive community.
You can join one or all, depending on your needs, of the courses
and explore Spartacus opportunities with Mateusz Ostafil, a top Sparta-
cus evangelist and trainer. He has mentored over 150 people to become
software developers from scratch.