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.
The 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.
As Spartacus is still new, there are a number of features which are not available like the 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
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 we can see if we compare old storefronts 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.