Webinar: e-Commerce at the time of headless

Headless commerce webinar in collaboration with TwicPics

🤯 Does this emoji speak to you when you hear the term “headless commerce”? Headless commerce is arguably the hottest topic of the year for merchants. But it’s often experienced as a headache, especially if you’re a non-techie. TwicPics and Front-Commerce put their heads together to explain the path to headless commerce with ease.

Read the translated (and edited 😅) transcript of the webinar with TwicPics CEO, Florent Bourgeois,  Laurent Cazanove, TwicPics Developer Advocate, our Partnerships Manager, Christian Lelaidier & Product Manager at Front-Commerce, Josquin Fougeray, ⬇️ !

Read along with the webinar slides ↓

Laurent: We are here to talk about the headless trend in the e-commerce sector. We hope to give you answers on how to bring agility to your e-commerce developments thanks to this new approach.

Today, one of the issues facing the fast-growing e-commerce market is that it is faced with more and more challenges when offering new experiences to its users and more complete shopping experiences. When we create an e-commerce site, we are in direct competition with mobile applications that offer more complete user experiences. We are forced to rely on modern solutions to achieve the same performance and quality for our users, but also solutions that allow us to develop internally faster and have a reduced time-to-market. Headless commerce seems to be the approach that answers these problems. TwicPics decided to invite Front-Commerce, the front-end and headless commerce experts, to address this issue.

TwicPics is delighted to welcome Front-Commerce today to talk about this topic that is being talked about more and more: headless commerce, with the specific angle of e-commerce. It’s not a new subject but on our side we observe a particular interest for this type of architecture and that’s why we are very happy to discuss all of these subjects together today. 

Here is the panel present at today’s webinar:

• I’m Christian and I have the pleasure of being in charge of partnerships at Front-Commerce. Our partners are agencies that integrate the Front-Commerce solution for their commerce clients. 
• Nice to meet you, I’m Josquin, Product Manager at Front-Commerce. I follow the roadmap and product choices on Front-Commerce. I have a little bit of a tech background but I’m not a techie.
• I am Florent, the CEO of TwicPics. For those who don’t know, TwicPics is a SaaS solution that automates the optimization of media, images and videos for the web.

Thank you for your presentation, I’ll conclude by introducing myself: my name is Laurent, I’m a developer advocate at TwicPics and I’ll have the honor of hosting this webinar. Without further ado, let’s get to the heart of the matter.

Part 1 – What is headless e-commerce? 

Laurent: If like me you have seen some of the Front-Commerce jokes on Linkedin with statues missing heads or photos of illusions more or less well done, you should know that behind this touch of humor there is a very serious subject and current issues. Challenges that concern the whole web world today. So without further ado, Christian, if you would start by explaining what Headless Commerce is.

Christian: The idea is to demystify this subject which is often discussed by tech teams, because it is indeed an IT architecture. To put it simply, Headless in this context literally means “without a head”, a term that is not necessarily well chosen, but the subject is indeed that! It is about dissociating the head (the frontend) from the body (the backend), which was something that was not possible before. 

Monolithic solutions are often contrasted with so-called “headless” solutions.  What is a monolithic solution? The head (frontend) is completely embedded in the body and, in fact, generated by the body. When we talk about the body, we are talking about the backend in e-commerce platforms. 

So, you have this backend part that is administered internally or with your agency partners, and then you have this frontend part that is the only part visible to consumers. The frontend can now be dissociated from the backend, which will allow you to manage the content, the products, the catalog, etc. separately. Basically everything that is not visible and that will send information to be presented in the frontend.

The interests are multiple, we will see them during this presentation. What we need to remember about the term “headless commerce” is that we are going to dissociate the body from the head to be able to act on each of the subjects independently of the other with different technologies on the frontend and on the backend. So ensure the head is no longer screwed on to the body so that we can choose a new frontend and position it on this backend, which remains identical.

