Slide 1

Slide 1 text

When a CMS is not enough Tales from a content infrastructure @stefanjudis

Slide 2

Slide 2 text

Stefan Judis Frontend Developer, Occasional Teacher, Meetup Organizer ❤ Open Source, Performance and Accessibility ❤ @stefanjudis

Slide 3

Slide 3 text

Content management like it used to be

Slide 4

Slide 4 text

We are so slow!

Slide 5

Slide 5 text

Everything's broken!

Slide 6

Slide 6 text

We want to have a site!

Slide 7

Slide 7 text

We want to have a site and an app!

Slide 8

Slide 8 text

We want to have a site and two apps!

Slide 9

Slide 9 text

We want to have two sites and two apps!

Slide 10

Slide 10 text

We want our content to be everywhere!

Slide 11

Slide 11 text

That's not what most of the systems are built for

Slide 12

Slide 12 text

COMMON CMS PROBLEMS PAGE-CENTRIC MODEL MONOLYTHIC SOLUTION SLOW ITERATIONS

Slide 13

Slide 13 text

COMMON CMS PROBLEMS PAGE-CENTRIC MODEL MONOLYTHIC SOLUTION SLOW ITERATIONS You can build your own solution, but...

Slide 14

Slide 14 text

I don't want to do that!

Slide 15

Slide 15 text

I don't want to do that! I don't have time for that!

Slide 16

Slide 16 text

Building businesses has become software.

Slide 17

Slide 17 text

Building brands has become software.

Slide 18

Slide 18 text

Building revenue has become software.

Slide 19

Slide 19 text

Building market share has become software.

Slide 20

Slide 20 text

Being successful means building great software.

Slide 21

Slide 21 text

You don't want to waste time!

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

App development today 50% use 2-5 APIs 9% use 25+ APIs Global Development Survey Vol. 1 © 2017 Evans Data

Slide 24

Slide 24 text

THERE'S AN API FOR EVERYTHING

Slide 25

Slide 25 text

Communication And the list goes on and on... Specialized Services Payment Search

Slide 26

Slide 26 text

Platform as a Service (PaaS) Specialized Services on top of PaaS and IaaS Infrastructure as a Service (IaaS)

Slide 27

Slide 27 text

Should we rethink the approach to content management, too?

Slide 28

Slide 28 text

And not reinvent the wheel all the time...

Slide 29

Slide 29 text

... to ship products with great content instead!

Slide 30

Slide 30 text

Platform as a Service (PaaS) Specialized Services on top of PaaS and IaaS Infrastructure as a Service (IaaS)

Slide 31

Slide 31 text

Platform as a Service (PaaS) Specialized Services on top of PaaS and IaaS Infrastructure as a Service (IaaS)

Slide 32

Slide 32 text

Sascha Konietzke Contentful Content Infrastructure is architected to deliver content to any channel or digital product, and allows frequent adjustments and iteration, by fitting into modern agile development practices.

Slide 33

Slide 33 text

CROSS-PLATFORM DELIVERY CHANGING REQUIREMENTS MODERN STACK
 DEVELOPMENT CONTENT INFRASTRUCTURE

Slide 34

Slide 34 text

PLATFORM PORTABILITY

Slide 35

Slide 35 text

The world speaks JSON

Slide 36

Slide 36 text

A JSON API { "sys": { "contentType": { "sys": { "id": "page" } } }, "fields": { "title": "Page", "body"; "This is an article about ..." } }

Slide 37

Slide 37 text

A JSON API

Slide 38

Slide 38 text

SCALABLE {} {} {} {} {} {} {} {} {} {} {} {} {} {} {}

Slide 39

Slide 39 text

SCALABLE {} {} {} {} {} {} {} {} {} {} {} {} {} {} {} CONTENT DELIVERED BY FAST CDNs

Slide 40

Slide 40 text

API at Scale !== Content at Scale

Slide 41

Slide 41 text

CONTENT AT SCALE STRUCTURED CONTENT SPEEDY DEVELOPMENT GOOD EDITING EXPERIENCE

