1

Innovation

Content

Operations

User Experience

Building Single Page Apps with React

Headless CMS, and GraphQL

Russ Danner, VP of Products Crafter Software February 2020

1997- 2001: Industrial Process Control, Specialty steel alloys 2001 - 2008: Development, Architecture, Management in the publishing industry 2008 - 2013: WCM Practice Director, Consulting firm 2013 - Present: Vice President of Products, CMS Company (Crafter Software)

Russ Danner Vice President, Products Crafter Software

Content

Modern Web Applications

Relies on API calls for data Fine. But don’t trivialize the server

01

Relies on API calls for data Fine. But don’t trivialize the server

01

For public facing websites, SEO remains a _MAJOR_ concern

01

Relies on API calls for data Fine. But don’t trivialize the server

01

For public facing websites, SEO remains a _MAJOR_ concern

01

The number of framework variants and options along with the high rate of innovation and change is great! And also TERRIBLE!

GraphQL

GraphQL is ...

A Query Language An Alternative to REST

An API Gateway All of the above

Content

Standard data access “query language” 01

Standard data access “query language” 01

Discoverability enables tooling 01

Standard data access “query language” 01

Discoverability enables tooling 01

No Need to Version APIs

Standard data access “query language” 01

Discoverability enables tooling 01

No Need to Version APIs

Quickly build and roll out an integrated API gateway

Standard data access “query language” 01

Discoverability enables tooling 01

No Need to Version APIs

Quickly build and roll out an integrated API gateway

The rules bring predictability

No inherent security 01

No inherent security 01

The rules bring limitation 01

No inherent security 01

The rules bring limitation 01

GraphQL is NOT always the right API semantics for the job

No inherent security 01

The rules bring limitation 01

GraphQL is NOT always the right API semantics for the job

You have to be aware of the performance overhead introduced by GraphQL

CMS Content Management Systems

Do You Love Your CMS? Show of Hands

Almost Everyone Shares a Common Opinion

Legacy CMS CMS

● Page dominant

● Database centric architecture

● Language, framework specific

● Traditional deployment models

The architecture is the problem

Headless CMS Architecture

Is Headless CMS the Ultimate Cure?

Headless CMS Architecture

Better Support For Multi-Channel: Check

Headless CMS Architecture

Let’s Developers Modern Tech: Check

Headless CMS Architecture

Much Greater Dev Speed & Flexibility: Check

Headless CMS

Architecturally Speaking ...

Headless CMS Architecture

Backend Architecture & Scale issues: Unknown

Headless CMS Architecture

Content is Still Siloed per Environment: Fail

Headless CMS Architecture

DevOps Integration Doesn’t Exist: Fail

Is Headless ALWAYS the RIGHT answer?

Do You Really Need React to Build a Marketing Landing Page?

Most Headless CMS Platforms Lack Visual Authoring Tools

Typical Headless Content Authoring Experience

Headless CMS: Where’s the Beef?

Typical Headless CMS To the Rescue?

● Poor authoring support

○ In-context preview and editing

○ Drag and drop

● No marketing tool support

● Only partially addresses CI/CD Concerns

Headless CMS sacrifices content authoring in favor of

ease of development. Innovation improves, but not

enough and at too high a cost.

SPAs are amazing but the don’t eliminate the server and they have SEO problems

01

SPAs are amazing but the don’t eliminate the server and they have SEO problems

01

GraphQL is awesome but it has limitations and I need to know my GraphQL backend implementation

01

SPAs are amazing but the don’t eliminate the server and they have SEO problems

01

GraphQL is awesome but it has limitations and I need to know my GraphQL backend implementation

01

Headless CMS makes CMS better for developers but I still have scalability and devops issues and now my authors are going to hate the CMS?

Anyone Know of Solutions for These? Show of Hands

SPAs

Only works for sites with a predefined structure. Not great for true drag-n-drop builds with nesting.

01

Only works for sites with a predefined structure. Not great for true drag-n-drop builds with nesting.

01

Only works for relatively small sites. Even if you work around the full site build issue for page edits, a common component edit will force a full render.