And so emerged a new market in e-commerce solutions – the frontend-as-a-service market. On the screen you have a first slide that illustrates the topic. Often there is information that is not really put forward on the subject of headless commerce. There is a feeling that to do headless commerce, it is necessary to change the backend and choose a headless CMS solution, whereas in reality it is possible to do headless commerce without touching the backend. Removing the frontend, which is intimately connected to the backend, to add a frontend that is agnostic of the backend is a first and simple way to go headless. This was the first method that appeared in the 2010s and some people call this approach the hybrid approach. On the screen you have some solutions that are more in line with the monolithic architecture. Even if some of them want to go headless by integrating what we call API functionalities, they are not native headless in terms of backend.

By cutting off the head of your monolithic solution and replacing it with a frontend that is ready for headless commerce will allow you to enter this world without having to completely replatform your solution, as was the case in previous years with classic cycles of platform changes every three to five years. So on the screen you have an example of an architecture with a headless frontend while keeping its so-called monolithic backend.

Then, starting in 2015, we saw the emergence of e-commerce platforms or CMS solutions known as native headless. These are solutions that will offer bricks of functionality that are able to communicate with each other thanks to APIs. By choosing a headless solution also for the backend, we will facilitate the possibility of connecting new services much more quickly and much more targeted to its online consumer. For example, we can very well choose a headless e-commerce solution with perhaps an integrated search system, but if we are not satisfied with this search system, we disconnect it and replace it with a best-of-breed brick from a search player on the market. This integration will be much easier than in the old “monolithic” world and a natural evolution of e-commerce solutions.

An example of a native headless backend solution is BigCommerce. There are others, we can mention Shopify, Commerce Tools or Sylius, for example.

Laurent: OK, thank you Christian for these insights. And now, Florent, what is the situation with TwicPics regarding the adoption of a headless architecture?

Florent: What we’re seeing is a particular interest in this type of architecture. And we can see it on this graph from Google Trends. Personally, I think it’s more than just a trend. I think it’s an evolution that is completely logical and I think it’s particularly due to the fact that the technical ecosystem today has reached a certain level of maturity that allows us to respond to many problems encountered by e-merchants. On this technical maturity, I’m thinking in particular of the maturity of JS frameworks such as React, Vue, and Svelte, which today allow us to do things on the frontend that we couldn’t do before. I’m also thinking of all the modern CMS and e-commerce platforms that now offer a headless approach natively.

Today we are lucky to have solutions like Front-Commerce that allow us to make this shift towards a headless architecture without pain while being guided to respect good practices. And I think this is the key that allows players to take the plunge more easily because they are in a context where it is a little more reassuring to evolve in an ecosystem like this.

Part 2 – The advantages of headless frontend

Laurent: Great. I think we’re seeing the Big Picture a little bit more clearly in terms of Headless Commerce. This quote, which is taken directly from the Gartner report, sums up what you’re saying: that the challenges that sites are facing today in terms of modularization of environments that are natively in the Cloud and experiences that are going to be multi-channel, multi-device, etc., force them to have a composable approach because the tools are multiplying in order to respond to these issues, and we no longer want to remain stuck in a monolithic model. We want to be able to benefit from all the best that is available on the market today and this is what the report says. You can find the link by downloading the presentation after the webinar. The conclusion is that headless commerce is a gas pedal for composable commerce and the most telling KPI is a time-to-market that is improved by 80%.

Christian: To bounce back on this topic, headless commerce is literally at the service of composable commerce. Composable commerce is the possibility to act with agility on your frontend and the experiences you will give to your customers. With this approach, we will compose the services we offer them according to the technological bricks adapted to their needs. One of the first sites to go headless was Amazon. There’s a Verbatim from Tom Leachford, who is head of global business development at AWS, where he says “the company can change its website every second of the day.” This illustrates the ability to bring agility to business teams to intervene on the frontend. One of the major benefits is the time-to-market back to the business teams, and that’s what we need today when we see the changes in buyer behavior and buying criteria over the last three years. Consumers are waiting for new experiences, they are waiting for their favorite brands to adapt to their needs. Composable commerce is at the service of this consumer expectation.