Slide 42

Slide 42 text

STRUCTURED CONTENT GET JSON

Slide 43

Slide 43 text

STRUCTURED CONTENT GET JSON ? ? ? GET JSON

Slide 44

Slide 44 text

STRUCTURED CONTENT GET JSON ? ? ? GET JSON Break down your content into reusable components!

Slide 45

Slide 45 text

STRUCTURED CONTENT GET JSON ? ? ? GET JSON

Slide 46

Slide 46 text

STRUCTURED CONTENT GET JSON GET JSON

Slide 47

Slide 47 text

STRUCTURED CONTENT GET JSON GET JSON Content has to become a structured graph

Slide 48

Slide 48 text

Title Title Artist Artist Name Image Sigh no more Babel Mumford & Sons Mumford & Sons Mumford & Sons

Slide 49

Slide 49 text

Title Title Artist Artist Name Image Sigh no more Babel Mumford & Sons & Me Mumford & Sons & Me Mumford & Sons & Me

Slide 50

Slide 50 text

Title Title Artist Artist Name Image Sigh no more Babel Mumford & Sons & Me Mumford & Sons & Me Mumford & Sons & Me

Slide 51

Slide 51 text

Title Title Artist Artist Name Image Sigh no more Babel Mumford & Sons & Me Mumford & Sons & Me Mumford & Sons & Me

Slide 52

Slide 52 text

Title Title Artist Artist Name Image Sigh no more Babel Mumford & Sons & Me Mumford & Sons & Me Mumford & Sons & Me Every node of the graph has to be accessible (together & separate)

Slide 53

Slide 53 text

Content modelling is an art!

Slide 54

Slide 54 text

HOW TO EDIT THE CONTENT?

Slide 55

Slide 55 text

Name Image Mumford & Sons Description Mumford & Sons are a British band formed in 2007. The band consists of Marcus Mumford (lead vocals, electric guitar, acoustic guitar, drums), Ben Lovett (vocals, keyboard, piano, synthesizer), Winston Marshall (vocals, electric guitar, banjo) and Ted Dwane (vocals, bass guitar, double bass).

Slide 56

Slide 56 text

WYSIWYG

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

Content vs. Look DON'T BREAK SEPARATION OF CONCERNS

Slide 60

Slide 60 text

Html

Slide 61

Slide 61 text

Html

Slide 62

Slide 62 text

Html Whenever you put HTML in your content you're breaking portability!

Slide 63

Slide 63 text

DISADVANTAGES OF WYSIWYG Too flexible 01 Mixes content and looks 02 03 Too easy to mess up 04 HTML is the goal

Slide 64

Slide 64 text

You want to limit the user!

Slide 65

Slide 65 text

Markdown

Slide 66

Slide 66 text

# Heading ## Sub-heading Text attributes _italic_, **bold**, `monospace`. Bullet list: * apples * oranges * pears A [link](http://example.com). ![Image](duck.png) Heading Sub-heading Text attributes italic, bold, monospace. Bullet list: - apple - oranges - pears A link.

Slide 67

Slide 67 text

Inline HTML is supported. Inline HTML is supported.

Slide 68

Slide 68 text

# Heading And a paragraph... ![Image](duck.png)

Slide 69

Slide 69 text

# Heading And a paragraph... ![Image](duck.png) And a paragraph... ![Image](duck.png) And a paragraph...

Slide 70

Slide 70 text

# Heading And a paragraph... ??? And a paragraph... ![Image](duck.png) And a paragraph...

Slide 71

Slide 71 text

# Heading And a paragraph... ??? And a paragraph... ??? And a paragraph...

Slide 72

Slide 72 text

# Heading And a paragraph... ??? ??? And a paragraph... ??? And a paragraph...

Slide 73

Slide 73 text

# Heading And a paragraph... ??? ??? And a paragraph... ??? ??? !!! ??? Tooltip!

Slide 74

Slide 74 text

