Headless Architecture

&

The Future of Websites

⋆
⋆

@webcampzagreb

•

@swisswebmiss

Agenda

Introduction

Solution Architecting

Decoupling Systems

How to Implement

Questions?


Dobar dan! 

I'm Heidi.

American from Portland, OR.

Senior Front End Engineer @Bumped

            @swisswebmiss

Solution Architecting

Finding the Right Fit

"Platform-Agnostic"

Technical Requirements

We need to integrate into our order management system

We want to build the frontend in React

We want to build the backend in Ruby.

In the future we would like to create a progressive web app.

We want to include User-Generated
Content

Fitting into the parameters of a monolith system has implications on scalability, performance,

and user-experience.

 

Technical Debt

MVP

Phase II?

Technical Debt

Tethered to
system roadmap

Custom layer
of code

Less control of
source code

Performance Issues

of internet users expect the mobile version of the website to be faster than the desktop

85%

Source: sitecore.com/resources/index/infographics/go-beyond-the-web

Performance Issues

Unoptimized media
and scripts

Resource-intensive
plugins

Heavy load time
on the front end

Performance Issues

Median Time to Interact

Reach

Source: sitecore.com/resources/index/infographics/go-beyond-the-web

of consumers want to learn more about a place they are visiting through use of AR/VR.

67%

Reach

Source: sitecore.com/resources/index/infographics/go-beyond-the-web

of millennials said they would not buy from a brand that published irrelevant, badly written, poorly designed content.

71%

Reach

More work for
content creators

Inconsistencies in
content

Data stored in
different databases

Decoupling Systems

Going Beyond the Browser

Separate the

presentation layer

from the backend layer.

INFRASTRUCTURE

WEBSERVER

DATABASE

BACK-END UI

API

YOUR CODE

WEBSERVER

Headless

Monolith

INFRASTRUCTURE

WEBSERVER

DATABASE

BACK-END UI

YOUR CODE

INFRASTRUCTURE

WEBSERVER

DATABASE

BACK-END UI

API

YOUR CODE

WEBSERVER

Headless

Sample eCommerce Architecture

Process
APIs

System

APIs

Payment Processing

Tax
Service

Order Processing

Shipping
Status

Payment

Address

Customer

Inventory

Tax

Shipment

Promos

Orders

Fulfillment

Experience
APIs

Content Management

Allows each team to focus on what they are good at.

Flexibility

Backend and frontend systems are swappable.

Framework Agnostic

Leverage static-site generators

Faster Page Speed

Query the services you need,
when you need them.

Greater Control

{
 user(id: 123) {
   friends {
     friends(job: "engineer") {
       name
     }
   }
 }
}

Test and Iterate

Test and deploy component by component.

Omnichannel

"Now
Boarding"

"Check in for your flight"

"Price drop on flight"

"Flights to Zagreb"

Airline:  Flight:  Departure City: Arrival City: 
KLM 1234 AMS ZAG
Departure Time:  Arrival Time:  Duration: Price:
11:20 13:10 110 minutes € 499

Localization

Title

Hello!

Subtitle

Welcome to WebCamp.

English - UK

Title

Zdravo!

Subtitle

Dobrodošli u WebCamp.

Croatian

Vet Carefully

Further reach

Restricted editor

Restricted Editor

No robust
dashboards

No WYSIWYG editor

No built-in
plugins

Vet Carefully

Scalable

Larger tech stack

Further reach

Restricted editor

Increased Maintenance

Different
technologies

Separate containers

Version
control

Vet Carefully

Scalable

Larger tech stack

Further reach

Restricted editor

Performance

Costly

Cost Prohibitive

No open source
codebase

Additional hosting for presentation layer

Subscription-based
API services

Decoupling Your Approach

Think Content First

It means you need to start with
what you want to say instead of
how to present it.

Think like a
content strategist

1

Think like a content strategist

1

Who is my audience?

 

What is their customer journey and
what content do they need in each step?

 

Which channels do we need to
communicate through?

 

How do I structure the content so that I can reuse it across different places and channels?

Break the

WYSIWYG addiction

2

Break the WYSIWYG addiction

2

Draft

Preview

Publish

Status:

Staging Site

Break the WYSIWYG addiction

2

Draft

Preview

Publish

Status:

Live Site

Use APIs instead

of plugins

3

Use APIs instead of plugins

3

Data architecture


Type of API and language bindings


Average downtime and availability


Request limits and cost


Documentation + support

I can't start from scratch

¯\_(ツ)_/¯

“One of the natural wonders of this area [Australia] is the huge strangler vines. They seed in the upper branches of a fig tree and gradually work their way down the tree until they root in the soil. Over many years they grow into fantastic and beautiful shapes, meanwhile strangling and killing the tree that was their host.”

Strangler Pattern

Source: martinfowler.com/bliki/StranglerApplication.html

Martin Fowler

Strangler Pattern

Plan

Strangler Pattern

Identify boundaries

Plan

Strangler Pattern

Identify boundaries

Plan

Refactor both backend and frontend

Strangler Pattern

Refactor page by page

Strangler Pattern

Be mindful of scope creep

Refactor page by page

Strangler Pattern

Adoption

Coexist

Sunset

Long-term Process

Headless architecture can provide a more scalable, performant and personalized approach to your web applications and beyond.

Wrap up

Questions?

Slides will be available on Twitter:
@swisswebmiss

 https://joind.in/talk/137e5

Hvala

WebCamp Zagreb!