The backbone of going headless
August 16, 2022
As it became clear that our previous website technology did not allow us to do what we wanted to do as part of our strategic objectives, finding a solution all of a certain became a strategic priority. So, marketing was given the task to define our needs, while management embarked on a journey to evaluate different options from a technology point of view.
We have a strong cooperation with Slize Digital in several areas, so it was natural for us to partner with them. Slize Digital specializes in modern e-commerce, based on MACH alliance principles (short for Micro Services, API, Cloud, Headless), and has been listed as one of the top five in the Danish E-Commerce Awards. Specifically, they build tailor-made components in React, with API gateways written in .NET, using the Umbraco CMS system, and are a Netlify partner. Based on our expected traffic and budget, it became clear that some of these technologies were likely not the right choice for building the lighter website that we needed. So, the quest for what to do was on.
Standard or non-standard?
It is not that we disrespect the techniques that originally stood at the core of the web world and website development backed by HTML as such, but we needed a step forward. As soon as it was clear that our direction was all about leveraging fresh technologies, inspired by the MACH Alliance principles, then we could also ask ourselves a couple of more in-depth questions.
First, we needed to evaluate if a component-based structure was the right approach for what we needed or if that would become too rigid – it was what we needed. Then we evaluated if we could use standard components like those open source offered by Uber’s Base Web and Alibaba’s Ant Design. We considered that the maintenance would be a challenge for a small organization and that it would not give us the UX we wanted. This was by far the most expensive decision we made because this meant that we would have to build our own “LEGO” components from scratch (and we needed 20 to launch the initial 95-page site), but this is also the key element in giving us the touch and feel we wanted.
The next series of debates were around whether we really needed a solid API gateway to exchange data with a processing back-end – as we do not process a lot of data from our website. The conclusion was most likely not. Then we reviewed Umbraco and reached the conclusion, that as a non-enterprise company, we could find something a little lighter, more nimble, and more modern. With those decisions made, we started to have an understanding of what we wanted to build and what we wanted to use – defining what was standard and what was non-standard.
The toolbox we built
While we have expanded our marketing team, we gradually proceeded with defining our marketing needs. Based on this definition combined with many discussions, the Slize Digital team started to define our super cool toolbox to meet our needs. It is packed with the latest technology – the result of a powerful mix of development and modern applications, that can best be summarised below in technical terms.
A JavaScript-based, modern and static website, that loads instantly thanks to being a single-page application. Under the hood, we have a powerful combination of React and Next JS as the site generator, Strapi as the new headless CMS or content management system – where we manage our current components for building our website. We use Netlify as an advanced hosting Platform-as-a-Service and Azure Cloud for hosting our Strapi project. Finally, we use a service called Cloudinary for the image CDN, allowing for hosting, scaling, and reformatting all the images, basically making life easier for those creating webpages. No more PHP or WordPress.
As a result of the above, we now have a website that loads super fast across multiple platforms. Because we use components that have all been previously tested, the team can build a new page in a matter of hours and publish in full confidence that everything works as intended without having to spend time checking it on various platforms or browsers. This also means that we can keep our site super dynamic moving forward. And, yes, the team is pretty excited about that.
“We did this because we wanted to focus on user experience. This is the modern way of building websites. We talked a lot about the website with Nicolai. And he once told me: “If we want to preach the new way of building websites, we need to take our own medicine.” So, in addition to a good user experience, it was a decision to use new technologies – because that’s what Global Mediator does.”
- Brian Kobberøe Fink, Co-Founder and CEO at Slize Digital
Our IT Security team worked with Slize to make sure that everything is as secure as it can possibly be. Static web pages are very difficult to take over. With our access to Strapi, well protected by our own VPN and part of our own Active Directory setup, we feel a lot less vulnerable than we did when forgetting to upgrade add-ons on our previous site could lead to numerous vulnerabilities.
Some behind-the-scenes
Some of you may not have time to get lost in the variety of options we considered and just use our journey to get inspired for your own projects. The modular structure we now have resonates with working with different technologies, various business areas, and wishing to do inbound marketing – we can create content in a fraction of the time it used to take.
To bring more life and dynamics to the new website, make it more engaging and optimize the user experience, the team developed it with JavaScript as a single page application - SPA. But, since SPAs do not really get along with SEO optimization that well, the team decided to use a static website generator. Thus, Next.js basically reads JavaScript and makes an HTML version from that. This increases the page load speed and makes SEO optimization work perfectly.
Strapi, the innovative, headless CMS, runs in the background of the website and stores content, our principal asset, in a secure database away from the website. This makes it hard for anybody to hack the site as the data is not there. Of course, Strapi needs a database to store the content, and a server to run on. So, it is hosted on our own Azure environment, behind the company firewalls, making it very secure.
In addition to a good user experience, it was a decision to use new technologies – because that’s what Global Mediator does
Strapi is quite simple and intuitive for the editors to grasp quickly and easy to use, it is also quite flexible for the developers to work with. Very logical, this CMS allows building web pages from LEGO-style blocks that can be combined differently from page to page. The Slize team developed a set of components for creating pages – and the approach proved to be very adaptable and responsive to deliver exactly what we wanted.
Our Marketing team greatly appreciates working with the CMS and enjoy constructing web pages from scratch – and seeing the changes in only a moment after clicking the Save button. This is a new experience in building websites, building the front end the way you want it to be – you have no limitations. What’s more, it works great with React SPA, since it needs to read very little data from the CMS to be able to display on the website - it loads extremely fast.
We use Netlify for hosting and serverless backend services for web applications and static websites. They provide cost-effective hosting for websites where the source files are stored in Git, the version control system, and then generated into static web content files served via a Content Delivery Network. For good measure, we combine this with an extra CDN service called Cloudinary to ensure that our high-resolution images load perfectly on all platforms.
As a company, we run an average of 50 open projects and we greatly appreciate what we do. Even so, this was an absolutely super cool project. Feel free to reach out to us or Slize Digital if you need a little more inspiration – we have done a lot of homework, that can shorten the development cycle for your or other organizations’ projects.
Stay current with the latest insights from us