Tech


<h3 class="wp-block-heading">ELI5&nbsp;</h3>



<p><em>Imagine you are building a LEGO structure, where the top part is a beautifully designed house and the bottom part is a platform on which it stands. Now, if you ever want to change the look of the house without changing the platform, you can easily swap it out for a different design because the two parts are not permanently attached.</em></p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="585" src="https://craftedup.com/wp-content/uploads/2023/10/illustration-computer-1024x585.png" alt="" class="wp-image-112293" srcset="https://craftedup.com/wp-content/uploads/2023/10/illustration-computer-1024x585.png 1024w, https://craftedup.com/wp-content/uploads/2023/10/illustration-computer-300x171.png 300w, https://craftedup.com/wp-content/uploads/2023/10/illustration-computer-768x439.png 768w, https://craftedup.com/wp-content/uploads/2023/10/illustration-computer-1536x878.png 1536w, https://craftedup.com/wp-content/uploads/2023/10/illustration-computer.png 1792w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h2 class="wp-block-heading">What is headless?</h2>



<p>Now, let&#8217;s relate this to software.</p>



<p>Headless is the complete separation of the frontend experiences from the backend services that provide data, functionality and business logic.</p>



<p>In traditional web development, the frontend (what you see and interact with, like the design of a website) and the backend (where all the data and logic are, like the foundation and the inner workings) are tightly intertwined, like a single LEGO piece. Check out Traditional vs Headless for a deeper understanding.</p>



<p>In a &#8220;headless&#8221; architecture, the frontend (the &#8220;head&#8221;) and the back-end are separated, like our two-part LEGO masterpiece. This means you can change the appearance and functionality of the front-end without having to mess with the backend, and vice versa.</p>



<p>Learn more about <a href="https://craftedup.com/blog/why-is-it-called-headless-architecture/">why is it called headless architecture</a>?</p>



<h2 class="wp-block-heading">What is a headless website?</h2>



<p>While headless is a general architecture, a headless website is the application of that architecture to a website. Meaning, your CMS or other data sources would live on a different system than your frontend. For example, you might manage your website’s content on something like <a href="https://directus.io/">directus</a> or <a href="https://www.contentful.com/">Contentful</a> (more on these later) and your frontend would be built using <a href="https://nextjs.org/">Next.js</a> or <a href="https://kit.svelte.dev/">SvelteKit</a>.&nbsp;</p>



<p><em>Of course there are tons of other possible providers for data and for building your frontend but your individual project’s needs and a good development partner will help drive those decisions.&nbsp;</em></p>



<h2 class="wp-block-heading">What is a headless CMS?</h2>



<p>Everyone has probably heard of content management systems like <a href="https://wordpress.org/">WordPress</a> or <a href="https://www.hubspot.com/products/cms">Hubspot CMS</a> but what about a headless CMS specifically?&nbsp;</p>



<p><em>This is an ever changing landscape and most providers either offer a limited version served through an API or some SDK to consume the CMS.</em></p>



<p>Headless CMS were built specifically for omnichannel delivery. What the hell does that mean? Well instead of building content specifically for a website or mobile app, you might generalize the content and serve it up to multiple places from the same data source. More on the benefits and potential pitfalls of this later.</p>



<h2 class="wp-block-heading">What is headless commerce?</h2>



<p>The commerce store is really no different than the CMS. Shopify and Maginto have offered all in one platforms for a long time that both manage products, handle fulfillment logic and give users a way to build those stores. Headless commerce is the idea of moving the logic and storage of those products to an api and allowing frontend specific frameworks to do what they do best. Shopify is a good example of a traditional ecommerce platform that has really dove head first into headless commerce. They went and <a href="https://techcrunch.com/2022/10/31/shopify-acquires-remix-to-bolster-its-storefront-design-tools/">acquired a frontend framework (Remix)</a> and now offer a first class citizen version of shopify in a headless form called <a href="https://hydrogen.shopify.dev/">Hydrogen</a>.&nbsp;</p>



<h2 class="wp-block-heading">Layers of a Headless Architecture</h2>



<p>There are 4 layers of a headless architecture: User Interface, Communication, Application and Administration.</p>



<h3 class="wp-block-heading">UI</h3>



<p>This is the presentation layer, which could be multiple channels like a website, a kiosk, a native application or a watch.</p>



<h3 class="wp-block-heading">Communication</h3>



<p>This is the orchestration layer that combines all of the application data into a consumable language that UI can display.</p>



<h3 class="wp-block-heading">Application</h3>



<p>This is the API layer that is responsible for delivering content, data and functionality through macroservices, microservices, events and webhooks. This is what allows businesses to select best in class services.</p>



<h3 class="wp-block-heading">Administration</h3>



<p>The administration layer is responsible for allowing users to manipulate data, edit settings and see reporting.</p>



<h2 class="wp-block-heading">What are the Benefits of Headless?</h2>



<ul>
<li>Flexibility: You can redesign your website or use different front-end technologies without changing the back-end.</li>