01

Only works for sites with a predefined structure. Not great for true drag-n-drop builds with nesting.

01

Only works for relatively small sites. Even if you work around the full site build issue for page edits, a common component edit will force a full render.

01

It’s no good for personalization and other dynamic features

Only works for sites with a predefined structure. Not great for true drag-n-drop builds with nesting.

01

Only works for relatively small sites. Even if you work around the full site build issue for page edits, a common component edit will force a full render.

01

It’s no good for personalization and other dynamic features

Search. Once you start introducing server — you have server.

Server Side Render is Awesome. - It scales for larger sites - Provides SEO benefits - Supports search and other powerful interactions - Supports personalization

But it requires a server. Sorry. :)

01

Headless CMS

Headless+ addresses development and authoring issues but not all headless+ CMS platforms are created equal. Challenges with DevOps, DevContentOps and the CI/CD automation still exist.

01

A “Perfect” Fit

Where SEO is not a concern. GO FOR IT. 01

Where SEO is not a concern. GO FOR IT. 01

Manage the builds scripts as content 01

Where SEO is not a concern. GO FOR IT. 01

Where SEO is a concern. Accept the server 01

Manage the builds scripts as content 01

Where SEO is not a concern. GO FOR IT. 01

Where SEO is a concern. Accept the server

01

SPAs are a lot of effort to create. Are you getting the leverage? Make sure your getting the leverage — If not, use simple markup.

Manage the builds scripts as content 01

Where SEO is not a concern. GO FOR IT. 01

Where SEO is a concern. Accept the server

01

SPAs are a lot of effort to create. Are you getting the leverage? Make sure your getting the leverage — If not, use simple markup.

Manage the builds scripts as content 01

If authors want a high degree of control to assemble the application with drag and drop plan extra time to think this through end to end

Beware the deletes and renames in the schema 01

Think through security and personalization. Do you need it? Where is it applied?

01

Beware the deletes and renames in the schema 01

Think through security and personalization. Do you need it? Where is it applied?

01

Don’t force it. If you have a data retrieval or mutation that doesn’t fit… USE REST. You’re still a cool kid.

01

Beware the deletes and renames in the schema 01

Think through security and personalization. Do you need it? Where is it applied?

01

Don’t force it. If you have a data retrieval or mutation that doesn’t fit… USE REST. You’re still a cool kid.

01

Realize that without transformations some amount of the backing store’s structure abstractions will leak through in the query response.

Beware the deletes and renames in the schema 01

Think through security and personalization. Do you need it? Where is it applied?

01

Don’t force it. If you have a data retrieval or mutation that doesn’t fit… USE REST. You’re still a cool kid.

01

Realize that without transformations some amount of the backing store’s structure abstractions will leak through in the query response.

GraphQL generally improves performance over REST by reducing the number of calls but be aware of the cost of your GraphQL calls.

Beware the deletes and renames in the schema 01

Think through security and personalization. Do you need it? Where is it applied?

01

Don’t force it. If you have a data retrieval or mutation that doesn’t fit… USE REST. You’re still a cool kid.

01

Realize that without transformations some amount of the backing store’s structure abstractions will leak through in the query response.

GraphQL generally improves performance over REST by reducing the number of calls but be aware of the cost of your GraphQL calls.

Remember not all GraphQL enabled systems are equal. Some are offer more control, better performance and better plugability than others.

Beware the deletes and renames in the schema 01

Headless Only CMS is great for simple use cases like fixed content in a mobile application. “Strings in a app”

01

Gatsby is a great option for simple, small, developer centric sites that don’t mind a CI/CD process as part of workflow

01

Headless Only CMS is great for simple use cases like fixed content in a mobile application. “Strings in a app”

01

Gatsby is a great option for simple, small, developer centric sites that don’t mind a CI/CD process as part of workflow

01

Once authors are in play on a day to day basis you need a headless+ authoring experience

01

Headless Only CMS is great for simple use cases like fixed content in a mobile application. “Strings in a app”

01

