New Territory - Headless, Jamstack and modern web development movement.

Headless, Jamstack and modern web development movement. The term Headless gets thrown around a lot, but what does it actually mean and does it adequately encompass the new age of web development?

The Headless Horseman Pursuing Ichabod Crane, painting by John Quidor (1858)

In short, no. Headless is just one aspect of a myriad of tools used in what has become known as the Jamstack movement or ecosystem. This umbrella term encompasses all elements of the modern digital architecture. From Headless CMS to decoupled architectures, the Jamstack movement provides developers with unrivalled flexibility, systems integrations and customisation.

This cutting-edge approach has already revolutionised how we store and consume content, and with its continually evolving capabilities, Jamstack is set to generate further innovative and creative development in the future.

But what does Jamstack mean for the outlook of web development, and should we all be jumping ship from the traditional legacy structures?

Before we go into this, it’s probably best to break down exactly what Jamstack is.

Jamstack is a now industry-wide term used to refer to the continued growth and evolution of modern web development. Coined in 2015 by the founder of Netlify, the term originated from the combination of JavaScript, APIs, Markup - JAM.

As opposed to legacy development, Jamstack refers to a new approach rather than a set structure, and therefore can be difficult to define. The fact that it is often referred to as a ‘movement’ is in itself reflective of the continued evolution and growth of these tools as they continue to adapt and evolve.

So aside from Headless, what does it actually involve?

In a nutshell, Jamstack works by decoupling front and backend systems, allowing data to be incorporated as required and subsequently displayed in whatever User Interface (UI) format is optimal. Jamstack provides developers with greater flexibility and customisation, by making the need for business logic redundant, allowing for third parties and custom logic to be incorporated through the use of APIs.

Below are some explanations of key terminology:

Decoupling

Decoupling separates the system and service required to operate a site, whether that’s between the frontend and database, or backend and CMS. A clean separation between the two allows them to be operated and modified independently, providing greater customisation and flexibility.

Developers can then employ specialist third party applications, incorporating services as they see fit rather than having to rely on homegrown functionality.

Headless

With Headless CMS the frontend and the backend systems are completely separate. Imagine the frontend is the “head” and backend is the “body” - and that’s where the “headless” term originated.

With headless CMS data can be stored and sorted separately, without needing to know where or how it will be displayed. By alleviating the dependency on display concerns, developers have more freedom to focus on UI optimisation.

APIs

Application Programming Interface, or APIs, are effectively the middle man for Jamstack sites. They function as the connective tissue between applications, allowing them to talk to each other.

Jamstack improves customisation with the ability to incorporate third-party applications and custom logic through the use of APIs. APIs allow developers to create more complex applications without having to worry about developing the domain themselves.

Those are three of the crucial components of Jamstack, but there are many more listed in this glossary by Jamstack itself.

As with most technological advancements, Jamstack didn’t arise out of nowhere to act as competition for legacy systems. It grew out of necessity. With the way technology is headed, Jamstack is far better suited for the future; allowing content to be used on a variety of platforms with no set frontend display. In an evolving world of technology, this allows for content to be optimised for multiple platforms.

Jamstack also offers an improved developer experience. The decoupled architecture of Jamstack means that developers are able to focus on optimising specific aspects of the site, reducing the need for manual coding and allowing for more rapid development. Works can be undertaken to the website's systems without neessarily needing to interact with the content, data and information of the website, meaning continuous integration and delivery methods can take place.

With the diversifying digital platforms and dissemination of information the requirements of CMS have expanded. Many of which can not longer be met by monolithic legacy systems.

So, if Jamstack is truly as revolutionary as it seems, why isn’t everyone on board? To delve into that we have to take into consideration its competition: traditional web development.

When it comes to web development, Jamstack and legacy/traditional are two very distinct approaches. While both can be effective in their own right, Jamstack offers a number of advantages over traditional web development, which we’ve already explored.

The customisation it provides allows for more creative and innovative development, with content able to be optimised for multiple platforms without having to develop for every single platform individually. Jamstack sites also tend to have shorter load times than traditional sites, due to the fact that content is pre-built and served to the user quickly and efficiently.

Traditional CMS, also referred to as monolithic or legacy, functions through a single system and usually only have one UI format; typically a web page. With traditional sites, content is usually served to the user on-demand, which can make them more prone to slower loading times.

There are, however, benefits to traditional CMS.

Despite the development of Jamstack, there is definitely still a place for traditional sites. Compared to traditional builds, Jamstack is generally more costly to build and customise. Traditional CMS approach also generally has more third party support; in the case of Shopify a monolithic site has more access to Shopify apps which for e-commerce clients may be a priority, especially if they are accustom to Shopify’s in-house offerings.

Traditional sites are easier to be managed, and simpler to maintain. For smaller businesses or those less interested in pushing the boundaries of web capabilities, the advancements of Jamstack may be irrelevant for their digital intentions. In which case, the simplification of housing all aspects of a site within one system is often appealing. So although Jamstack has opened a lot of doors, some people are quite happy residing where they are.

We build both traditional and Jamstack sites. Often part of our initial planning with clients is deciding which is the better system for their brand and intention. Jamstack is generally more suited to larger scale or more complicated builds that are wanting to provide more custom offerings, such as Porter Packaging and Starshipit. These sites serve as a gallery as well a providing e-commerce functionality with high levels of customisation, often involving client services and liasing data to integrated systems.

Monolithic builds are great for ease of development as the simplification of systems is a lot easier to maintain or manipulate. Our own site is centered around Kirby which is based on the old-school but robust PHP scripting language which we believe is a great system for simple project that require a heap of flexibility. A lot of our client e-commerce sites are built fully within the Shopify Online Store 2.0 suite and don't require a headless build; being able to tap into the full 3rd party app ecosystem and simple build allows us to move rapidly to help scale the business and brand.

There are a number of headless content management systems that support Jamstack sites, but we opt to use Sanity. This is largely due to customisability of Sanity, and its ability to allow us to meet exact client requirements. Sanity also provides a great developer experience and easy integration with other platforms with dedicated resourcing for systems like Shopify.

Sanity also allows for easy integration of interactive elements. This is ideal for sites that want to make an impact with cutting edge design. Tongue & Groove and Beuchat feature extensive interactivity through the site, to heighten the UX and offer more creative ways of displaying product information.

Using Jamstack, we can continue to push the boundaries of development and design, creating digital platforms with greater capabilities and cutting edge aesthetics.

For now, yes. But, is it conceivable that within the foreseeable future it will become completely outdated and redundant? We could say yes but in all honesty these things are impossible to predict.

Until Jamstack builds become more accessible and affordable, traditional systems hold a functional role in the web development world. However, with the ever-evolving nature of technology, traditional development may become less and less adept at reaching audiences and therefore be forced to evolve.