Laurent: Thank you for the little clarification to Christian. I would like to understand a little more technically and concretely the advantages of a headless frontend and how it works.

Josquin: Before explaining how, I’d like to go back to the technical vision. For those who are less into the technological side, don’t worry, but for those who do like it, you’ll get your money’s worth too! With a modern headless frontend, the goal is to dissociate the frontend from the backend. What we call a “frontend” is the part that is at the very top of the diagram, which is a PWA, and in this case in React. But Front-Commerce also has a backend that, via an intermediate layer of API graphQL, connects to the APIs of other systems, which allows the implementation of what we call composable commerce. All the little bricks that you see below, we can imagine all the different solutions available that do all these things and extremely well. We have absolutely no vocation to do them in the same way as them. For CMS we can cite WordPress or Prismic, for e-commerce and ecommerce platforms we cite Magento, BigCommerce, Shopify … there are many. For PIM solutions, we can imagine Akeneo. It is already this architecture that will allow us to dissociate the frontend from the backend and with cache optimization mechanisms we will allow the user to have a completely improved experience. And as for external services, we can also imagine integrating them directly via the GraphQL API intermediate layer. And so API “Application Platform Interface” is a technology that will enable us to expose data from a computer system and retrieve it securely via a token system, hence the small secure API connection layer. 

Laurent: Thank you Josquin, it’s good to have, even for the less technical profiles, a little bit of how it all fits together, and we’ll be able to put some brand names or products to the different bricks. This allows us to see how the best technologies fit together. And so the question that comes next is: Where does TwicPics fit in?

Florent: We did the exercise of positioning ourselves on the same schema, the same principle, except that for us the data is the image or the video. This data can come from one or more sources, i.e. a CMS, a PIM, a DAM, a bucket cloud, or any other storage system to retrieve images. TwicPics will also have connectors to interface with these different sources and then, to make a long story short, the goal is to automate all the processing in real time through an API and components for REACT, VUE, Angular, Svelte, which will allow us to deliver the images to the frontend.  To show the universal side of this modular approach and what it brings to the market, we will also be compatible with Node, Next and Gatsby.

Laurent: So in this modular and composable approach, TwicPics could be the image brick of your e-commerce site, for example?

Florent: That’s exactly it. If we go back to the diagram presented by Christian, TwicPics is the image brick that can be plugged in and that will play the role of ensuring best practice for media distribution on the website.

Laurent: Great, the whole approach and how the different libraries and the different technologies fit into the headless approach to build an e-commerce site is clearer. Now I think the question that our participants are very interested in is why would we do this? What’s in it for us?

Why do we want to go headless?

Florent: I can tell you what our customers are telling us and then we can try to ping-pong with Front-Commerce on the different items that are on display. There is something that is interesting, I think, which is related to the performance of an e-commerce in general but headless in particular: often when we see a customer with a monolith platform, he says, “my site is slow, I see where the problem comes from, I see the blocking point, but I have no way  to modify it in my platform myself.” Especially since performance has become a major criteria. But performance is nowadays more and more a frontend issue and rarely a specialty of the so-called monolithic e-commerce platforms.

Josquin: It is certain that low performance will be an irritant for the customer because it will feel like the site is not loading. For example: I am buying a product that is a bit expensive or an impulse purchase, if the performance of the site is not incredible, I may give up and that is one less sale. The historical solutions of the market did not necessarily make the frontend their hobbyhorse and now we have a choice that can be completely different. These solutions provide a frontend that is as simple as possible with the approach to say that they do not want to be the best frontend players, which opens the possibility for other solutions to position themselves in this market.

In terms of performance, it is certain that having a frontend that is light & modern will naturally improve the frontend experience and therefore the user experience – even with a reduced connection.  New example: I’m on my bus to the countryside. Even with a 3G+ connection I can still do my shopping. That’s the point. 

