Description of the trends, web history and why headless CMS are rising in popularity and are the future of content management.

1. by Yves Do & Derrick Mehaffy - Meetup Zenika - December 12th 2018
The story of [headless] CMS
and why tomorrow’s content management will be headless
👔
👖

3. Ephemeral or
fundamental trend ?

4. tecktonic

6. tecktonic headless CMS

7. headless CMS vs responsive web design

8. What is the challenge ?

9. Are headless CMS an answer to
technological needs ?

10. 🤯
😎
😨
😩
🤨
🤔
😃
😬
technical exper6se
old 6mes now

11. 🤯
😎
😨
😩
🤨
🤔
😃
😬
technical exper6se
old 6mes now
audience building

12. Audience.

13. How does a CMS help me ?

16. 🖥
Website
Admin Interface
Images
Text
Roles
Template
HTML
CSS
Javascript
CMS

17. 🖥
Website
Admin Interface
Images
Text
Roles
Template
HTML
CSS
Javascript
CMS
Responsive
Data Markup
Load Op6miza6on
…

18. 🖥
Website
Admin Interface
Images
Text
Roles
Template
HTML
CSS
Javascript
CMS
Responsive
Data Markup
Load Op6miza6on
…
Shop
Products
Shopping Cart
Wishlist
Customers

19. 🖥
Website
Admin Interface
Images
Text
Roles
Template
HTML
CSS
Javascript
CMS
Responsive
Data Markup
Load Op6miza6on
…
Shop
Products
Shopping Cart
Wishlist
Customers
Service
Feature A
Feature B
Feature C

20. 🖥
Website
Admin Interface
Images
Text
Roles
Template
HTML
CSS
Javascript
CMS
Responsive
Data Markup
Load Op6miza6on
…
Shop
Products
Shopping Cart
Wishlist
Customers
Service
Feature A
Feature B
Feature C
🖥New
front-end

21. 🖥
Website
Admin Interface
Images
Text
Roles
Template
HTML
CSS
Javascript
CMS
Responsive
Data Markup
Load Op6miza6on
…
Shop
Products
Shopping Cart
Wishlist
Customers
Service
Feature A
Feature B
Feature C
🖥New
front-end
🖥Another
front-end

22. 🖥
Website
Admin Interface
Images
Text
Roles
Template
HTML
CSS
Javascript
CMS
Responsive
Data Markup
Load Op6miza6on
…
Shop
Products
Shopping Cart
Wishlist
Customers
Service
Feature A
Feature B
Feature C
🖥New
front-end
🖥Another
front-end
CRM

23. 🖥
Website
Admin Interface
Images
Text
Roles
Template
HTML
CSS
Javascript
CMS
Responsive
Data Markup
Load Op6miza6on
…
Shop
Products
Shopping Cart
Wishlist
Customers
Service
Feature A
Feature B
Feature C
🖥New
front-end
🖥Another
front-end
CRMDelivery Tier

24. 🖥
Website
Admin Interface
Images
Text
Roles
Template
HTML
CSS
Javascript
CMS
Responsive
Data Markup
Load Op6miza6on
…
Shop
Products
Shopping Cart
Wishlist
Customers
Service
Feature A
Feature B
Feature C
🖥New
front-end
🖥Another
front-end
CRMDelivery Tier
App

25. 🖥
Website
Admin Interface
Images
Text
Roles
Template
HTML
CSS
Javascript
CMS
Responsive
Data Markup
Load Op6miza6on
…
Shop
Products
Shopping Cart
Wishlist
Customers
Service
Feature A
Feature B
Feature C
🖥New
front-end
🖥Another
front-end
CRMDelivery Tier
App
📱App

26. 🖥
Website
Admin Interface
Images
Text
Roles
Template
HTML
CSS
Javascript
CMS
Responsive
Data Markup
Load Op6miza6on
…
Shop
Products
Shopping Cart
Wishlist
Customers
Service
Feature A
Feature B
Feature C
🖥New
front-end
🖥Another
front-end
CRMDelivery Tier
App
📱App
⌚Watch

27. 🖥
Website
Admin Interface
Images
Text
Roles
Template
HTML
CSS
Javascript
CMS
Responsive
Data Markup
Load Op6miza6on
…
Shop
Products
Shopping Cart
Wishlist
Customers
Service
Feature A
Feature B
Feature C
🖥Reseller
website
🖥
Intranet
CRMDelivery Tier
App
📱App
⌚Watch
😱

28. 🤯
😎
😨
😩
🤨
🤔
😃
😬
technical exper6se
old 6mes now
audience building

29. Going headless

30. 🖥
Website
Admin Interface
Images
Text
Roles
CMS
Template
HTML
CSS
Javascript
Responsive
Data Markup
Load Op6miza6on
…
Shop
Products
Shopping Cart
Wishlist
Customers
Service
Feature A
Feature B
Feature C

31. Step I
Decouple frontend and backend

32. 🖥
Website
Admin Interface
Images
Text
Roles
CMS
Template
HTML
CSS
Javascript
Responsive
Data Markup
Load Op6miza6on
…
Shop
Products
Shopping Cart
Wishlist
Customers
Service
Feature A
Feature B
Feature C

33. 🖥
Website
Admin Interface
Images
Text
Roles
CMS
Template
HTML
CSS
Javascript
Responsive
Data Markup
Load Op6miza6on
…
Shop
Products
Shopping Cart
Wishlist
Customers
Service
Feature A
Feature B
Feature C

34. Step II
Control the connections

35. 🖥
Website
Admin Interface
Images
Text
Roles
CMS
Template
HTML
CSS
Javascript
Responsive
Data Markup
Load Op6miza6on
…
Shop
Products
Shopping Cart
Wishlist
Customers
Service
Feature A
Feature B
Feature C