<li>Multiple Front-ends: You can have different &#8220;heads&#8221; (like a website, a mobile app, a smartwatch app, etc.) all using the same back-end data and logic.</li>



<li>Performance: Since the front-end only asks the back-end for data when it needs it, websites and apps can be faster and more responsive.</li>
</ul>



<p><em>For a more in depth look at the benefits checkout </em><a href="https://docs.google.com/document/u/0/d/1x8m6_E5VBrIDlVS5q7yNAvclZpgjLbafhkOvnHEolK0/edit"><em>Top Benefits of Going Headless</em></a></p>



<p>So, a headless architecture is like having a LEGO toy where you can easily swap out the design on top without changing the platform underneath. It&#8217;s all about flexibility and separation!</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="585" src="https://craftedup.com/wp-content/uploads/2023/09/path-to-headless-1024x585.png" alt="" class="wp-image-112296" srcset="https://craftedup.com/wp-content/uploads/2023/09/path-to-headless-1024x585.png 1024w, https://craftedup.com/wp-content/uploads/2023/09/path-to-headless-300x171.png 300w, https://craftedup.com/wp-content/uploads/2023/09/path-to-headless-768x439.png 768w, https://craftedup.com/wp-content/uploads/2023/09/path-to-headless-1536x878.png 1536w, https://craftedup.com/wp-content/uploads/2023/09/path-to-headless.png 1792w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h2 class="wp-block-heading">Brief overview of architectural evolution in software</h2>



<p>Software architecture has evolved over time to address the challenges of increasing complexity, scale, and agility. Traditional monolithic architectures are well-suited for small, simple systems, but they struggle to meet the demands of modern applications.</p>



<p>Headless architectures are a newer approach that decouples the backend and frontend layers of an application. This decoupling offers a number of benefits, including increased flexibility, scalability, and maintainability. But nothing is free, headless also adds complexity and requires the right team to implement.</p>



<p><strong>Traditional (Monolithic) Architecture:</strong> A monolithic architecture is a software design approach where all components of the application are tightly coupled and packaged together as a single unit. This includes the backend, frontend, and database.</p>



<p>Key characteristics:</p>



<ul>
<li>Tightly coupled: All components of the application are interdependent and cannot be easily separated or replaced.</li>



<li>All-in-one codebase: The entire application is contained in a single codebase. This can make it simpler at first but more difficult to manage and maintain the codebase as the application grows.</li>



<li>Scaling and deployment concerns: Scaling and deploying a monolithic application can be challenging, as it requires updating and deploying the entire application at once.</li>
</ul>



<p>Traditional monolithic architectures are well-suited for small, simple systems or for businesses that fit well into existing solutions.&nbsp;</p>



<p><strong>Headless Architecture</strong>: A headless architecture is a software design approach where the backend and frontend layers of the application are decoupled. This means that the frontend can be built using any technology stack, and it can be deployed on any device.</p>



<p>Key characteristics:</p>



<ul>
<li>Decoupled backend and frontend: The backend and frontend layers of the application are independent of each other. This allows developers to choose the best technologies and tools for each layer, and it makes the application more flexible and scalable.</li>



<li>API-driven interaction: The backend and frontend layers of the application communicate with each other through APIs. This makes it easy to integrate the application with other systems and services.</li>



<li>Frontend flexibility: The frontend layer of a headless application can be built using any technology stack. This gives developers the freedom to choose the tools and frameworks that they are most comfortable with.</li>
</ul>



<p>Headless architectures are well-suited for complex and scalable applications. They are also ideal for applications that need to be deployed on multiple devices or that need to be integrated with other systems and services.</p>



<h2 class="wp-block-heading">Comparison Between Traditional and Headless Architectures</h2>



<figure class="wp-block-table"><table><tbody><tr><td>Feature</td><td>Traditional (Monolithic) Architecture</td><td>Headless Architecture</td></tr><tr><td>Development flexibility</td><td>Low</td><td>High</td></tr><tr><td>Scalability</td><td>Limited</td><td>High</td></tr><tr><td>Maintenance &amp; updates</td><td>Challenging</td><td>Easier</td></tr><tr><td>Performance</td><td>Can be highly optimized</td><td>Potential for optimized performance</td></tr><tr><td>Security</td><td>A security breach could expose the entire system</td><td>Decoupled nature may reduce the risk of system-wide breaches</td></tr><tr><td>Development speed</td><td>Initial setup might be quicker</td><td>Initial setup may require more work</td></tr></tbody></table></figure>



<h2 class="wp-block-heading">Concluding Thoughts</h2>



<p>Choosing the right architecture for a particular project is essential for success. Headless architectures are becoming increasingly popular due to their many benefits, but traditional monolithic architectures can still be a good choice for certain projects.</p>



<p>It is important to consider the long-term implications of architectural choices. Headless architectures can offer more flexibility and scalability in the long run, but they may require more upfront investment.</p>


Contents

Is your business
ready for structured content?

Introduction to Headless

Contents

Is your business ready for structured content?

Introduction to Headless

Is your business
ready for structured content?