Christian: Just to bounce back on this topic, we have 95% of online purchase decisions that are emotionally related. With our frontend solution, we offer foundations that will guarantee the ability to host more content to personalize marketing actions according to the channel and the user’s journey – so omnichannel. And everything that will avoid generating friction and frustration to guarantee positive emotions that are directly linked to performance in terms of speed, display and navigation on the site. These are frictions and frustrations that will directly impact the conversion rate. And we haven’t talked about the mobile aspect, but generally modern frontend technologies are what we call mobile first. We will have a guarantee of fluidity especially on mobile where we see more and more purchases made.

Florent: Today, a one second delay on a site means 7% less conversion. It’s not the case for everyone but it’s still a marker for e-commerce that we must keep in mind.

Laurent: I think this sums up the importance of performance on an e-commerce site. The second point that interests me a lot and that interests me personally is the developer experience. What can you tell me about this?

Read along with the webinar slides ↓

The developer experience with Headless commerce

Josquin: The sensitive point that we can mention is that the technologies that we call monolithic are not necessarily the most advanced on the market. We’re going to have developers who are not necessarily fulfilled and who will potentially get bored. But by using modern solutions, they’ll find the desire to create beautiful quality code. Trying to focus on this allows a company to experience more commitment from developers and better retention. The goal is to really be on the cutting edge & to move forward. And even, from the market’s point of view, to be at the cutting edge of modernity and continue to code in modern languages.  In this case Front-Commerce is based on REACT.

Florent: I would add the ability, with a headless architecture, to be able to decouple the frontend development team and the backend team from an organizational point of view. These are two completely different professions and headlessness in essence allows us to have a clear separation of things and to go and find the developers for their specificity and their ability to manage subjects that are completely different. So it allows us to be much clearer and much more agile on that side as well.

Christian: I would also add that the recruitment market for developers today is quite tight. We need to offer them technologies that they like to work on, that are fun to work on, and if on top of that we are using a technology that will not be reinvented by developers and that will allow them to concentrate on where they will bring added value and what they like to do, something good will happen. It also comes back to “positive emotions”, but above all this type of architecture can bring the business teams closer to the developers. We’ve had examples of business teams saying: I’d like to change the location of the shopping cart on my Magento front-end in PHP to see what’s going on, I’d like to put it at the bottom left. And when the request is made to the dev team that literally carries the e-commerce, it already takes them about 4 days after they want to do it.

Florent: It’s a nice segue into the topic of personalization. Typically in terms of personalization, when the marketing team comes to say “I would like to do that” and we tell them “well yeah but that’s not going to be possible” and there are lots of reasons.

Christian: but then in four months it will be, and we’ll postpone a lot of stuff.

Florent: I’m quoting from the list of what we’ve had recently:

• It wasn’t possible because there’s a Page Builder that can’t do that.
• It’s not possible because, as you can see, it’s possible in the new version of Magento but we’re 3 versions behind because we customized our frontend and the update is not possible.

Florent: On the other hand, those who have switched to headless commerce potentially have their data source in their CMS and they keep their frontend. Their data source is on the e-commerce side and in their e-commerce platform and everything is mutualized on their frontend, and everything we just mentioned is possible.

Josquin: That’s exactly the advantage we’ll see with a composable approach. We will be able to find solutions that do everything we want and, if we focus on the customization part, we will be able to give any team the power to modify what is happening on the frontend. If we manage to plug in the right CMS with the right functionalities and if everyone is well exposed at the API level, we will be able to make the changes. If we need to modify directly in the code, we can do it quite easily because we will have a template that we can completely adapt, even by going into the code. It’s much more flexible.

The UX part is responsive. We mentioned it earlier, but by decoupling the headless frontend, we’ll have a standard PWA “progressive web app” and that will allow the user to have seamless navigation, especially on a cell phone, or whatever his device, which is really responsive by design. You don’t have to maintain both an application and a desktop site, everything is already responsive and it allows you to have much more fluidity & access to mobile features. We can even imagine using this one flat frontend and putting it on tablets or on kiosks in stores. So a lot of the scale can be handled thanks to this standard.

