Solutions & Products
pexels-andrea-piacquadio-11780360

Optimize User Experiences with Single-Page Applications

Headless with Angular and Magnolia CMS

Engaging Omnichannel User Experiences with Headless CMS
06.04.2023
E-Commerce
Customer Experience
Digital Transformation
Omnichannel

Nowadays, an appealing web presence is indispensable for a brand. This includes high performance, an intuitive user interface, and a smooth, high-performance user experience. Especially when companies want to implement a new corporate UI, the existing web presence often needs to be technically rebuilt from the ground up - both on the back and frontend. In this blog article, learn how a headless CMS and a single-page architecture can help strengthen corporate identity and brand image.

What Is a Single-Page Web Application?

A single-page web application (SPA) is a web application that consists of a single HTML document whose content is dynamically reloaded. In contrast, classic web applications consist of several HTML documents linked to each other. This provides the basis for developing a web application through rich client distribution. Increased client-side execution of the web application enables a reduction in server load and the implementation of stand-alone web clients that offer offline support, for example.


This architecture allows web presences to be developed and designed from the beginning and managed in the final web presence. Two key technologies that can be used to pursue and achieve the goals of a new web presence are:


  1. Magnolia CMS for content management
  2. Angular and Angular SSR

Angular and Magnolia CMS in Perfect Harmony

A single-page web application requires a tool that can be used to implement it professionally, such as the front-end framework Angular.

What is Angular?

Angular is a web development platform co-developed by Google that provides developers with robust and powerful tools for building single-page web applications (SPA).


The benefits of Angular at a glance:


  • Custom and reusable components

  • High productivity and code consistency

  • Easy testing

  • Code reduction and good maintainability

  • High compatibility

  • Excellent tools through components provided by Magnolia for seamless integration

The Magnolia headless approach

Magnolia's Headless CMS integrates with Single Page Applications (SPAs) built with any front-end framework, such as Angular. The headless CMS approach separates content (backend) and view (frontend). Content can be conveniently managed through a single repository on different channels, such as websites or apps. The headless approach's advantage is that content must be maintained once but can then be published as often as desired.


Thanks to Magnolia, content authors retain the familiar visual user interface for managing content - even though they work in a headless CMS.

Blog_Grafik-02
Functionality of the headless approach: Complete separation of form and content

A match made in heaven

A project with one of our clients brought together the best of both worlds: Magnolia's flexibility and API to make the outstanding features of the Angular framework manageable in its high complexity. The result is a high-performance architecture that can meet the highest customer demands.


In the present project, the Angular Framework is used to pre-render the website via SSR (Server Side Rendering), which brings the following advantages: 


  • Easier access for web crawlers, resulting in optimal search engine optimization (SEO).
  • Improved performance on mobile devices and low-powered devices.
  • Displays the first page quickly with a first-contentful paint


The application optimizes the end-user experience when visiting the site over a slow or unreliable network connection while minimizing the risks of delivering outdated content. This strengthens the positive corporate image and the customer's loyalty to the brand.

Conclusion

The decision to use the technology stack proved to be the right one, especially in the customer project, and met and, in some cases, exceeded the high expectations of our customers and ourselves.


Once again, the advantages of the headless approach of Magnolia CMS and its future-proof technology stack became apparent, making seamless integration of the customer's surrounding systems possible. Angular also proved to be a very efficient and powerful tool for managing complexity and logic - a connection for the future.

You Might Also Be Interested

Arvato Magnolia Module

Sometimes you just need a little more. Learn how we can extend your Magnolia feature set with our modules.

Magnolia CMS

Magnolia is a platform for digital business, with content management as its core functionality.

Magnolia Demo

With Magnolia CMS, Arvato Systems offers a content management system to realize your corporate website.

About the Author


Andrea Mathieu has been working as a web developer since 2006. At Arvato Systems in Switzerland, he has been a senior front-end developer since 2016. He has several years of experience with various customers in Angular, JavaScript, HTML, and other software programs.

Written by

Andrea_Mathieu
Andrea Mathieu
Expert for Magnolia CMS