CMS used to be the one ring to rule them all. Everything used to be integrated with the CMS, and the CMS used to be the one system in control of the others. Rise of the Content Mesh turns all this up and around. All of a sudden CMS is just one service among others. Today it is the CMS that should integrate with the others. And the only thing besides this that matters is, how well does the CMS do its core job for managing your content. In this talk we present how Plone CMS fits into GatbyJS Content Mesh ecosystem, how the Plone GatsbyJS source plugin works, why we implemented WebSocket support into Plone to make the plugin even better, and what does Plone really shine with GatsbyJS.

1. How Plone Excels in GatsbyJS Content Mesh
Plone Conference 2019
Asko Soukka
23.10.2019
+

2. datakurre
Asko Soukka
Background
• Python developer since 2002
• Plone developer since 2004
• Full-time professional since 2008
• GSOC mentor since 2013
• GatsbyJS user since 2018
1

3. University of Jyväskylä, Central Finland
2

4. Demo

5. GatsbyJS

6. datakurre
Open Source
GatsbyJS – the framework
• React based website and app generator
• GraphQL based CMS agnostic mashup framework
• Server-side rendered static deployment
• MIT-licensed open source plugin ecosystem
3

7. datakurre
Business
GatsbyJS – the company
• Open source hobby turned into VC backed startup
• Copyrights owner, maintainer and evangelist
• Free tooling, documentation and webinars
• Paid cloud services with premium features
4

8. datakurre
Advantages
Good
• ”Blazingly-fast websites”
• Beginner friendly documentation
• Seamless developer experience
• Commitment on accessibility
• React ecosystem compatible
5

9. datakurre
Shortcomings
Bad
• No incremental builds
• Varying plugin quality
• GatbyJS GitHub monorepo
Ugly
• ”Overly-complicated framework and pipeline”
• ”Vendor lock-in for just updating static HTML”
6

10. datakurre
Not for Everyone
React is
okay
○
Content is
public
○
Use case is
read-only
○
7

11. Content Mesh

12. CMS in Disruption
8

13. CMS in Disruption
CMS
CMS
CMS
9

14. CMS in Disruption
CMS
CMS
9

15. CMS in Disruption
CMS
10

16. Content Mesh
CMS
CMS
CMS
11

17. Ecosystem

18. datakurre
Plugin Categories
SOURCE TRANSFORMER THEME
images scales gallery
12

19. datakurre
Plugin Categories
SOURCE TRANSFORMER THEME
images scales gallery
12

20. datakurre
Plugin Categories
SOURCE TRANSFORMER THEME
images scales gallery
12

21. datakurre
Plugin Categories
SOURCE TRANSFORMER THEME
images scales gallery
12

22. datakurre
Plugin Categories
SOURCE TRANSFORMER THEME
images scales gallery
12

23. datakurre
Plugin Categories
SOURCE TRANSFORMER THEME
images scales gallery
12

24. All plugins are equal
categories are not enforced
12

25. Themes

26. datakurre
Gatsby Themes
Experiment on maintainable boilerplate
• Packages with pre-configured components
• Configuration possible with plugin options
• Overridable or extendable by shadowing
JBOA ??? PROFIT
13

27. datakurre
Gatsby Themes
Experiment on maintainable boilerplate
• Packages with pre-configured components
• Configuration possible with plugin options
• Overridable or extendable by shadowing
JBOA ??? PROFIT
13

28. datakurre
Gatsby Themes
Experiment on maintainable boilerplate
• Packages with pre-configured components
• Configuration possible with plugin options
• Overridable or extendable by shadowing
JBOA ??? PROFIT
13

29. datakurre
Gatsby Themes
Experiment on maintainable boilerplate
• Packages with pre-configured components
• Configuration possible with plugin options
• Overridable or extendable by shadowing
JBOA ??? PROFIT
13

30. datakurre
Example ”theme” gatsby-theme-coverflow
datakurre.github.io/gatsby-theme-coverflow
14

31. datakurre
Example ”theme” configuration
{
resolve: "gatsby-theme-coverflow",
options: {
path: "gatsby-blog",
query: `{ allCoverPages: allFeedGatsbyBlog {
edges {
node {
title
link
}
}
} }`
}
}
15

32. Plone

33. datakurre
Out of the Box
Enablers
• Hierarcical content management
• Customizable content types
• Flexible publication workflows
• Effective and expiration dates
• High quality extensible REST API
16

34. datakurre
Excellences
Curated use-cases
• Standalone spin-off web sites
• CMS part of GatsbyJS web apps
• Content configuration management
17

35. datakurre
Excellences
Curated use-cases
• Standalone spin-off web sites
• CMS part of GatsbyJS web apps
• Content configuration management
Seen challenges
• WYSIWYG → WYSIWYM
• Release management
17

36. datakurre
Status of gatsby-source-plone
Done
• Incremental Plone content sourcing
• Selectable site root with baseURL option
• Support for rich text, images and files
• Rich text to React w/ Gatsby links and images
• GraphQL queries by _path or by hierarchy
• Websocket-ready for instant develop updates
18

37. datakurre
Future of gatsby-source-plone
To do
• Support custom rich text, image and file fields
Issue: Only fields text, image and file are supported
• Path prefixing or namespacing support
for multiple plugin instances
Issue: Instances may override each others’ nodes
19

38. Get Started

39. datakurre
Get Started with gatsby-source-plone 1/3
Create a new project
$ npx gatsby new my-gatsby-project
$ cd my-gatsby-project
$ yarn add git+https://github.com/collective/gatsby-source-plone
Add a Plone source in ./gatsby-config.js with
plugins: [
{ resolve: 'gatsby-source-plone',
options: {
baseUrl: 'https://plonedemo.kitconcept.com/en',
},
},
20

40. datakurre
Get Started with gatsby-source-plone 2/3
Start GatsbyJS development server
$ yarn gatsby develop
Open browser at http://localhost:8000/___graphql
21

41. datakurre
Get Started with gatsby-source-plone 3/3
Learn GatsbyJS
• gatsbyjs.org/tutorial
• collective.github.io/gatsby-source-plone
Ask for help
• github.com/collective/gatsby-source-plone/issues
22

42. datakurre
More of gatsby-source-plone
Web site examples
• github.com/collective/gatsby-source-plone
• github.com/collective/gatsby-starter-plone
Landing page example
• github.com/datakurre/gatsby-starter-plone-brochure
Content configuration example
• github.com/datakurre/gatsby-theme-ds-player
23

43. datakurre.github.io/ploneconf2019
23