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!
Headless Architecture and the Future of Websites
By Heidi Olsen