Florent: Today, the headless approach allows you to have several frontends, while keeping the same base. This same body, this same backend will allow the deployment of several different front-ends. There are a lot of use cases, and the larger the client, the more important the use case can be. For example, different locations where the frontends are given to each location potentially but keeping this common base. We can have multi-brand, but multi-brand with a completely different visual identity per brand, but with the same backend. We can even imagine that we have other front-ends that can go as far as the voice assistant, for example. Everything is open. 

Laurent: It was the logical next step after decoupling a microservice architecture. It was natural for this decoupling to reach the frontend and today we see all the benefits it can bring to an e-commerce stack. I think that those who are stuck on a historical stack should start thinking: Ok, how do we do it when we are not there yet? 

Browse our developer documentation

Let’s go →

How to move towards headless commerce when your stuck with a legacy stack

Josquin: You can move towards headless commerce in a progressive way with what we call progressive migration. The idea is that, if you start from your existing stack, such as a monolith, for example Magento, the first step will be to decouple the frontend and backend and move to a new standard with a modern PWA frontend. This will already allow you to win with a fairly quick step. We estimate that in just 4 months it is possible to have a frontend that is much more modern. We can undergo a graphic redesign once this is in place for example, or not. And next, we can take a step back and take a look at other technologies that can be added to improve the experience. For example,  you have your PWA but not enough customization possibilities, so you can take some time to plug in a CMS and train only the concerned teams to use this new CMS, for example WordPress. That puts you on a stack where the original Magento is intact – nothing has changed there. You didn’t have to retrain your customer service teams on a new tool because it’s the same tool. A new CMS in place allows you to create content that will be delivered to the PWA in phase 2. And all this in 8 months. We can go even further afterwards: the site works great, but the search function is not the best. So let’s add Algolia, which will allow us to go and find much more advanced functionalities with artificial intelligence. So, in one year, and in several manageable steps, you managed to completely transform your website. However, keep in mind that with just the first step, which took just 4 months, you will already see positive results. 

You can continue to iterate in this way and move from Magento 1 to Magento 2 for example at an advanced stage of the process. While keeping what we have already put in place with WordPress or Algolia since the connection is already available: the APIs and all the connectors already exist to be able to move to a new platform. We can imagine moving from Magento 1 to Magento 2, to Shopify, to BigCommerce, to Sylius – are all possible use cases. And it’s done on time loops that are reduced by moving incrementally. We’ve been talking for years about test-and-learn agility, about taking small steps, and that’s exactly what this diagram demonstrates. We don’t do it all at once, because we know that for a company that makes several million in online sales, changing its historical backend, which has been there for a number of years, is not only an IT issue, but also a human issue of change management. The progressive migration allows all parties to go step by step and thus to improve e-commerce KPIs without affecting the organization of its brand and company too much.

Christian: There are two additional ideas on this slide:

• The first is that we can actually enter the world of headless and thus obtain this flexibility, this agility, just by changing the frontend and not by making a complete Big Bang. So it’s an alternative, especially for certain SMEs that are wondering about the cost of moving to headless.
• And secondly, headless commerce changes a lot of things in terms of mindset, especially in terms of e-commerce projects. We’re going to use an agile method, that is to say, by stage or by project. We will have a first project over four months which consists of changing the frontend, where we will already obtain benefits in terms of conversion rate and in terms of traffic as well. And then why not change the backend that remains. We’re going to be involved in micro-projects lasting 3 to 5 months, whereas before, we were used to large projects lasting 18 to 24 months every three to five years. This is also a change brought about by these new technologies and by “headlessness”.

Part 3 – Headless commerce use case

Laurent: We’re going to present the use case on which Front-Commerce and TwicPics were able to work in order to show you the promises of headless commerce.

Josquin: For those of you who don’t know Devialet, it’s a French company that sells high-end speakers and in 2020 they had a website that was technically at the top of its game on Magento. They wanted to decouple the backend and frontend, the goal being to gain performance and agility. Devialet works with the agency Ph2m and their objective was to have a better UX, a personalized design and to meet the new standards in terms of experience. As they are a high-end brand that sells high-end products in several countries, performance was also a priority for them. As a Devialet customer, we expect an experience that is quite impeccable.

