SAP composable storefront is one of the most capable headless front ends around and offers robust features coupled with great performance. Because of this, it’s a great choice for demanding eCommerce owners. The storefront is also pretty demanding in its own right with the number of skills you’ll need in order to deliver a great product.
If you’re a developer or eCommerce owner preparing to tackle an SAP composable storefront implementation, this article is for you. It goes over the major frameworks, libraries, and miscellaneous tech that come into play in such a project. It’s a companion piece to The ultimate guide to getting started with SAP composable storefront” eBook by Mateusz Ostafil. It digs into the optimal learning paths for all the needed tools and skills, and provides invaluable learning resources for each of them. As the name suggests, the eBook is your go-to guide. Here, on the other hand, we’re providing a quick checklist to get you started.
Keep reading to find out how ready you are!
Foundations
First, let’s take a look at the foundations that everything else will rest on. It’s almost guaranteed that you or the developers you’re managing are already proficient with these and have used them in countless past projects. To better visualize the differences between the tiers of skills, you can picture composing a classical symphony. In this analogy, the foundations would be the instruments that make producing music possible in the first place.
WebDev basics
We start with the building blocks of almost all modern web apps and websites. These will probably be obvious to you, but I’m including them for the sake of completeness. For the basic structure of your storefront, you’ll need HTML, CSS, and Javascript, just like with any other front-end project.
Angular
Angular is the first framework on our list that isn’t universal to all web developers. You can find it most commonly in dynamic, enterprise-level single-page applications and progressive web apps (PWAs). Angular lets you create reusable components, manage data binding between the user interface (UI) and the application's logic, handle routing, and interact with back-end services. These features make it the go-to choice for building highly scalable web solutions.
SAP composable storefront is built on Angular, but that doesn’t mean you need to be an Angular expert to handle a basic implementation. Here are the essentials that should be enough to get you started:
- Components: What Angular components are, how to create them, and how to define their behavior and look.
- Templates: How to write templates, bind events and data, and how to use pipes.
- Services and dependency injection (DI): How DI works in Angular and what services and injection tokens are.
- Modules: How to modularize Angular apps.
- Routing (optional): How routing in Angular works. This is optional because SAP’s composable commerce will take care of it internally most of the time.
Essentials
The next tier is the essentials. These are the more specialized tools and skills that you might not have had the chance to use before. They are, however, crucial to a successful implementation of SAP composable storefront. If WebDev basics and Angular were the instruments in our symphony, then the essentials are the players, conductor, and sheet music that bring them to life.
RxJS
Reactive Extensions for JavaScript (RxJS) is a powerful library that brings the concept of reactive programming to JavaScript. It provides a way to work with asynchronous data streams and lets developers easily set up complex asynchronous operations.
RxJS is based on the concept of observables, which represent streams of data that can be observed and manipulated using a rich set of operators. This makes it possible for developers to handle events, manage asynchronous requests, and perform transformations on data streams in a declarative and efficient manner.
Reactive programming is a fairly big shift in the general mindset from “standard” programming. Because of this, learning RxJS tends to be tricky at the start, and it might be a good idea to reserve a little more time than you would for other libraries. On the other hand, it’s often described as a very satisfying library to work with once the core concepts come into place for you.
SASS
Syntactically Awesome Style Sheets (SASS) is SAP composable storefront’s styling language of choice. It extends the capabilities of vanilla CSS and lets you write cleaner and more organized code. This results in streamlining your styling workflow and letting you create more efficient, scalable, and maintainable stylesheets.
SASS comes with two different syntaxes called SCSS and indented syntax. SAP composable storefront uses SCSS, so that’s the syntax you should focus on. Luckily for you, if you’re already familiar with CSS, learning SCSS won’t be a challenge. The basics remain the same, and it’s only a matter of getting familiar with these extra features:
- Nesting of CSS rules simplifies the structure and improves the readability of stylesheets by visually representing the hierarchy of elements.
- Variables let you store and reuse values throughout stylesheets, making it easier to maintain consistency and make global style changes.
- Mixins make it possible to define reusable blocks of CSS code that can be included in multiple places to avoid repetition and trim down the amount of code.
- Placeholder selectors define reusable styles that are not outputted to CSS unless explicitly included. It’s a feature you probably won’t be using yourself, but SAP composable storefront uses it internally. Because of this, you’ll need to be familiar with the feature to understand the Spartacus Styles library.
Microservice architecture
Because of SAP composable storefront’s headless architecture, a good understanding of microservices is a must if you’re thinking of tackling an implementation project. SAP composable storefront is, as the name suggests, just a front end. In a standard implementation, it will be attached to SAP Commerce Cloud via Omni Commerce Connect (OCC) REST API. But the beauty of headless architecture is that it can be any back end as long as the API is correct. This gives you almost endless flexibility to tailor your product precisely to your unique needs. On the other hand, you’ll need to know your way around this kind of architecture to get the most out of it.
Microservices also bring some other significant benefits. Scaling potential is one of the key factors since you can develop the front end and back end independently thanks to their separate infrastructures. It also means cost savings and better performance. Some computation and caching that traditionally have been done on the server side are now handled by the client. This reduces the amount of data sent back and forth, and the server load. You can find more details on how microservices work in SAP composable storefront in this eBook.
Nice to haves
Nice-to-have technologies are not strictly required for a successful SAP composable storefront implementation. However, if you’re familiar with them, there’s a good chance you’ll be able to get more out of the project and deliver a better, more sophisticated product. In our symphony analogy, these would be introducing solo parts or increasing the size of the orchestra. You can compose a piece without them, but it’s a big jump in the quality of experience when you have them.
Bootstrap
Bootstrap, installed in SAP composable storefront from the get-go, is another useful CSS framework that can help you get the most out of your project. It offers a collection of pre-built, responsive components, like navigation bars, buttons, and forms, that you can place in a responsive grid.
Although you don’t necessarily need to use Bootstrap for a successful SAP composable storefront implementation, it can make your life much easier. Thanks to the pre-built components, the framework shines in quick prototyping and improves the storefront’s performance by reducing bundle size. Since all the tools you’ll need are already in place, it might be worth spending some time learning Bootstrap to take full advantage of its features.
OCC REST API
I’ve mentioned OCC REST API before in the microservice section, but it’s important enough to warrant its own paragraph. OCC is the dedicated API that connects the front end and the back end of your headless solution together. Out of the box, SAP composable storefront is set up well for a standard API connection and likely won’t require any extra work from you. However, both SAP composable storefront and the OOC REST API are extendable. This provides you with a lot of freedom to implement custom out-of-the-box integrations that can take your storefront to the next level. If this is what you’re after, then some deeper knowledge of OCC will be necessary.
SAP Commerce ecosystem
SAP Commerce, formerly known as Hybris, is the dedicated back end for SAP composable storefront. In short, it’s everything you need to get your store up and running: product information management (PIM), an order management system (OMS), customer support, a content management system (CMS), and more. As I’ve mentioned before, you can attach SAP composable storefront to any back end with the correct API, so it’s not necessary for you to know the ins and outs of SAP Commerce. But there are certain benefits to keeping the SAP ecosystem together, much like the nifty features you get while using multiple Apple products. All the connections are laid out nicely in the corresponding section of this eBook.
SAP Commerce is also an attractive back-end proposition on its own, disregarding the synergy aspect. It’s a mature platform with more than 10 years of history and a robust set of features. On top of that, it’s also highly customizable and extendable so that you can adjust it exactly to your needs. It comes with B2B, B2C, and industry-specific implementations that add additional functionality dedicated to your various business models.
SAP Commerce accelerators
SAP Commerce accelerators are a set of pre-built front-end templates and frameworks that speed up the development process. The introduction of SAP composable storefront, with many of those features built in, has made them largely redundant for new projects but not entirely.
Some kind of familiarity with the accelerators might come in handy in three ways. First, the SAP composable storefront’s counterparts of those modules are based on the same concepts as the legacy accelerators. In other words, the better you understand the accelerators, the easier it will be to work on the storefront. Second, SAP composable storefront might not have full parity with the accelerators. It might be the case that the feature you’re after is currently only available as an accelerator. Finally, the accelerators have been around for a long time, meaning that many developers are more used to working with them than with the storefront. For that reason, getting familiar with their core concepts might help you collaborate with your peers more effectively.
Supplementary
Finally, let’s take a look at supplementary tech. You could consider these as luxury additions. They’ll add some extra polish to the product, but their impact won’t be as big as the nice-to-haves. In our symphony, these would be unusual, exotic instruments that add just a touch of something special to the composition.
NgRx
NgRx is a library for state management in Angular applications. It follows the principles of Redux, a predictable state container for JavaScript applications. SAP composable storefront uses NgRx, but there’s a good chance you’ll never have to dig into it since it’s set up well from the get-go. You’ll need some NgRX knowledge only if you’re planning advanced internal customization. The team behind composable storefront is also gradually migrating to their own state management solution called “commands and queries.”
Backoffice
Backoffice is the user-facing back end of your storefront. It’s a modular solution based on widgets, which you can turn on/off and move around to adjust the functionalities to your business needs. It’s meant to be intuitive for business users and ready to go straight out of the box, so unless you’re planning on developing custom widgets, you won’t need to worry about Backoffice’s ins and outs. The only thing you’ll need to do is set up the initial data connections with your storefront.
SmartEdit
SmartEdit is another business user-facing tool that you likely won’t have to touch at any time. It’s a capable "what you see is what you get" (WYSIWYG) visual editor for product pages and other kinds of content. On top of the standard features you’d expect from a WYSIWYG tool, you can also set up some useful eCommerce features such as restrictions based on time and user groups. A deeper knowledge of SmartEdit’s technical aspects might be useful to customize the editor to your business’s needs, but that’s a fairly niche case.
What’s next?
We’re at the end of the list, but it’s by no means the end when it comes to preparing for your SAP composable storefront implementation. As I’ve mentioned before, this article is meant to go together with “The ultimate guide to getting started with SAP composable storefront” eBook. This should be the next step for you. It digs deeper into the technologies mentioned here and puts them all into a clear and easy-to-follow learning path. It’s also a treasure trove of resources that will help you along the way to orchestrate a successful implementation. The eBook also goes a step further than this checklist and suggests how to best approach the code of SAP composable commerce itself.
However, if you’re not sure if you have the resources to handle all those technologies, it might be worth taking a step back. You might want to rethink if tackling the implementation project on your own really is the best way for you. We took a detailed look at various scenarios that favor training your own developers and those that suggest hiring external experts in this article. Or, you can simply get in touch with us and talk it over!
Published July 5, 2023
