1
How to build your first app with
Contentful’s new App Framework
1
Slide 2
Slide 2 text
Speakers
2
Rouven Wessling
Director of Technology Partnerships EMEA,
Contentful
David Fateh
Software Engineer, Extensibility,
Contentful
Slide 3
Slide 3 text
Housekeeping
● This webinar is being recorded; we will share the recording and slide
deck with all registrants
● Please leave your questions in the Q&A box, we’ll answer them after the
presentation
before we begin...
Slide 4
Slide 4 text
4
1. The App Framework
2. Apps vs UI extensions
3. App Marketplace
4. Let’s build an app (Demo)
5. Resources
6. Q&A
Agenda
4
Slide 5
Slide 5 text
5
The App Framework
5
Slide 6
Slide 6 text
Our visions: stacks beat suites
6
Innovative companies will assemble their DXP, with a content platform at the center
DX Suite DX Stack
vs.
Monolithic
Marketing
Suite
Slide 7
Slide 7 text
app_definitions
ORG
app_installations
Management views
ORG
Forma 36
APP
FRAMEWORK
UI Extensions
SDK
Dialog & Page
Locations
7
The App Framework are the tools to build apps
Field & Sidebar
Locations
Slide 8
Slide 8 text
8
External
Service
CLIENT
APP
DEVELOPER
EDITOR
Apps enhance the content creation experience
Slide 9
Slide 9 text
Apps enhance the content creation experience
9
Slide 10
Slide 10 text
10
Apps can extend different parts
of the web app
10
Slide 11
Slide 11 text
11
1. Entry field – Replace field of an
entry
Four locations an app can be rendered
Entry field
Slide 12
Slide 12 text
12
1. Entry field – Replace field of an
entry
2. Entry sidebar – Replace the
sidebar (parts or all) of an entry
Four locations an app can be rendered
Entry
sidebar
Slide 13
Slide 13 text
13
1. Entry field – Replace field of an
entry
2. Entry sidebar – Replace the
sidebar (parts or all) of an entry
3. Entry editor – Replace all fields of
an entry
Four locations an app can be rendered
Entry editor
Slide 14
Slide 14 text
14
1. Entry field – Replace field of an
entry
2. Entry sidebar – Replace the
sidebar (parts or all) of an entry
3. Entry editor – Replace all fields of
an entry
4. Dialog – Float over the web app
and can be opened from other
locations
Four locations an app can be rendered
Dialog
Slide 15
Slide 15 text
15
Apps can render their own
configuration and installation screen
Bonus location: App configuration screen
Slide 16
Slide 16 text
16
Apps vs UI extensions
16
Slide 17
Slide 17 text
UI extensions are bespoke
to a specific project
17
Slide 18
Slide 18 text
18
ORGANIZATION
Space
App definition
App installation
Apps are defined in an organization...
Slide 19
Slide 19 text
19
… and can be installed into many spaces
ORGANIZATION
Space
App definition B
App installation A
App installation B1
Space
App installation B2
Slide 20
Slide 20 text
20
Environment awareness
20
Slide 21
Slide 21 text
21
ORGANIZATION
Space Environment
App definition B
App installation A
App installation B1
Try out apps in different environments
Space Environment
App installation B2
Slide 22
Slide 22 text
22
Apps can control their own
installation experience
22
Slide 23
Slide 23 text
No more install from GitHub
23
Slide 24
Slide 24 text
Seamlessly install apps into spaces
Both Marketplace apps and your organization’s private apps are available
24
Slide 25
Slide 25 text
25
Apps Marketplace
contentful.com/marketplace
25
Slide 26
Slide 26 text
Assemble a DX platform with content at the core
Content
Platform
Commerce
Marketing
Translation
Collaboration
Analytics
Optimization &
Personalization
Developer &
Editor
Productivity
Digital Asset
Management
Deployment &
Delivery
Artificial
Intelligence
PUBLIC Public apps
26
Slide 27
Slide 27 text
The Contentful Marketplace
Available on contentful.com/marketplace
27
Slide 28
Slide 28 text
Brandfolder
AI Image Tagging
Jira
Google Analytics
Smartling
commercetools
Shopify
Netlify
Optimizely
Gatsby Cloud
Cloudinary
Bynder
Dropbox
Frontify
Image Focal Point
Commerce Layer
17 apps available today
28
Typeform
Slide 29
Slide 29 text
Some of these might look familiar
29
Slide 30
Slide 30 text
Everything is completely revamped
30
Slide 31
Slide 31 text
Available on GitHub
Contributions welcome!
31
All current apps are open source
Slide 32
Slide 32 text
32
What if I use a different tool?
32
Slide 33
Slide 33 text
33
Let’s build an app!
33
Slide 34
Slide 34 text
Steps for app development
34
1. Use create-contentful-extension
2. Create an App Definition
3. Create a Config screen
4. Create a Field Entry widget
5. Create a dialog/modal for selection
Slide 35
Slide 35 text
35
Demo
35
Slide 36
Slide 36 text
36
Let’s recap
36
Slide 37
Slide 37 text
Building an app
37
1. Used create-contentful-extension
2. Created an App Definition
3. Created a Config screen
4. Created a Field Entry widget
5. Created a dialog/modal for selection
Slide 38
Slide 38 text
38
Wrap-up
38
Slide 39
Slide 39 text
The Marketplace is invitation only
39
If you want an invite let me know or
fill out the Publish an app form.
You can reach me at
rouven@contentful.com
Slide 40
Slide 40 text
Resources
● App Framework Overview
● Build your first app
● Converting an UI extension to
an app
Development
● App Marketplace
● Publishing an App
● Open source apps on GitHub
Marketplace
40
Slide 41
Slide 41 text
41
Q&A
41
Slide 42
Slide 42 text
42
If we didn’t get to your question -
reach out
team@contentfulmail.com
42