Ways to implement headless in Optimizely

Wednesday, September 20, 2023 | Headless
Surjit

Surjit Bharath

Director of Hidden Foundry

Optimizely Most Valued Professional (OMVP), Subject Matter Expert (SME), CMS and Commerce certified

Contact Me

What is Headless, and Why Does It Sound Like a Halloween Special?

"Headless" might sound like something out of a horror movie, but in the tech world, it's far from spooky. In simple terms, a headless system is one where the front-end (the "head") is decoupled from the back-end. This means the content management system (CMS) delivers content without determining how it will be presented. So, no zombies here, just a flexible way to manage and display content!

 

Different Headless Architectures to Implement

With Optimizely, you're not limited to just one way of going headless. Here are some of the architectural choices you can make:

  • Full SPA (Single Page Application): This is a fully headless approach. You can choose any front-end framework, and the back-end communicates through the ContentGraph or Content Delivery APIs. It's highly flexible, separating the front-end from the back-end and offering users a smooth browsing experience.

  • Hybrid Approach: This is a mix of traditional and headless. The main structure uses ASP.NET MVC and Razor. But for dynamic parts, a front-end framework interacts with the Content Delivery APIs. It's a balanced approach that combines the best of both worlds.

  • Traditional Approach: Here, the back-end handles most tasks, delivering complete web pages. Any interactive parts on the pages use JavaScript or a basic version of a front-end framework. It's a classic approach where the CMS and the presentation layer are closely integrated.

Optimizely's headless capabilities extend beyond just content delivery. It includes classical REST APIs that not only allow you to pull content but also manage product data, such as importing/exporting product details, updating inventory, and adjusting prices. The platform also supports cart functionalities like adding items to the cart, retrieving cart details, and removing items.

For those diving deeper into CMS functionalities, Optimizely offers Content Graph, its implementation of GraphQL. This feature empowers the front-end team to craft queries without waiting for the back-end team to develop custom REST APIs for complex queries. It streamlines the development process, reducing time and shifting more control to the front-end team.

 

3. Use Cases That Would Benefit from Going Headless

Going headless isn't just a tech trend; it offers real benefits for specific scenarios:

  • Multi-Platform Publishing: If you're looking to publish content across websites, mobile apps, digital displays, and other platforms, headless can make this easier. You create content once and display it anywhere.

  • Rapid Front-End Changes: If you frequently update the look and feel of your site but don't want to touch the content, a headless approach allows you to change the front-end without affecting the back-end.

  • Scalability: For sites expecting high traffic or those that need to scale resources quickly, headless can be beneficial. Since the front-end and back-end are separate, you can scale them independently based on demand.

  • Future-Proofing: With the tech landscape always evolving, going headless means you can adopt new front-end technologies without overhauling your entire system.

In conclusion, while "headless" might sound daunting, it's a powerful approach in the digital world. With Optimizely, you have the tools and flexibility to choose the best headless strategy for your needs.

;