Gatsby is a great option for simple, small, developer centric sites that don’t mind a CI/CD process as part of workflow

01

Once authors are in play on a day to day basis you need a headless+ authoring experience

01

You need to think about DevContentOps. How will production content flow back from production to lower environments? How will code flow forward from lower environments up to production

Headless Only CMS is great for simple use cases like fixed content in a mobile application. “Strings in a app”

01

Gatsby is a great option for simple, small, developer centric sites that don’t mind a CI/CD process as part of workflow

01

Once authors are in play on a day to day basis you need a headless+ authoring experience

01

You need to think about DevContentOps. How will production content flow back from production to lower environments? How will code flow forward from lower environments up to production

Your Source Code management and version history is modern an integrated with your CI/CD. Is your content repository?

Headless Only CMS is great for simple use cases like fixed content in a mobile application. “Strings in a app”

01

Gatsby is a great option for simple, small, developer centric sites that don’t mind a CI/CD process as part of workflow

01

Once authors are in play on a day to day basis you need a headless+ authoring experience

01

You need to think about DevContentOps. How will production content flow back from production to lower environments? How will code flow forward from lower environments up to production

Your Source Code management and version history is modern an integrated with your CI/CD. Is your content repository?

Look for a CMS that can scale in a serverless and stateless fashion but that can still do dynamic content.

Headless Only CMS is great for simple use cases like fixed content in a mobile application. “Strings in a app”

01

Git-based repository for full DevContentOps support

Git-based repository for full DevContentOps support

Native high-performance GraphQL and REST Support

Git-based repository for full DevContentOps support

Native high-performance GraphQL and REST Support

Headless+ Incontext authoring support

Git-based repository for full DevContentOps support

Native high-performance GraphQL and REST Support

Headless+ Incontext authoring support

Serverless & Statemess Content Delivery

Questions

craftersoftware.com | craftercms.org

Slides Cut Due to Time

128

Customer Experience Leaders are Winning

Who is Using React Show of Hands

Based on 20 Year-old Architecture Common Challenges for Marketing

Legacy CMS Solutions

Content freezes

due to DevOps

Legacy CMS Solutions

Design restrictions

Development is

difficult, slow,

expensive

Content freezes

due to DevOps

Based on 20 Year-old Architecture Common Challenges for Marketing

Legacy CMS Solutions

Design restrictions

Development is

difficult, slow,

expensive

Content freezes

due to DevOps

Global authoring is

a problem.

Versioning is weak

Auditing is weak

Based on 20 Year-old Architecture Common Challenges for Marketing

Legacy CMS Solutions

Design restrictions

Development is

difficult, slow,

expensive

Content freezes

due to DevOps

Global authoring is

a problem.

Versioning is weak

Auditing is weak

Based on 20 Year-old Architecture Common Challenges for Marketing

Redesigns are

difficult because

we have to migrate

or double publish

Legacy CMS Solutions

Not designed for

multi-channel

Based on 20 Year-old Architecture Common Challenges for DevOps

Legacy CMS Solutions

Restrictive

development

frameworks

Not Designed for

multi-channel

Based on 20 Year-old Architecture Common Challenges for DevOps

Legacy CMS Solutions

Restrictive

development

frameworks

Not designed for

multi-channel

Don’t fit in to

modern

development

process

Based on 20 Year-old Architecture Common Challenges for DevOps

Legacy CMS Solutions

Are difficult to

scale, distribute

and operate

Based on 20 Year-old Architecture Common Challenges for DevOps

Restrictive

development

frameworks

Not designed for

multi-channel

Don’t fit in to

modern

development

process

Where SEO is not a concern. GO FOR IT. 01

Where SEO is a concern. Accept the server

01

SPAs are a lot of effort to create. Are you getting the leverage? Make sure your getting the leverage — If not, use simple markup.

Manage the builds scripts as content 01

If authors want a high degree of control to assemble the application with drag and drop plan extra time to think this through end to end

Your routing, data retrieval and state management for websites is non-trivial. Take time to think it through

Dynamic Routing

Late Binding Templates and Components