Creating compelling web experiences has become crucial in building loyal customers but you can’t get fresh, novel, and engaging websites without up-to-date content and development architectures. Enter the Content Mesh. The Content Mesh is emerging to free up developers and content creators to use whichever tool works best for managing content, developing the website, or optimizing performance. Join Gatsby and Contentful as we explore the rise of the Content Mesh, Headless CMSs, content infrastructures, and the future of the web technology stack. Watch the on demand webinar here: https://www.gatsbyjs.com/content-mesh-contentful
3. Presenters
Linda Watkins
Director of Marketing
Gatsby
@lindawatkins
Shyamal Ruparel,
Developer Advocate
Contentful
@shyruparel
Sam Bhagwat
Co-founder & Head of Enterprise
Gatsby
@calcsam
5. With millions of websites,
developers have to create
compelling experiences to engage
audiences when new destinations
are only a few keystrokes away.
6. Digitally native brands such as
Harry’s, Dollar Shave Club,
Bonobos, & Stitchfix are
disrupting traditional industries
like consumer goods (CPG),
clothing, retail, travel...
7. The returns to having an
incredible web
presence are rising
8. With the rise of e-commerce &
social sharing,
a website that’s 10% better than
the competition might
deliver 20% or 50% or 100%
more revenue
11. The CMS was born to make
content sites possible.
Now, it’s being reimagined to
make them incredible.
12. In the early 2000s, publishing on the web was
difficult. The CMS emerged as a single
application to store content, build sites, and
deliver them to users.
Over time, the feature landscape broadened —
key areas like search, analytics, payments,
personalization, and e-commerce emerged.
13. TRADITIONAL FULL-STACK
CMS ARCHITECTURE
Hosting
Presentation
Content Editing UI
Database
Forms Auth Analytics
Search Personalization
Payment
Preview UI components
Page creation
Content Mesh
Forms
Content Systems CI/CD + Hosting
Internal APIs
Headless CMS
E-commerce
CMSs
Other services
MODULAR/HEADLESS
CMS ARCHITECTURE
UI libraryPreview
Payment Personalization
Auth AnalyticsSearchUI elements
DIY
see Journey To The Content Mesh
Architectures are Modularizing
14. A team running an e-commerce
site is migrating from Drupal.
They’re splitting up their CMS,
storing products in Contentful,
reviews in Bazaarvoice, and
user data in Auth0.
23. CMS development
environment
Modern JS
Ecosystem
Walled-garden
development
Headless Cloud CMS
Local app servers &
DBs
Headless Cloud CMS
No project organization
or bundling tools
Babel, Webpack, NPM,
React/ Angular/Vue
Bug-prone DOM
rendering
Virtual DOM
GROWING PRESSURE DIFFERENTIAL BETWEEN
CMS DEVELOPMENT & MODERN JS
(see The Rise of Modern Web Development)
34. Out of the box
Component UI + Virtual DOM
Bundling, code splitting, transpiling
Version control
CLI, dev server, hot reloading
Easy to add
Component curation
OSS components & comp. libraries
Linting & formatting
Component inspection
Gatsby offers modern development tooling
35. Gatsby offers perf out of the box
Delivery optimization Payload optimization
● Static files delivered to CDN
● No app servers
● No databases
● Globally available
● Code splitting
● Smart link prefetching
○ Instantaneous in-site nav
● Inlining critical JS & CSS
● Progressive image loading
● Responsive image loading
○ Advanced SVG support
(blur-up, traced-svg, sqip…)
38. The Challenge
● Big product launch had to handle lots of
traffic with no room for failure
● Tight timeline
● Most visitors on mobile
● Needed performance out of the box
39. “We wanted to focus on performance
at the beginning of the project. It’s
easier than trying to make a built
website perform later.”
-Tim Brown, Senior Software Engineer
Harry’s
40. The Results
● 5X as fast (compared to competitors)
● Mobile optimized
● Out of the box performance
● Successful launch!
41. “As an ecommerce site, performance
(SEO and conversion) is super
important and Gatsby takes care of this
for us.”
-Johnny Lin, Engineering Manager
Harry’s
42. “We were able to allow newer
teammates to be part of the on-call for
the launch because Gatsby made it so
easy to maintain.”
Tim Brown, Senior Software Engineer
Harry’s
44. The Challenge
● Slow site led to 60% bounce rate
● Losing customers
● Poor experience on mobile devices
45. The Results
● Increased lead conversion by 60%
● 22% increase in organic traffic
● 50% increase in accessibility score, causing
their Google search rank to climb
● Mobile optimized
46. “The website went from a burden to a
strategic tool we use to capture leads
and generate ROI.””
-Zach Muha, Director of Digital Marketing
Youfit
61. I don't want to do that!
I don't have time for that!
62. Don’t let a CMS get in the way of
shipping software.
Contentful provides a content infrastructure that enables
teams to power content in any digital product.
106. SET THE DATA
function getGameData() {
var data = {};
data["Players"] = [];
var innerData = {};
var i = 0;
for (; i < document.getElementsByClassName("cf-form-input").length; i +=
1) {
switch (i % 3) {
case 0:
innerData = {};
innerData["Name"] = document.getElementsByClassName(
"cf-form-input")[i].value;
break;
case 1:
innerData["Score"] = document.getElementsByClassName(
"cf-form-input")[i].value;
break;
case 2:
innerData["Faction"] = document.getElementsByClassName(
"cf-form-input")[i].value;
data["Players"].push(innerData);
break;
}
}
return (data);
}
158. MIGRATION CLI
CONTENT TYPE OPERATIONS
Create a content type01
02
03
04
05
Delete a content type
Edit a content type
Create/edit/delete fields
Change a field ID
159. ALL IN JAVASCRIPT
module.exports = function runMigration(migration) {
const table = migration.editContentType("table");
Table
.createField("winner")
.name("winner")
.type("Symbol")
.required(false);
return;
};