ADVANTAGES OF MARKDOWN Limited functionality 01 Focuses on semantics 02 03 Easy to grasp

Slide 75

Slide 75 text

DISADVANTAGES OF MARKDOWN Limited functionality 01 Not powerful enough 02 03 Editors don't like it 04 HTML is "allowed"

Slide 76

Slide 76 text

THE BIGGEST PROBLEM A [link](http://example.com).

Slide 77

Slide 77 text

THE BIGGEST PROBLEM Name Mumford & Sons Name Marcus Mumford Slug marcus-mumford Description Mumford & Sons are a British band formed in 2007. The band consists of Marcus Mumford (lead vocals, electric guitar, acoustic guitar, drums), Ben Lovett (vocals, keyboard, piano, synthesizer), Winston Marshall (vocals, electric guitar, banjo) and Ted Dwane (vocals, bass guitar, double bass). [Markus Mumford](http://.../artist/marcus-mumford)

Slide 78

Slide 78 text

THE BIGGEST PROBLEM Name Mumford & Sons Name Marcus Mumford Slug marcus-mumford-jr Description Mumford & Sons are a British band formed in 2007. The band consists of Marcus Mumford (lead vocals, electric guitar, acoustic guitar, drums), Ben Lovett (vocals, keyboard, piano, synthesizer), Winston Marshall (vocals, electric guitar, banjo) and Ted Dwane (vocals, bass guitar, double bass). [Markus Mumford](https://.../artist/marcus-mumford-jr) ?

Slide 79

Slide 79 text

THE BIGGEST PROBLEM Name Mumford & Sons Name Marcus Mumford Slug marcus-mumford-jr Description Mumford & Sons are a British band formed in 2007. The band consists of Marcus Mumford (lead vocals, electric guitar, acoustic guitar, drums), Ben Lovett (vocals, keyboard, piano, synthesizer), Winston Marshall (vocals, electric guitar, banjo) and Ted Dwane (vocals, bass guitar, double bass). [Markus Mumford](https://.../artist/marcus-mumford-jr) ? References are not possible in Markdown!

Slide 80

Slide 80 text

RICH TEXT

Slide 81

Slide 81 text

Rich text JSON Name Mumford & Sons Description Mumford & Sons are a British band formed in 2007. The band consists of Marcus Mumford (lead vocals, electric guitar, acoustic guitar, drums), Ben Lovett (vocals, keyboard, piano, synthesizer), Winston Marshall (vocals, electric guitar, banjo) and Ted Dwane (vocals, bass guitar, double bass). { "data": {}, "content": [ ], "nodeType": "document" }

Slide 82

Slide 82 text

Rich text JSON Name Mumford & Sons Description Mumford & Sons are a British band formed in 2007. The band consists of Marcus Mumford (lead vocals, electric guitar, acoustic guitar, drums), Ben Lovett (vocals, keyboard, piano, synthesizer), Winston Marshall (vocals, electric guitar, banjo) and Ted Dwane (vocals, bass guitar, double bass). { "data": {}, "content": [ { "data": {}, "content": [ ], "nodeType": "paragraph" } ], "nodeType": "document" }

Slide 83

Slide 83 text

Rich text JSON Name Mumford & Sons Description Mumford & Sons are a British band formed in 2007. The band consists of Marcus Mumford (lead vocals, electric guitar, acoustic guitar, drums), Ben Lovett (vocals, keyboard, piano, synthesizer), Winston Marshall (vocals, electric guitar, banjo) and Ted Dwane (vocals, bass guitar, double bass). { "data": {}, "content": [ { "data": {}, "content": [ { "data": {}, "marks": [], "value": "Mumford & Sons ...", "nodeType": "text" } ], "nodeType": "paragraph" } ], "nodeType": "document" }

Slide 84

Slide 84 text

Rich text JSON const COMPONENT_RENDER_MAP = { paragraph: item =>

{item.content.map(item => renderItem(item))}

, "heading-1": item =>

{item.content.map(item => renderItem(item))}

, "heading-2": item =>

{item.content.map(item => renderItem(item))}

, // ... }; export const renderItem = item => { return COMPONENT_RENDER_MAP[item.nodeType](item); };

Slide 85

Slide 85 text

Rich text JSON

Slide 86

Slide 86 text

A different editing experience

Slide 87

Slide 87 text

It's pure structured content A different editing experience

Slide 88

Slide 88 text

Name Image Mumford & Sons Name Image Mumford & Sons & Me JSON ???

Slide 89

Slide 89 text

You have to provide an editorial preview mechanism!

Slide 90

Slide 90 text

Required APIs Content Delivery API Content Preview API staging production

Slide 91

Slide 91 text

Name Image Mumford & Sons Name Image Mumford & Sons & Me JSON ???

Slide 92

Slide 92 text

Name Image Mumford & Sons Name Image Mumford & Sons & Me JSON JSON DELIVERY API PREVIEW API

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

YOUR EDITORS HAVE TO BE HAPPY (AND SAFE)

Slide 95

Slide 95 text

But how to get started?

Slide 96

Slide 96 text

START SMALL. ITERATE!

Slide 97

Slide 97 text

No content

Slide 98

Slide 98 text

Name Date Contentful Certification Workshop Description Get your Contentful Certification. Join our one-day event, packed with workshops, practice sessions, and only a few, short presentations. October 29th, 2018 City Berlin Country Germany

Slide 99

Slide 99 text

Name Date Contentful Certification Workshop Description Get your Contentful Certification. Join our one-day event, packed with workshops, practice sessions, and only a few, short presentations. October 29th, 2018 City Berlin Country Germany Setting up your content infrastructure will take you two minutes!

Slide 100

Slide 100 text

Name Date Contentful Certification Workshop ... Name Date JAMstack Conf ... Name Mumford & Sons Name Slug Blog page blog Name Date How to do Contentful? ... Name Date O'reilly Software architecture October 29th Name Lucy Rose

Slide 101

Slide 101 text

Name Date Contentful Certification Workshop ... Name Date JAMstack Conf ... Name Mumford & Sons Name Slug Blog page blog Name Date How to do Contentful? ... Name Date O'reilly Software architecture October 29th Name Lucy Rose At some point it will be time to refactor

Slide 102

Slide 102 text

NOBODY(!) GETS CONTENT MODELLING RIGHT THE FIRST TIME...

Slide 103

Slide 103 text

Traditional CMS flow

Slide 104

Slide 104 text

Traditional CMS flow How do you do this with an API?

Slide 105

Slide 105 text

Content infrastructure flow MIGRATION SCRIPTS SANDBOX ENVIRONMENTS

Slide 106

Slide 106 text

Content infrastructure flow

Slide 107

Slide 107 text

CREATE MULTIPLE VERSIONS OF YOUR CONTENT CHANGE/TEST THEM IN ISOLATION

Slide 108

Slide 108 text

cdn.contentful.com/spaces/{space_id}/entries const contentful = require('contentful'); const client = contentful.createClient({ space: '', accessToken: '' }); client.getEntries();

Slide 109

Slide 109 text

cdn.contentful.com/spaces/{space_id}/environments/{environment_id}/entries const contentful = require('contentful'); const client = contentful.createClient({ space: '', environment: '', accessToken: '' }); client.getEntries();

Slide 110

Slide 110 text

COPIED Content types Entries Assets Locales UI-extensions Saved views SHARED Users & space memberships Roles & permissions API keys Web hooks

Slide 111

Slide 111 text

Required APIs Content Delivery API Content Preview API staging production Content Management API automation

Slide 112

Slide 112 text

No content

Slide 113

Slide 113 text

Make it as easy as possible

Slide 114

Slide 114 text

github.com/contentful/contentful-migration

Slide 115

Slide 115 text

MIGRATION CLI CONTENT TYPE OPERATIONS Create a content type 01 02 03 04 05 Delete a content type Edit a content type Create/edit/delete fields Change a field ID

Slide 116

Slide 116 text

Add new field module.exports = function (migration) { const tilPost = migration.editContentType('tilPost') }

Slide 117

Slide 117 text

Add new field module.exports = function (migration) { const tilPost = migration.editContentType('tilPost') tilPost.createField( 'tags', { name: 'Tags', type: 'Array', items: { type: 'Symbol' } } ); }

Slide 118

Slide 118 text

No content

Slide 119

Slide 119 text

Transform an entry in place 01 02 Derive an entry from another MIGRATION CLI CONTENT TRANSFORMATIONS

Slide 120

Slide 120 text

No content

Slide 121

Slide 121 text

No content

Slide 122

Slide 122 text

DERIVE ENTRIES AND LINK Name Fronttrends 2017 City Warsaw Country Poland Name Fronttrends 2018 City Warsaw Country Poland

Slide 123

Slide 123 text

DERIVE ENTRIES AND LINK Name Fronttrends 2017 City Warsaw Country Poland Name Fronttrends 2018 City Warsaw Country Poland Name Fronttrends City Warsaw Country Poland

Slide 124

Slide 124 text

DERIVE ENTRIES AND LINK Name Fronttrends 2017 Conference Name Fronttrends 2018 Conference Name Fronttrends City Warsaw Country Poland Fronttrends Fronttrends

Slide 125

Slide 125 text

module.exports = function (migration) { const conference = migration.createContentType('conference') .name('Conference/Meetup') .displayField('name') conference.createField('name').type('Symbol').required(true).name('Conference/Meetup name') conference.createField('country').type('Symbol').required(true).name('Country Code') conference.createField('city').type('Symbol').required(true).name('City') const event = migration.editContentType('event') event.createField('conference') .name('Conference') .type('Link') .linkType('Entry') .validations([ { "linkContentType": ['conference'] } ]) migration.deriveLinkedEntries({ contentType: 'event', from: ['name', 'country', 'city'], toReferenceField: 'conference', derivedContentType: 'conference', derivedFields: ['name', 'country', 'city'], identityKey: async (from) => { return from.name['en-US'] // remove year .replace(/\s(\d{2,4}|#\d+)/g, '') // clear spaces .replace(/\s/g, '-') // clear "weird characters" .replace(/(,|\/|\\|:|\.|\(|\))/g, '') .toLowerCase() }, deriveEntryForLocale: async (inputFields, locale) => { return { name: inputFields.name[locale].replace(/\s(\d{2,4}|#\d+)/g, ''), country: inputFields.country[locale] || 'N/A', city: inputFields.city[locale] || 'N/A' } } }) event.moveField('conference').afterField('name') event.deleteField('country') event.deleteField('city') } LOC 48 REQUESTS 382 ENTRIES CREATED 88 ENTRIES UPDATED 96

Slide 126

Slide 126 text

MIGRATION CLI ADVANTAGES Repeatable 01 02 03 04 Can be kept in VC Includes sanity checks Perfect for CI

Slide 127

Slide 127 text

CMS as Code (automation like a boss)

Slide 128

Slide 128 text

FEATURE SANDBOXES

Slide 129

Slide 129 text

FEATURE SANDBOXES ENVIRONMENT SANDBOXES

Slide 130

Slide 130 text

ENVIRONMENT SANDBOXES FEATURE SANDBOXES CI SANDBOXES

Slide 131

Slide 131 text

Deluan Quintao ThoughtWorks We ran 500 migrations this year. Our content structure is tightly coupled to the code changes we make.

Slide 132

Slide 132 text

No content

Slide 133

Slide 133 text

www.contentful.com/blog/2018/09/13/content-model-changes-scale-telus-cms-as-code/

Slide 134

Slide 134 text

Automate everything

Slide 135

Slide 135 text

No content

Slide 136

Slide 136 text

Required APIs Content Delivery API Content Preview API staging production Content Management API automation Images API assets

Slide 137

Slide 137 text

https: //images.ctfassets.net/ .../public-transport.jpg 3.2MB

Slide 138

Slide 138 text

https: //images.ctfassets.net/ .../public-transport.png?w=800 60KB

Slide 139

Slide 139 text

https: //images.ctfassets.net/ .../public-transport.png?w=800&fm=webp 30KB

Slide 140

Slide 140 text

https: //images.ctfassets.net/ .../public-transport.png?w=800&fm=jpg&q=10 17KB

Slide 141

Slide 141 text

https: //images.ctfassets.net/ .../public-transport.png?w=800&h=200&fit=crop

Slide 142

Slide 142 text

Use the right tools for the job

Slide 143

Slide 143 text

... and connect the all the dots

Slide 144

Slide 144 text

Phil Hawksworth Netlify Webhooks are the API of the web

Slide 145

Slide 145 text

Platform as a Service (PaaS) Specialized Services on top of PaaS and IaaS Infrastructure as a Service (IaaS)

Slide 146

Slide 146 text

POST Headers: content-type: application/json Body: { sys: { ...}, fields: { ...} } ⛔

Slide 147

Slide 147 text

POST Headers: content-type: application/json X-Algolia-Application-Id: xxx X-Algolia-API-key: xxx Body: { sys: { ...}, fields: { ...} } ✅

Slide 148

Slide 148 text

POST Headers: content-type: application/json X-Algolia-Application-Id: xxx X-Algolia-API-key: xxx Body: { sys: { ...}, fields: { ...} }

Slide 149

Slide 149 text

POST Headers: content-type: application/json X-Algolia-Application-Id: xxx X-Algolia-API-key: xxx Body: { sys: { ...}, fields: { ...} } contentType.sys.id === 'post'

Slide 150

Slide 150 text

POST ✅ Headers: content-type: application/json X-Algolia-Application-Id: xxx X-Algolia-API-key Body: { title: 'hello world', content: ' ...' } contentType.sys.id === 'post' + custom payload

Slide 151

Slide 151 text

POST ✅ Headers: content-type: application/json X-Algolia-Application-Id: xxx X-Algolia-API-key Body: { title: 'hello world', content: ' ...' } contentType.sys.id === 'post' + custom payload

Slide 152

Slide 152 text

...

Slide 153

Slide 153 text

ADJUSTABLE SCALABLE WEBHOOKS FLEXIBLE TRANSPARENT

Slide 154

Slide 154 text

Integrate other services

Slide 155

Slide 155 text

...

Slide 156

Slide 156 text

... ...

Slide 157

Slide 157 text

UI Extensions

Slide 158

Slide 158 text

UI Extensions window.contentfulExtension.init(function ({ entry, field, window, parameters }) { // connect to other APIs // add your own logic and appearance // ... });

Slide 159

Slide 159 text

UI Extensions

Slide 160

Slide 160 text

BE FRIENDS WITH OTHER VENDORS!

Slide 161

Slide 161 text

No content

Slide 162

Slide 162 text

A rich ecosystem is indispensable

Slide 163

Slide 163 text

Technology is not the only factor to success

Slide 164

Slide 164 text

Talent decides about failure and success

Slide 165

Slide 165 text

Henrik Joreteg You're shaping tomorrow's job market based on the technology choices you make today.

Slide 166

Slide 166 text

The industry has a pipeline problem...

Slide 167

Slide 167 text

167 1,6 % 3,4 % 5,5 % 6,5 % 7,4 % 10 % 14 % 16 % 17 % 18 % HOW DO DEVELOPERS ASSESS POTENTIAL JOBS? insights.stackoverflow.com/survey/2018/#technology-and-society 1 1. Compensation and Benefits 2 2. Language, Frameworks and Technology 3 3. Professional Development

Slide 168

Slide 168 text

168 1,6 % 3,4 % 5,5 % 6,5 % 7,4 % 10 % 14 % 16 % 17 % 18 % HOW DO DEVELOPERS ASSESS POTENTIAL JOBS? insights.stackoverflow.com/survey/2018/#technology-and-society 1 1. Compensation and Benefits 2 2. Language, Frameworks and Technology 3 3. Professional Development

Slide 169

Slide 169 text

169 1,6 % 3,4 % 5,5 % 6,5 % 7,4 % 10 % 14 % 16 % 17 % 18 % HOW DO DEVELOPERS ASSESS POTENTIAL JOBS? insights.stackoverflow.com/survey/2018/#technology-and-society 1 1. Compensation and Benefits 2 2. Language, Frameworks and Technology 3 3. Professional Development Your CMS is part of that decision!

Slide 170

Slide 170 text

DEVELOPERS LOVE NEW TOOLS!

Slide 171

Slide 171 text

No content

Slide 172

Slide 172 text

“ Backend Engineer: Hmm. So you’re saying this “GraphQL” will allow any web or native engineer to arbitrarily query basically any field in any backend service, recursively, however they want, without any backend engineers involved? Frontend Engineer: Yeah, right? It’s amazing! […silence…] medium.com/airbnb-engineering/reconciling-graphql-and-thrift-at-airbnb-a97e8d290712

Slide 173

Slide 173 text

No content

Slide 174

Slide 174 text

One request per resource

Slide 175

Slide 175 text

No content

Slide 176

Slide 176 text

POST query { course (id: "1toEOumnkEksWakieoeC6M") { fields { title slug skillLevel } } ... } { "data": { "course": { "fields": { "title": "Hello Contentful", "slug": "hello-contentful", "skillLevel": "beginner" } } ... } }

Slide 177

Slide 177 text

POST query { course (id: "1toEOumnkEksWakieoeC6M") { fields { title slug skillLevel } } ... } { "data": { "course": { "fields": { "title": "Hello Contentful", "slug": "hello-contentful", "skillLevel": "beginner" } } ... } } One request for everything

Slide 178

Slide 178 text

No content

Slide 179

Slide 179 text

github.com/prisma/graphql-playground

Slide 180

Slide 180 text

Who uses GraphQL?

Slide 181

Slide 181 text

GraphQL will change the way we work completely.

Slide 182

Slide 182 text

"Modern Stack Website" (I'm biased)

Slide 183

Slide 183 text

More and more logic went into the client

Slide 184

Slide 184 text

SSG Build tool content & templates CSS & JavaScript

Slide 185

Slide 185 text

SSG Build tool content & templates CSS & JavaScript

Slide 186

Slide 186 text

SSG Build tool content & templates CSS & JavaScript Constant context switch

Slide 187

Slide 187 text

SSG Build tool content & templates CSS & JavaScript

Slide 188

Slide 188 text

SSG Build tool content & templates CSS & JavaScript

Slide 189

Slide 189 text

SSG Build tool content & templates CSS & JavaScript API data has to be written to disk

Slide 190

Slide 190 text

SSG Build tool content & templates CSS & JavaScript

Slide 191

Slide 191 text

No content

Slide 192

Slide 192 text

Universal JavaScript Apps (completely JS driven)

Slide 193

Slide 193 text

Rich ecosystem Unified code base Cutting edge technologies Developer tooling Static HTML MODERN STACK WEBSITE

Slide 194

Slide 194 text

Modern Stack Website

Slide 195

Slide 195 text

Frontend technology today is built to consume APIs. Modern Stack Website

Slide 196

Slide 196 text

Modern Stack Website

Slide 197

Slide 197 text

Modern Stack Website

Slide 198

Slide 198 text

Modern Stack Website

Slide 199

Slide 199 text

Modern Stack Website Scalable, flexible and cheap!

Slide 200

Slide 200 text

My advice to content management:

Slide 201

Slide 201 text

Content has to be consumable!

Slide 202

Slide 202 text

Content has to be flexible!

Slide 203

Slide 203 text

Content has to be ready for iterations!

Slide 204

Slide 204 text

Let's not reinvent the wheel all the time...

Slide 205

Slide 205 text

...let's ship great products with great content!

Slide 206

Slide 206 text

Thanks. @stefanjudis Slides ctfl.io/when-a-cms-is-not-enough