In 16 weeks the project was complete. In a fairly short cycle, they were able to migrate from Magento 1 to Magento 2 and switch to a headless approach based on technological choices. The results were there! Their conversion rate doubled, 100% is x2. And they saw an increase in organic traffic since Google likes a PWA and performance. Switching to a headless model opens a lot of doors. Once you’ve done that you can put other solutions in place, to manage images for example.

Florent: Indeed, when you are in a headless architecture, integrating TwicPics is so simple that it would be a shame not to do it. It took one day to integrate TwicPics on the Devialet site and the result was pixel perfect images: perfectly cropped, perfectly resized, according to the user context and the templating of the site, lazy loading on images, LQIP (low quality placeholder). I’ll let you go on the site to see the rendering. Next generation format and adaptive compression depending on the bandwidth and a CDN to deliver all of this. Basically the best practice on the image part is set to go in 24 hours. 

Laurent: We’ve talked about the developer experience. Today, from version 2.16 of Front-Commerce, the connector with TwicPics exists. In one click we can integrate TwicPics and make the work described by Florent easier. We go from 24 hours to one minute in terms of image optimization integration time. You can benefit from all this in addition to the performance and advantages that a stack like Front-Commerce brings you.

Audience Questions:

Do you have any examples of progressive migration with customers?

• The stack that was shown during the webinar was almost exactly the same as this one: the passage from Magento 1 to Magento 2 on a client called Kaporal. Whilst in the process of migrating to Magento 2 they changed their PSP (payment service provider) at the same time, an action made possible by the switch to headless architecture. Another customer, Jérôme Dreyfuss, has also migrated from Magento 1 to Magento 2 while keeping Front-Commerce on the front-end. The approved process is made possible in similar timeframes to those indicated. 

Are our solutions (Front-Commerce & TwicPics) technically agnostic?

• TwicPics is agnostic by design. TwicPics will be able to position itself on top of any image source (an image provider, a master, source images, fully resolved images in super quality etc.) and then deliver them automatically. We are storage agnostic, we can be positioned on top of an Akeneo, or on top of a hard disk on a bare metal server. We are also agnostic in terms of development stack. We’ll start with native JS and work our way up to all the JS frameworks on the market, be it Angular, Svelte, Vue or React. All these frontend frameworks are addressed to facilitate the life of developers.
• Front-Commerce is perfectly agnostic of e-commerce platforms. Because we embark on this API exploitation layer, we are responsible for connecting to other technologies and all types of platforms. We also notice with the agencies we work with that some of our partners are rather fond of open source and then other partners are looking for ready-to-use solutions, and we serve these two types of positioning. This is the whole idea of Front-End-As-A-Service, which is available to be plugged into any type of platform.

Does the business easily accept handling multiple tools for their contribution (Magento, WordPress, search modules etc.)?

• If we use the example of search in Magento, there will be integrations that are made in Magento, which will allow Algolia to be parameterized. So there is also a desire on the part of these solutions to integrate the tools directly into their interface. I think that the business will accept this. We are dealing with solutions that have a good level of UX, that are pleasant to use, so I would tend to say yes. But this is based more on my personal conviction than on real facts and stats.

• Often it’s not the same teams, which I would say is facilitating because you’re going to find yourself with people who deal with products who will only manage the product, people who deal with marketing who will use their CMS. Everyone has their own playground, we don’t step on each other’s toes. This doesn’t necessarily apply to all organizations, but it’s better to have a tool that is dedicated to a specific task than to have a tool that tries to do everything by halves.
• This is really what best-of-breed is all about: being able to offer the business or the developer the best tools in the chosen field. Whether it is business, product management or content management with a CMS etc.

Want to know more about Front-Commerce?

Here are some options:

• Have no idea what Front-Commerce is? This one-pager is a good overview.
• Interested, but need a minute to understand what Front-Commerce is? Use Christian’s calendar to find a time to discuss it.
• Or read our guide to headless commerce