Content Management - The story of headless CMS
3 likes917 views
The document discusses the concept of headless CMS (Content Management Systems) and their advantages over traditional, coupled CMS setups. It highlights how headless CMS allows for a decoupled architecture where content management and rendering can operate independently, providing developers with flexibility and efficiency. The document also emphasizes the benefits of adopting a headless approach, such as improved performance, customization, and user experience across multiple channels.
![by Yves Do & Derrick Meha๏ฌy - Meetup Zenika - December 12th 2018
The story of [headless] CMS
and why tomorrowโs content management will be headless
๐
๐](https://image.slidesharecdn.com/headlesscmspresentation-190129135322/85/Content-Management-The-story-of-headless-CMS-1-320.jpg)
Content Management - The story of headless CMS
- 1. by Yves Do & Derrick Meha๏ฌy - Meetup Zenika - December 12th 2018 The story of [headless] CMS and why tomorrowโs content management will be headless ๐ ๐
- 4. tecktonic
- 7. headless CMS vs responsive web design
- 8. What is the challenge ?
- 9. Are headless CMS an answer to technological needs ?
- 11. ๐คฏ ๐ ๐จ ๐ฉ ๐คจ ๐ค ๐ ๐ฌ technical exper6se old 6mes now audience building
- 12. Audience.
- 13. How does a CMS help me ?
- 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-๏ฌrst 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-๏ฌrst 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-๏ฌrst Approach 6meline ๐Content produc6on SoXware development ๐ฅ
- 58. Your dev team is happy.
- 60. Your creativity is unleashed.
- 62. Your users are thrilled.
- 63. ๐ฅ Website Time to ๏ฌrst 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 Meha๏ฌy @derrickmeha๏ฌy 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
- 74. ๐๐ฅ Back-end ready faster for Front-End Developers Bene๏ฌts 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