The worlds of designers and developers are different realms but they do overlap quite often—which can often cause conflict and frustration. However, there is actually a way to meet in the middle: no-code eCommerce platforms.
See our services of headless, microservices and modern JS development
Why does the no-code movement matter?
How often have you heard that putting a single banner at the top of a page requires two hours of developer time and then a long wait for a deployment window in which it will be published? It’s a pretty serious issue when it comes to time-sensitive marketing.
More and more brands leverage storytelling to represent themselves. When it comes to telling real-time stories, your visual content editors need reliable tools.
The rising need for “No-Code” platforms is a trend we can observe right now. “All-Inclusive” monolithic platforms are disappearing and the future is moving towards architecture-driven platforms rather than feature-driven solutions.
No-code platforms: how do they work?
A No-Code platform usually leverages separated layers:
- They provide users with an interface which lets them build the whole application/website without entering a single line of code by, providing them with a set of components
- They provide developers with the APIs to create these components the way they like, without compromising the clean-code/optimized UI qualities
Separation of concerns
WYSIWYG editors are among the least liked tools used by developers. They often mess up HTML code and bring to mind MS Word-generated HTML of the 2000s. Of course, WYSIWYG-based tools have improved over time but working with visual editors, just like WYSIWYG, requires additional work and effort. I’d say it is because visual content editors cannot provide a sufficient separation of roles and styling, which is important for content editors.
On the other hand, frontend developers like to take full control over rendering and optimization of the content to the end-user devices. They don’t need to care about edition details and styling defined by editors, which often interfere with the proper display of content.
This conflict can be easily solved by generating static pages with the right separation of concerns that ensures the correct display of the content by its semantic meaning. In this case, the edition and rendering of the content are separated.
Headless CMS data flow
Modern CMS solutions like StoryBlok, Shopware Experiences, Hybris SmartEdit (to name but a few) separate the concerns in a very clever way.
The Shopware PWA product that we have built for Shopware 6 is one of the examples here. The data flow for the Customer Experience CMS is presented on the flowchart below:
The general idea is that the user leverages a WYSIWYG page builder in order to compose the pages from pre-built components. The components are rendered as they appear in the editor; however, to make them appear in the production site makes the process a little bit more complex.
First, each building block/widget is represented by a single Vue.js component. The data for those components is provided by JSON documents. The components are dynamically instantiated by the Vue Storefront Next rendering engine and fed with the JSON data. The components are optimized and created by developers but managed by content editors.
This new approach totally differs from the WYSIWYG editors we all know from the early 2000s in which you just edited a bunch of HTML tags and styles. Shopware 6 CMS is 100% semantic and you edit documents rather than their visual representations.
Mashup
Another story is how to merge the statically designed components with dynamic data (for example, product stocks and prices).
There are different ways of achieving the same result. Actually putting the dynamic data into CMS content is rarely a good idea as it changes a lot and will be hard to maintain regarding the caching strategies.
A better option is probably to include the category/product references (IDs) so the frontend engine can automatically mash-up the product data with the static content (and include actual product information as it came from PIM/eCommerce backend).
Examples of no-code eCommerce platforms
The examples provided above are based on the Shopware PWA development of Showpare 6 customer experiences. Other frameworks and tools which support similar integrations are:
- Spartacus for Hybris/SAP Commerce Cloud – which integrates Smart Edit CMS with set of Angular UI components representing the widgets
- Adobe Experience Manager integration with Vue Storefront
- Coremedia integration with Vue Storefront including dynamic preview
- Storyblok – WYSIWYG editor integrated with the Vue Storefront components
Summary
The No-Code movement is just another example of how dynamically the tools we use to build digital solutions are changing. Monolithic architecture is being rapidly replaced and a new generation of services are appearing which demand less technical knowledge from end users, so anyone can build their site with confidence. It’s all part of the ‘New Architecture for eCommerce’ which you can read about in our popular publication.
Published May 25, 2020
