 Hello. How are you guys? Having a good time? Wonderful. Okay, cool. So let's start with headless CMS showdown. We do a lot of live demoing today. Four different CMSs, headless CMSs and we compare it. Strop, sanity, contentful and Drupal. Before I start, I actually want to know who's using Drupal. Okay. Who's using Stroppy? Oh, two, three. Hands. That's nice. Four hands. Who's using sanity? Two. Well, we are at the Drupal con, that's for sure. Contentful. Couple. So you will learn some new things. So agenda today. So we'll do a brief introduction of what headless is actually all about and then CMS overview and a live demo, how we build content models in all these solutions. And then we will do a conclusion, basically. And also, and that's the goal of the presentation, what can we actually learn from these new systems? Strappy, for example, is pretty new. They got an investment of about, I don't know, $50 million last year or this year. So they are growing rapidly and we wanted to know why they are becoming popular and what we can learn as a Drupal community. So let's quickly introduce us. So hello. I am Natalia. I am from Spain, from Barcelona. And I left Spain 10 years ago. And since five years, I am living in Switzerland. And I work at Netnode as front-end developer. Yeah, I'm Lucas. I'm the founder of Netnode, digital agency in Switzerland. We are doing Drupal projects in since about two years, mostly decoupled solutions. And, yeah, we built Node Hive up a headless CMS solution on top of Drupal. And we will also demo that as part of how Drupal can be used as a headless solution. It's fully open source. Node Hive core is the project page on Drupal.org. So let's start with the introduction. First of all, we want to give a bit of content of what is headless and what is a headless CMS. So a headless CMS is a content management system that separates the presentation layer, where the content is served from the backend, where the content is managed. So the content is managed in one place at the backend. And you can deliver this content via an API. So there is no default front-end. So do this reason. It's very flexible and you have a lot of options. So it's front and independent. After this short overview of what is a headless content management system, we ask ourselves if, as a Drupal agency, because we are in our daily business working with Drupal, if Drupal is still relevant in a headless CMS world. So for this reason, we wanted to see which are the new options at the market to explore a bit that and to test it and see where Drupal is and what will bring the future to us. And we are at the point that we want to see how are others doing and what we can learn from them as a Drupal community, how we can improve Drupal, because there is other solutions they are solid to, and we want to see what they are doing and what we can take from them. So that is the reason why we will show you today how others are doing and maybe there is new options that we will discover that we could take that with us. So these are our fighters of today. First of all, we have Strapi, Sanity, then Contentful and of course Drupal, so they will take part of our headless CMS showdown. For this presentation, for the showdown, we have a use case to test the different options that all the content management systems offer. So we will build the presence for the green ball, it's a restaurant chain and we have like three entities, a restaurant entity with different kind of fields, then we have an employee entity that will be referenced by the restaurants and then we have a page entity to have a home page, a single page for the different restaurant chains. So we will show this project with every content management system. So let's start. Like our first fighter is Strapi. Strapi is a headless CMS, it can be self-host, it's built with Node.js and the API type or they offer REST API and GraphQL, it's extensible, there is a lot of plugins and you can extend it with custom controllers. The authentication is already built in, but you can customize it too. And the content modeling is very flexible and there is an active community and there is enterprise support too. And they offer free and paid plans. So now I will change to the demo. So first of all, if you want to start a project with Strapi, you can create the project and you can run NPM, run develop and then you will have a running application. They deliver the admin panel, so that's what I will show you now. If we switch there, then when you start the project, you have to log in and that's our dashboard page. So if we switch to the content manager, maybe that's the most important part for the editors because it's where they can edit the content. We have here different kind of collection types. I will show you first a bit the content of one restaurant. In this case, we have here the green ball of Lille. So we can see here the different fields, the detail, an opening hour field, it's a JSON kind field. We can reference here the team of this restaurant and then we can save our content very easily. We can hear that's very similar to Drupal because you can hear the model or configure the view mode of the edit page of an entity. So I will show you now how it looks an employee. It's like we have the three fields and you have the same options like in the restaurant. So now we will switch to the content type builder and then we will add a new field to the restaurant so we will see how it works and how it's the user interface for a side builder. So I am now at the restaurant entity and I will add a new email field. So you see I have here a model. There is a lot of field types and if I select the email field, I can add the content there. In this case, I don't want to require the field but you have different options there and I can save it and here there is a small reload of the page and after that we already have our email. So if I switch to the content to the restaurant, I have here my new field and I can like fill it and use it to expose it to the front end. So maybe interesting too, we have here like a media library, very flexible, you can edit the images and then the plugins. There is a marketplace they have 159 plugins and you can like copy the command or check the page of the plugin and add it to your project. So normally you have to follow the requirements of every model like in Drupal sometimes and here we have the settings where you can configure all the roles for the users, for the API that's very important because you can here for example for the public API, I can like say I want all the public users to find the content and find one content, one restaurant in this case but they can't create or delete content so you have to configure everything to expose the API to the front end. So that's like the simple or the power of Strapi without extensions and without customizations. And now I will show you the API, that's the API of Strapi, it's interesting that they don't deliver the fields that you are referencing so in this case you always have to add this parameter here to populate all the content but you can see here that I have the green bold link with the whole information that we saw at the content editing overview. So then we are here already ready to use it for our front end. So that's the overview of Strapi so we will switch to our presentation and that's what we like it and with the things that we found challenges with so we like it that Strapi has a modern front end, the user interface is nice, is simple, easy to use, the flexible data modeling is very interesting too so I showed the different kind of the collection types but they offer single types to components, they are like paragraphs, you can reuse them so it's very flexible. They already have built-in API end points that's always nice that it's everything already there, you don't have to do extra things or configure settings and they have a nice plug-in ecosystem and it's growing at the time and it sells host and open source and that's always a nice thing to have. And we found challenges with performance overhead so sometimes there is heavy overload time so that's not very nice. They offer by default SQL live database so for certain kind of projects maybe it's too simple so you have to customize everything, if you customize something then you are going out of the Strapi context so you have to carry with the consequences and Strapi is a younger ecosystem so that's a thing that it's a challenge for the moment so it's growing and there is a lack of enterprise features so that's the overview of Strapi, we think that it's ideal for projects that require a highly customizable self-hosted solution and that they want flexibility with API options and of course it's open source so that's beautiful. Perfect so then we will switch to our next fighter, it's Sanity. Sanity, it's a headless MS, it can't be self-hosted so it's cloud based, it's built with JavaScript React, they offer GraphQL but they have more options so you can extend it, they offer plugins and custom entity widgets and they have authentication, it's built in and you can extend it with three party services and they offer a flexible content modeling and there is an active community official super too and they offer free and paid plans so we will switch to Sanity, here I have like my Sanity application and then you can start it with NPM Randev and then you have your running application, it's interesting because they offer like two products, they have Sanity Lake or Sanity Lake, it's where your database is based so you can host it by yourself so here we have the whole information of the database of our project and then we have Sanity Studio and that's the dashboard for the editors and for the users that want to use our self-content with Sanity. So that's our backend, it's very simple, I have to say I extended the backend with the media plugin to see how media works but by default you don't have that so we can see here the restaurant entity like in Strapi so we have again the green bowl lill with the different fields and you can for example reference something and publish it, yeah it's very nice that you have already here all the revisions so you can switch back, you can see when was everything done so it's a nice overview of the workflow and now I will show you an employee so we have here employee entity with the different fields and maybe what's interesting here is that you can hear, you don't have a content modeling overview, you can add new fields at the Sanity studio so it's a content management system, more focus for developers because you have to extend everything by yourself so I will show you how to extend the different entities, I will switch there to Peace Code, I don't know if you can see it, not very good so okay, okay maybe I can switch to another color theme better, okay perfect so we can see here the restaurant entity and to create new entities you have to define a new schema, they are documents and here I have the components, they are like the paragraphs that you can reuse so I will show you the restaurant entity, we have here the details so they offer different type fields but you can extend it by yourself so you can create your own file types for example in this case I was not able to use a JSON field so I created an object with the different opening hours but I can like create an opening field type to reuse it for other entities so it's very simple the schema and I have here you can add validations in this case there is no email field but I have a validation to check that the content that you are adding is an email so I will uncomment that and we will see there is a reload tool and now if I go to the restaurant entity we can see there that I have the email field so I can add the information and publish it so the overview is very simple and we have here the media so we have here the different assets that I extended that with the plug-in so it's not by default but you can it's very easy to extend you have to extend your code to allow to have the different plug-ins and now I will show you the API because they offer they have a known query language and they offer this overview the name is vision so you can test here your queries in this case I will expose everything and we can see the output of our content so I am exposing everything we see here for example an employee or I have maybe there like other information like the restaurants so that's an important point to know that you have to learn this query language of sanity to use it so I will show you perfect that's the overview of sanity and maybe I can show you to the page type because I haven't showed that for the for a strappy here is like it's the same but I wanted to show that you can create the slack fields and you can generate the slack so that's nice to that you already have that and you can reference the content so I will switch to the presentation and that's what we like it and what yeah we we the things we found challenge with so we like it that there is real time collaboration I was unable to show you that but that's a very nice feature maybe you can check it later but you can edit the content at the same time so that's very nice it's highly customized so you can customize the whole back end and they offer portable text so when you use a rich editor all the content that you are adding to the rich editor it's a structured data so that's very nice for developers and then we have a strong query language that you can use with a strappy that allows you to filter a lot and to you have a lot of options it's it's very nice to have it and it's well documented and we found challenges with the lack of no code features so if you are not a developer maybe it will be difficult to start with sanity at the pricing model to because they have they offer a free plan but if the project scales it can be expensive and the other thing is that they offer content like that you depend on third party services so you can host sanity and that's not always nice because maybe there is clients clients that doesn't want that and it's like a private private enterprise and if they don't want to offer that anymore then you will have a problem there and we think that the query language is a challenge too because if you don't know the language then you have to learn it only for sanity. So we think that it's well sweet for dynamic projects where collaboration is a key and where you need to create content structures in an efficient way. So that's the short overview of sanity and now we will switch to contentful. Yeah let's talk about contentful. Contentful is a headless CMS obviously. It's not possible to self-host so it's only available as a source and API type is you can access the content through REST and GraphQL. Extensibility is quite limited so you have to build apps so it's not how we are used to as Drupal developers and yeah content modeling is also very active and yeah there is also a pricing in place about contentful. So I will also do a short demo. So when I log in to Contentful this is the dashboard and then I see at the top three tabs so I first open up content. I get a list, an overview of all contents I created for example the restaurant entity and so this is the editor. I can link other content so I can select existing content for example if I want to link a gallery I can do that and then I can publish it immediately. Let's go back. What's a bit strange as a Drupal developer? They combine everything so whether it's an entity or let's say a paragraph for example a gallery for them is just yet another entity basically. That's it. Then there is the content modeling. That's actually very powerful so let's go and extend the restaurant entity. So it's very nice, very clean visual. I can add a new field. Let's add a new text field and then you also have several types here. You can add additional settings like validation settings also the appearance and then you can simply create it and then save it and then it's available in the content section. So yeah that's the core functionality. Then obviously they also have a media library here. You can add assets very quickly, single assets, multiple assets and then there is also apps. I said before it's a little bit weird how they make let's say your custom functionality available through apps so it's not very flexible. You actually have to self host your own apps and use API calls to go back and forth so you cannot really access the code APIs if you want to say like that. What's interesting about Contentful they offer compose and launch. So basically compose is an additional let's say view on top of the headless content if you want to say like that. Compose is intended to be for content editors so it's even cleaner and simpler. So here you only have stuff that actually appears for example on a website which with a slot and can be accessed. So here again I have for example the restaurant entity and I can start creating that and it's really only made for editors. What's also powerful they have a feature called launch. Launch is intended to create kind of releases of content. So if you want to update your website and you change like say 100 pages and then you want to release them at one point you can organize this with releases. So content staging is one key feature of Contentful and also very powerful. So that's this. And then I want to show you the API as well. So the API is actually very simple. They offer a content delivery API. It's similar to JSON API in Drupal. So you also have to include stuff and this is more or less the output. So yeah you get the data out of it and then you can parse it in your prompt and then work with it. So let's go to the presentation. So we liked what we like about Contentful these content environments. That's actually one of the core features. So staging content is one of the key features Contentful offers. It's ass-based so it's really very simple. You go on Contentful, you log in with your Google credentials, you start your space or environment and then you can start building your content models and you can start building your frontends. So the content delivery is very powerful and they also offer a GraphQL API plugin. So you have options there. And also the media handling is very powerful and makes it really stand out. Obviously Contentful is not open source. So it's not an option where you can self-host it. And as I said before, custom code is only possible through apps and this is not really practical. So that's Contentful. Now I want to show you Drupal with our extension, the Node Hive Core extension. I mean, I don't have to explain what Drupal is and I will directly go into the presentation. So this is how we build decoupled or headless sites, admin interfaces based on Drupal. And actually when I log in, after logging in, I arrive at the dashboard and what I see here is I see the Node Hive Spaces, we call it, a space you can imagine like a website basically. So when I go there, I have an overview of what's available in that space and if you want to create a new restaurant, so let's say we open up a new restaurant, I can do that and create my node. You see I can link it here with the specific space. So I go back to the space. Then what we focus on, Drupal out of the box, offer the menu and we completely switch that. So we completely replace it and we also rename the terms of Drupal, for example, content, we call now data and then you have access for example to all your media or all spaces or all taxonomies, whatever. So we really copy what we learned before from Strapi or Contentful. And then you also have data models, so if you want to create a new content type, you simply go there and you can add your content type, right? Yeah, that's it. And then about Chasen API, I mean this is really simple in Drupal, you know, you can access slash Chasen API and then you have access to all the end points and basically use it. Out of the box it's without any authentication. There are many options to do that. So that's it from that point of view. So in general, what we like about Drupal obviously is it's highly flexible content architecture. Just one example, in Drupal we know the Chio field. In Contentful they also offer something like Chio field but Strapi as we said it's still young, they don't offer something like a Chio field. Drupal offers Chasen API out of the box in core and have many options in contributed like GraphQL and others. Lots of modules, so Drupal is really scalable because of its long history, even in a headless context. What is challenging, obviously it's the UI, it's not a single page application, it feels a little bit slow. And also what we found challenging is that Chasen API documentation is not very well done. So when you, let's say, new to Drupal and you want to use it as a headless CMS, it's actually very hard to understand how Chasen API works with all the includes and sub requests so we can definitely do a better job there. So let's come to a conclusion or maybe an overview of comparison and learnings. I mean who's the winner? I don't know, I mean, of course Drupal, yeah. I mean when selecting a headless CMS, obviously I have to consider different things, the project scale, complexity of your content models, also technical expertise, not everybody has a Drupal developer in-house. And also how important are features like real time collaboration, media handling and self-hosting also. So each solution offers a blend of these capabilities and you have to decide on your own. We are from Switzerland so we have to say it very neutral. But what can we learn and maybe also copy from Strapi, Sanity and Contentful? Well, definitely it's the UI. Drupal lacks of a fast and modern UI, even if you use Chin. Strapi as well as Sanity, they offer single-page application feeling, also patry laws are very fluid, also the concept of auto-saving, for example in Contentful, you click on the title of the entity, you are not going to the node view, what we call, they directly go to the edit and then it's auto-saving. So when I change the title, it's immediately saved. So I go back and forth. So that's nice. It's also the simplicity out of the box. So the admin menu in Drupal Core is, to be honest, a mess and we can do that much better. And also, I mean, in a headless context, the backend can be much, much simpler because you don't have to configure all the whatever functionality you want to offer in a solution, in a Drupal site, for example. I said that already, headless documentation is obviously much stronger with Contentful and the other headless solutions. Drupal really lacks that or I haven't seen it, maybe it exists, but it's really not good. And also, something like an API explorer would be nice. So JSON API in Drupal is powerful, but how do I actually load paragraphs and media items within a paragraph? So this is not very self-explanatory, so we can do that much, much better. And we are actually working on an auto documentation feature within Node-Hive, so you can click on API docs and it will auto generate the API request for you. Also, starting a project in Drupal, we think it's still hard. So when you are used to, let's say, the NPM world, it's much easier. You simply start the project, NPM run dev, and then you're off and go. And also standard features are relatively clunky in Drupal, like working with revisions. It's not intuitive, but we saw the different solutions before. They have a very nice interface. It's easy to switch between revisions. We can do that better. Also, image handling in Drupal, like cropping features or even image editors. There are solutions out there, but it's a little bit clunky. It's not like, oh, wow, that's nice, and let's use it. Also, duplicating content in Drupal, it's doable. But it's not, you know, it's not like smooth. And also, the slash, admin slash content view in Drupal out of the box, we can do much better. I specifically like how Contentful is doing with this search box at the top, and you can filter and search very quickly. And if you have a large site with a lot of content, it's very easy to find and start editing your content. So lots of stuff to learn from these systems. One word about visual editing. I mean, when you go into the headless world, what you actually lose is the frontend, right? Because you build your frontend yourself. And Stropi as well as Sanity and also Contentful, they partner, for example, with Wurcel. Wurcel is a frontend hosting service, and they start to integrate these headless CMSs, and they offer very nice editing features, even if you have like a structured headless CMS in the back. So that's very, very powerful. Basically, the idea is you click on an element, and then you have similar to maybe Gutenberg and other editors. You can directly edit your content on the fly. This means additional integration on your frontend application, and also how it's connected to your backhand. It's not easy to do, but this will evolve over time. So I expect that, let's say, if you build a new site and client says, oh, we want to host it on Wurcel, do you offer Wurcel CMS integration? Can we do that with Drupal? I think we should think about that as well. How we do it with Drupal and specifically No Tive is actually when you, that's an example, so we show an iframe in the Drupal interface, and then you can click on, this is a paragraph, but it can be any entity inside Drupal. You click on it, and then in the sidebar, you get the form, the Drupal form, and then you can save it, and the frontend will immediately update. So that's very powerful. I also have a video on node-app.com, which you can see how that works and how easy it is. So conclusion, Drupal is a very strong option in the CMS world, and especially it's scalable beyond simple content models. So let's think about web forms, web form functionality we couldn't find in Stropi and others, and there are many modules in Drupal that are well-established, offers headless APIs, and there are all these newer, younger CMS systems not there yet, right? So Drupal is there far ahead. But JS-based solutions are coming strong, and we should really have a look how they evolve and what we can learn from them. Yeah, that's it. We have to show this slide, come to the end, and then we have to look at the contribution, then sprints, and with that set, we are finished with our presentation. Are there any questions? Thank you. I think there is a, ah, there is a mic in the center, sorry. Yeah. The presentation was very, it was really good. I was wondering if you had had an opportunity to look at the Next-Drupal project that's out there. Yeah, we use it. That's cool. Thank you very much. Yeah, you should check out the Next-JS-Drupal integration, wonderful solution. Thank you, Chapter 3 and Shazian. Hello, FGM from Ozynet. In the event as a session announcement, you mentioned that directors, but you didn't talk about it. Can you tell us something about directors? So you're specifically asking about permission and how that's happened. Oh, yeah, actually we have, yeah, during the presentation, we have to include contentful instead of directors. Sorry about that. Yeah, sorry. We couldn't change the session description. I'm sorry. Friends, I would just like to know if it's possible to get those slides somehow. Sure. Yeah, yeah, we can publish it somewhere. Okay. Maybe through the app, but I don't know exactly how that works, but of course, we can do that. Hi, I'm Luca from Smartfabrik. Did you try multilingual features of those other CMS? How does it integrate? Actually, no. I mean, we never built a real project with contentful and the other options we show. So we cannot really say about multilingual features. But as I know, all of them offer multilingual features. But as I also know, multilingual is not easy. So it would be very interesting to see how they handle, you know, is it always in sync or is it not in sync to translation? How would they handle that? But all the options offer multilingual support out of the box actually. We have a question. What is the best way stack from your experience to build the front with Rupal as API? So what we did that, you'll know, was to build the applications with Next.js so we used the Next Rupal extension that Chapter 3 mentioned. And it's a very nice document of well done. With Next 13, we switched to an on solution because I think there is like this new server components that it's not yet available with Next Rupal. So that's the best way to start with, I think, to test the extension to use it in all cases with Next.js and to use JSON API, I think it's a very nice solution. So thank you very much.