Headless approach - pros and cons

Headless approach has been in an industry talking point for the past 2-3 years already and it’s fairly safe to say that it’s here to stay. Still, the choice between headless and traditional, “monolithic” approach boils down to the business needs and is not self-evident. In this article we’ll dive deeper into the pros and cons of headless and how we utilize the capabilities of the technology in digital ventures.

Headless approach - pros outweigh the cons

When considering how to build a frontend for an ecommerce & CMS platform, one option is the so called “headless approach”. This means that the frontend part of the system is separated from the “monolith” as its own application, which communicates with the backend system through APIs.

The traditional approach in these types of projects has been to build backends and frontends coupled into one system.

Traditional approachHeadless approach

Based on our experience in recent projects, headless technology has now developed into a viable option for most new ecommerce and CMS platform projects. This stems from the fact that the early stage problems of web application JavaScript frameworks have now been solved.

Of course, this technology is not suitable for all cases, and can create extra overhead for development. However, we estimate that serious digital development projects quite often include a magnitude of tailored frontend work and therefore justify the use of the headless approach. On top of that, Lamia has developed a basic setup for Magento 2 and Drupal headless frontends, which tackles the problem of creating all of the basic frontend functionality as custom work in the projects.

Pros

  • Speed of development - based on real projects, building frontend features on top of Lamia M2 headless framework is 30-40% faster than conventional Magento xml/template-file-based method
  • Modular approach - In case some of the backend systems in architecture need to be replaced in the future, all the frontend development will still be valid and compatible with the new backend systems
  • Performance - compared to standard Magento 2 solution, the load times are significantly faster because most of the interactive content is loaded directly from a visitors’ browser. This is possible because the application is run in the browser and only needs to load data from the server/(and that is usually done asynchronously), compared to the traditional client-server-model. High performing site also enables great benefit from the SEO point of view. Headless system is incredibly scalable because a lot of logic is processed in the browser which offloads the traffic from the backend system. Also administrator tools and user interface will not be affected by the load from visitors. This makes the admin panel more usable even during visitor peaks.
  • User experience especially for mobile devices has greater capability to be seamless, with native-like implementation.
  • Customization possibilities - because the application is now decoupled from Magento or Drupal logic and templates, it is effortless to customize the user flows according to optimized paths and scenarios found during the service design process. This means less compromises and “fighting against” main system restrictions. This gives both designers and developers the ability to apply the best practices in implementation.
  • Lamia Magento 2 Headless Framework - Lamia has developed a framework that is maintained and further developed internally and throughout the customer projects. It includes all necessary building blocks for Magento ecommerce and Drupal CMS as customizable default components.There is no need to reinvent the wheel, but instead take the basic component set into use and build customization and brand layer on top of that. It also includes a lot of heavy-lifting in the background, for example static html page rendering for search engine optimisation.
  • Direct connection to other systems via gateway - due to modular architectural pattern, headless application can be connected directly to not only Magento but other systems too via API layer. This means that in case some data will not be integrated to backend system, it can be still fetched directly from the integration gateway to the user interface of the headless application
  • Security - due the backend logic being isolated from frontend application, tighter security policies can be enforced for the API that the headless app is consuming. The administration interface will also be separated from the public app, making it less vulnerable to attacks.

Cons - and how to tackle them

  • Possible SEO hickups. When implemented poorly, as any other technological platform, the headless approach will negatively impact search engine visibility. These are basic aspects nowadays in implementations, and there are ways to tackle the problem. One example is aforementioned static page rendering for search engines, in order to serve SE crawlers a fully rendered and fast html site, and full experience for the users.
  • Re-implementing basic features. This is a fully justified concern. However, we have created a highly advanced framework for Magento 2 and Drupal, which includes all of the basic ecommerce functionalities. All of these can be utilized out of the box.
  • Risk of high development cost. Based on our experience, compared to developing traditional Magento frontend, the headless JavaScript development is more efficient and developer-friendly. The framework that we are using tackles the basic “reinventing the wheel” problem so that the customer does not need to pay for the development that starts from zero. And, as said, customization work is more convenient compared to standard Magento.

Wrap-up

However, as said, this technology is not a jack of all trades. Careful planning is needed and also the expertise to evaluate the best technology for the implementation phase based on real user stories, features and architectural aspects.

When implementing projects, in the technical planning phase, the target should be to discover the best long term solutions for your business. This means creating a digital roadmap and with that make sustainable and future-proof technological choices. That’s how all the decisions will now and in the future be based on real business requirements and architectural best practices.

If you’re considering a headless approach or would like to test whether it’s a fit for your digital development needs, let’s discuss more!

"We see that the benefits of headless technology have been increasing all the time and continue to do so towards the future."