36. 🖥
Website
Admin Interface
Images
Text
Roles
CMS
Template
HTML
CSS
Javascript
Responsive
Data Markup
Load Op6miza6on
…
Shop
Products
Shopping Cart
Wishlist
Customers
Service
Feature A
Feature B
Feature C

37. 🖥
Website
Admin Interface
Images
Text
Roles
CMS
Template
HTML
CSS
Javascript
Responsive
Data Markup
Load Op6miza6on
…
Shop
Products
Shopping Cart
Wishlist
Customers
Service
Feature A
Feature B
Feature C

38. 🖥
Website
Admin Interface
Images
Text
Roles
CMS
Template
HTML
CSS
Javascript
Responsive
Data Markup
Load Op6miza6on
…
Shop
Products
Shopping Cart
Wishlist
Customers
Service
Feature A
Feature B
Feature C

39. Step III
Create the API

40. 🖥
Website
Admin Interface
Images
Text
Roles
CMS
Template
HTML
CSS
Javascript
Responsive
Data Markup
Load Op6miza6on
…
Shop
Products
Shopping Cart
Wishlist
Customers
Service
Feature A
Feature B
Feature C

41. 🖥
Website
Admin Interface
Images
Text
Roles
CMS
Template
HTML
CSS
Javascript
Responsive
Data Markup
Load Op6miza6on
…
Shop
Products
Shopping Cart
Wishlist
Customers
Service
Feature A
Feature B
Feature C
🔌API

42. 🖥
Website
Admin Interface
Images
Text
Roles
CMS
Template
HTML
CSS
Javascript
Responsive
Data Markup
Load Op6miza6on
…
Shop
Products
Shopping Cart
Wishlist
Customers
Service
Feature A
Feature B
Feature C
🔌API

43. 🖥
Website
Admin Interface
Images
Text
Roles
CMS
Shop
Products
Shopping Cart
Wishlist
Customers
Service
Feature A
Feature B
Feature C
🔌API

44. 🖥
CMS
Shop $$$
Tradi6onal CMSHeadless CMS
🔌
🖥
CMSShop $$$

45. 🖥
CMS
Shop $$$
Add a new service
Tradi6onal CMSHeadless CMS
🔌
🖥
CMSShop $$$

46. 🖥
CMS
Shop $$$
CRM
Add a new service
Tradi6onal CMSHeadless CMS
🔌
🖥
CMSShop $$$

47. 🖥
CMS
Shop $$$
CRM
CRM
Add a new service
Tradi6onal CMSHeadless CMS
🔌
🖥
CMSShop $$$

48. 🖥
CMS
Shop $$$
CRM
CRM
Add a new channel
Tradi6onal CMSHeadless CMS
🔌
🖥
CMSShop $$$
📱

49. 🖥
CMS
Shop $$$
CRM
CRM
Add a new channel
Tradi6onal CMSHeadless CMS
🔌
🖥
CMSShop $$$
📱 📱

50. tl;dr:
What is a headless CMS ?

51. API-first or headless CMS let users manage content through a web UI.
Headless CMS allow developers to decouple content management from content rendering, as
opposite to monolithic coupled CMS (content is stored in a backend database AND rendered in
frontend templates using HTML/CSS).
Unlike a tradi6onal CMS, an API-first CMS exposes its content data via a consumable API.
Headless CMS are not concerned about how you choose to display content.
It pushes raw content (e.g. JSON or XML) for you to fetch and display anywhere.
tl;dr:

52. Why is it cool ?

53. What will you gain by going
headless ?

54. It’s cleaner.

55. Clean
CMS implementa6on
BeWer architecture Tailor-made to suit
your needs

56. You save time and money.

57. Classic 6meline
📝Content produc6on
SoXware development
🖥
Content-first Approach 6meline
📝Content produc6on
SoXware development
🖥

58. Your dev team is happy.

59. Front-end agnos6c

60. Your creativity is unleashed.

61. 📝
🔌
🖥⌚📱
omnichannel ready

62. Your users are thrilled.

63. 🖥
Website
Time to first byte (Yb)
html
images, icons, assets
0s 1s 2s 3s
CSS
Javascript
4s 5s
😃

64. 🤯
😎
😨
😩
🤨
🤔
😃
😬
technical exper6se
old 6mes now
audience building

65. How to do it with Strapi ?

67. ⚡
Open Source &
SELF HOSTED
100%
JAVASCRIPT
🔓 🎨
EnSrely
CUSTOMIZABLE
High
PERFORMANCES
🙌
Super
EASY

68. Customizable ❌ ✅
Open Source, to keep control
Cloud based Open Source
Extensible ❌ ✅
Data Ownership ❌ ✅

69. GitHubStars
0
2 500
5 000
7 500
10 000
2015-10 2016-01 2016-04 2016-07 2016-10 2017-01 2017-04 2017-07 2017-10 2018-01 2018-04 2018-07 2018-10
9 000+stars on GitHub
Metrics

70. 🎅🎁 10,000

71. Case study
Derrick Mehaffy
@derrickmehaffy
9 Phoenix
Arizona
Head of Development Group
at Canonn Science & Research
Data Center OperaSons Technician
at QTS Data Centers
600+issues and PR commented on the
Strapi GitHub repository

72. Canonn is a community of about 6,000 players of the Elite Dangerous video game
that focus on researching and cataloging in game mysteries.
hbps://canonn.science

73. hbps://ruins.canonn.tech

74. 😃🖥
Back-end ready faster for
Front-End Developers
Benefits from Strapi
Save countless
Man hours
💰
Projects delivered
Faster to the users

76. Contact
Yves DO
User Research & Communica6on
yves@strapi.io
+33(0) 6 64 12 20 19