SAP Spartacus: Progressive Web Applications

Interview with Fabian Saccilotto, valantic CEC Switzerland

Spartacus is an Angular-based JavaScript solution that runs mainly in the browser. It is one of the progressive web applications (PWAs), which in turn represent a symbiosis of a responsive website and an app. What exactly does this mean, and what are the advantages and disadvantages of SAP Spartacus? Fabian Saccilotto of valantic CEC Switzerland was happy to answer these and other questions.

What are the differences between progressive web apps (PWA), native apps, and standard browser access? What are the advantages and disadvantages of each?

Let’s start with the usual access method – “normal access” to an HTML page rendered by the server via browser: If the browser queries a page, the server provides the corresponding HTML page with any style sheets (CSS) and JavaScript. After receiving the content, the complete page is displayed by the browser and any JavaScript is executed. Any navigation within the page will cause all content to be reloaded.

Native apps are fundamentally different from web pages. They are usually implemented with device-dependent frameworks (Android or Swift for iOS) and have an operating system on the end user device as their basis. Apps typically communicate with a back end through API interfaces to reload and store data in their memory.

For the customer, the implementation of a native app means that in addition to a website, a separate application for devices has to be developed. This means that the same code cannot be used. However, native apps provide the user with the best user experience on mobile devices. They can be built well offline and offer full access to device functions such as GPS, camera, etc.

Single page applications (SPAs) or their extension (PWAs) , on the other hand, are still web pages. In contrast to the usual access, the page consists practically only of JavaScript and – as the name suggests – of a single HTML page.
The server therefore always delivers the same page when the browser first requests it. The usually more extensive JavaScript then represents the content and dynamically exchanges the elements on the page. That is: Only the required data is loaded by the server afterwards – depending on which URL and thus what data the user requested. Anything that has already been queried by the server is cached locally and is present when it needs to be used again.

Such an application feels much more fluid to the user, as it does not reload the page. In addition, it is possible to control very specifically what data has to be loaded. PWAs can often also access various device functions. However, the intensive use of JavaScript is a hurdle for search engines and older devices. Therefore, server-side rendering is often used: The JavaScript is converted to HTML on the server and used with the usual access method. However, once the page is loaded, all access occurs without reloading the page.

A PWA also has to be installed by the shop customer first. Isn’t that an additional hurdle as compared to e-shops that I can access without an app from a standard browser? As a customer, I would find this more convenient.

A PWA is primarily a website and does not need to be installed. However, it can be saved as an icon on the device like an app. Because of its website-like nature, it does not need to be updated, unlike classic apps.

Access via native apps is now being phased out, isn’t it?

That depends on the application in question. However, for many companies, developing additional native apps – for Android, iOS, Windows, and various device versions – is too much of a financial and organizational burden.

What are the specific benefits of PWA for SAP Commerce enterprise customers?

The SAP commerce system is operated headless, which facilitates access from other systems. With PWAs, content can be loaded very specifically, which allows the performance to be assessed better, also by Google. Only one application is required for website and devices. In addition, newer front-end frameworks are used, which increases the attractiveness to employees.

Learn more about headless commerce!

What are the benefits of PWAs for end customers?

The benefits of PWAs for end customers are clear: A more fluid and faster user experience and, depending on the implementation, a better adaptation of the interface to the size of the device.

How expensive is the migration from accelerators to PWAs? What time and costs should I anticipate?

This varies greatly, depending on the initial situation. However, the work required does not depend on the number of parts, but rather on the existing code structure and the page structure and its complexity.

How safe is AngularJS?

In PWAs, SPAs, and modern frameworks, the same security aspects apply as in a conventional website. However, AngularJS and other frameworks offer functionality that makes it easier to implement these aspects. Security also has to be ensured on the server – and no sensitive data has to be stored within the client.

What does Spartacus mean for SAP Commerce customers?

Due to the significantly higher complexity of a PWA – which is Spartacus – it requires different and more intensive knowledge of JavaScript and state-of-the-art front-end frameworks. Is server-side rendering required and is SAP Commerce operated on premise? Then, for example, additional infrastructure and customized development and deployment processes are required.

What does this mean for my upgrade strategy? Should new developments be implemented with Spartacus?

In my opinion, you should consider a replacement with Spartacus. However, depending on the framework conditions and requirements, it may be necessary to take a different path.

SAP Spartacus is relatively young, and there are a few aspects that may have been resolved in too rudimentary a fashion. Some things like server-side rendering have to be considered. Especially if the migration to the cloud cannot (yet) be carried out. If you move your solution close to an accelerator or the standard, the switch to Spartacus probably makes sense.

What does the transition to SAP Spartacus mean for my organization?

Spartacus is based on the principles of a PWA (progressive web application) and on the technology AngularJS. Many companies work in the accelerator with comparatively simple JavaScript based on jQuery or similar. A PWA represents a significant increase in complexity, as it also has classic application elements such as routing, security, persistence, and asynchronicity. So the front-end developers need much better JavaScript and application development skills.

The development process and the interfaces to SAP Commerce (Hybris) are also different, which requires restructuring depending on the code quality. If you want to run Spartacus in an on-premise environment, you have to implement server-side rendering and the required infrastructure, depending on your requirements. The same applies to the associated deployment process. SAP already offers support for this in the cloud.