Revolutionising Digital Presence: A Deep Dive into Sage’s Headless Architecture

In the fast-paced digital era, companies are continually searching for innovative solutions to enhance their online presence. One such trailblazing approach is the adoption of headless architecture. In this case study, we explore how Sage, a prominent player in the business landscape, harnessed the power of headless technology to unlock unprecedented benefits. We’ll delve into the key advantages, the implementation strategies employed, and the promising future improvements on Sage’s horizon. 

The Most Sought-After Benefits of Headless: 

Flexibility and Agility 

Sage embraced agile development methodologies to enhance flexibility and agility. This approach allowed the team to work on multiple areas of code simultaneously, fostering iterative development. Notably, Sage chose an ongoing conversion process to headless, enabling continuous site development while making the migration. 

Improved User Experience 

Microservices played a pivotal role in Sage’s strategy, allowing optimal frameworks to be utilised for each aspect of their solution. The implementation of Next.js ensured a responsive client-side experience, while JSS seamlessly integrated Sitecore data on the frontend. Sage leveraged Dotnet middleware to secure integrations with other systems. 

Easier Maintenance and Updates 

Deploying the whole website in one go is a slow process and can contain unintended code changes. By splitting the code into microservices each release will contain only the minimal changes needed so the release time is much faster and the risk associated with code regressions is reduced. This has meant that Sage can release much more frequently so issues and business requirements are implemented quickly 

Scalability 

Containerisation was a key aspect of Sage’s scalability strategy. Individual services were hosted in containers, with Docker used for development and Kubernetes for production. Kubernetes, with its ability to monitor container health, played a crucial role in addressing high load and failover scenarios, ensuring minimal impact on users. The decision to separate code into individual repositories also allows multiple development teams to work in parallel, increasing productivity. 

The Architecture 

Sitecore is a very powerful tool for building websites with a large number of features that assist a business designing and building their online experience. One of the drawbacks with this large tool is that performance can suffer, both in the time taken to deploy code changes and also in the responsiveness of the customer’s experience. Moving to a headless architecture has helped Sage to improve website performance whilst also keeping many of the benefits of Sitecore. We will take some of the ways this was done, starting with a diagram showing an overview of the headless architecture. 

Next js 

Next js is a popular framework for building react applications. It is a good choice when building headless applications that interact with Sitecore, partly because react is widely used so finding developers is easier and partly because there is good documentation and other resources that explain how to integrate Next js with Sitecore. 

JSS 

Sitecore JavaScript Rendering SDKs (JSS) allow content from Sitecore to be easily rendered in the front end. In practice, these are JavaScript SDKs that are consumed in the Next js application and provide the data structures and components needed to work with Sitecore. One additional benefit, on top of aiding development, is that it enables the react components to behave as traditional Sitecore components in scenarios such as the experience editor. 

Dotnet middleware 

One of the dangers of headless development is that business logic bleeds into the front end, which can lead to security issues and tight coupling of business and display logic. Dotnet middleware APIs form an effective way of mitigating this. For example, credentials for accessing third-party APIs can only be used by the middleware and so are not exposed in the browser. Sage is looking to move towards a back end for front end design of these APIs so that a single orchestration API handles requests from the UI and is then responsible for collating the data needed to facilitate the request. 

Containerisation 

The headless architecture relies heavily on microservices, where each part of the solution runs in isolation from the others. This widely used design pattern can enable multiple teams to work on a single project in parallel and also reduces the setup needed to work on an individual service. At Sage the front end developers can work on the next js solution and use a hosted development environment to consume other services rather than hosting everything on their own development machine. Each microservice is much faster to release than the previous Sitecore solution so deployment time is much faster too. This faster release time is allowing Sage to increase the frequency of releases with the ultimate aim of being able to release code at any point. 

Conclusion 

Sage’s venture into the world of headless architecture stands as a testament to the transformative potential of this innovative approach. By prioritising flexibility, improving user experiences, easing maintenance, and achieving scalability, Sage provides valuable insights for businesses seeking to thrive in the ever-evolving digital landscape. The strategies shared by Sage, along with their future plans, serve as a guide for those navigating the challenges and opportunities presented by the dynamic digital realm.