Skip to Content
Product Information

Introduction to Spartacus

Overview:

Spartacus was authoritatively presented at SAP CX Live Barcelona. In any case, the possibility of the single-page storefront for Commerce was new for SAP. For instance, numerous years prior SAP released an extremely fundamental, yet functional SPA layout for YaaS (AngularJS). It was at first planned as a trial stream.

Why Angular is used?

Since react.js and vue.js are very hot in JS world, they are used to create fancy components, website etc however if you need to build a framework that is extendible or contains lots of features then angular seems to be the right choice.

What is Spartacus?

Spartacus is an Angular based storefront designed for SAP Hybris Commerce/ SAP Commerce Cloud. It interacts with Hybris Commerce using REST API. Being in an initial phase it still provides most of the core functionalities of the Hybris storefront. Spartacus is extendible and customisable. There are regular updates on Spartacus and the official release is expected in the first quarter of 2019.

Architecture of Spartacus:

Spartacus has a decoupled architecture that means storefront itself act as a separate entity which on top of its OOTB features can have custom features. It interacts through REST API with SAP Commerce Cloud or any other SAP, non-SAP tool which makes it an independent framework. It allows front-end developers to no longer understand the backend technology, the only interaction they need is through web service layer which makes development, testing and deployment of an individual platform much easier.

We can really make use of snappy UI, i.e server-side rendering and lazy loading components etc. Since it is no longer part of the platform, separate deployment is possible allowing it to scale separately.

Each functionality exists as a separate module in Angular. You need to create a separate site page in Angular code base if a new page is created in SmartEdit or CMS Cockpit.

Following technologies are being used to build Spartacus:

  • For JS storefront:
    Angular 6.1.8, TypeScript 2.9 and sass  
  • For reactive programming, state management and styling:
    RxJS 6.3.3, Ngrx 6.1 and Bootstrap 3.2.2  
  • For unit testing:
    Jasmine, Karma and Protactor

Key characteristics of Spartacus:

  • An open source storefront based on JS frameworks and tools.
  • A single page application with PWA features.
  • The storefront is customisable and extendible both at run and build time.
  • Merge new features from releases into your storefront.
  • Decoupled and upgradable architecture.
  • You can build custom libraries as well to re-use your component in multiple sites.
  • Libraries are provided with OOTB components which are completely separated so you can dictate whatever you want or extend.

Customising Spartacus:

As Spartacus is still new, there are a number of features which are not available like pickup in store option, it sometimes shows an abrupt behaviour during checkout etc, so we can move on and build or modify any feature. To customise Spartacus either modify the existing component or its part, or create a new component. Just try to keep your modules as lean as possible to avoid unnecessary dependencies.

Have a look at different pages created. These angular component are created against different pages of SmartEdit and CMS Cockpit

Conclusion:

The importance of Single Page Application along with Progressive Web App is immense, in terms of speed, running app without internet etc. SAP getting rid of old, slow JSP based storefront and replacing it with Spartacus shows its importance. Spartacus looks extremely encouraging, even in its initial form. Obviously, numerous things will change until the point that it is released in the steady state.

There are a number of positives if we compare old storefront with Spartacus. Being much more lean, fast and independent it helps front-end to be treated as a separate entity. Developing, testing and deploying irrespective of commerce or backend stuff. It will surely provide more opportunities for front-end developers to accelerate and upgrade themselves. It really looks exciting how it will progress in near future.

References:

 

https://enable.cx.sap.com/

https://hybrismart.com/2018/10/28/pwa-and-sap-spartacus-overview/

1 Comment
You must be Logged on to comment or reply to a post.
  • Since react.js and vue.js are very hot in JS world, they are used to create fancy components, website etc however if you need to build a framework that is extendible or contains lots of features then angular seems to be the right choice.

    I guess you say this because of typescript, however, you can easily integrate typescript and configure any JavaScript based project to be transpiled into Javascript. This is not an actual reason. A reason to NOT use Angular would be the actual decline of its use from the industry since the introduction of version 2, 3, .., n without a careful versioning from part of the team, now THAT is something to look at