 All right, so thank you for coming to the very last session of this podcast. Well, this session is about the next years for Drupal, and we'll be talking about what is this and why next, why Drupal. So, yeah, let's see. Well, my name is Ronald Aguilar. I am a Drupal React Developer working for Chapter 3. I'm from Costa Rica and making the website since the 2000s. Coffee and Drupal over. I am working with Drupal for more than 10 years right now. You can pay me like, Rwagi said. Rwagi CR. Okay. This is my first international session. All right. So, let's talk about what's happening on Drupal frontend introducing next Drupal, communist cases, and cool features. Okay. Drupal frontend. Is it good enough? It's a very good question nowadays, right? When the web is evolving a lot and basically we are expecting a really great, you know, ecosystem growing and growing in the JavaScript side. So, it's a very good question right now for us as Drupal community. So, some time ago we did in the frontend PHP template team functions, hooks, CSS, JavaScript, BigQuery. Some years ago we are doing team functions, hooks, CSS, yes, and BigQuery. Right. So, basically we changed from PHP to Twig and it's pretty cool. Yeah, it was a great evolution, but we are still doing basically the same. So, yeah, we are using better tools. We are using, you know, basically the community is working hard in improving the things, improving the experience but we need to start, you know, thinking about what is the future. So, are we going to something better or are we going to do it to the same? The future for me right now is no jQuery. Right. So, basically we are putting jQuery on Drupal. Yeah, fine. It's fine. It's cool, but I think it's not enough. Right. So, everything is funny until you start seeing people living Drupal for looking for, you know, better developer experiences, better frontend tools, not getting outdated in the frontend side. Basically, that's very sad because we are losing all the opportunities for having real good people doing real good things in the Drupal core and the Drupal project. Right. So, learning. Honest and painful opinions. Okay. This is the stack-overflow developer survey for this year. So, popular programming and scripting. This is not a secret. We know we are all PHP people, but PHP is not very popular in older developers. And it's fine, but you know, let's see JavaScript. JavaScript is very popular right now. It's continuously growing and growing. So, we are talking about the first two are Node.js and React. Yeah, it's still there. Okay. That's fine. But let's see Drupal. We are basically in the bottom. There are other options. We are not the last two ones, but we are, you know, basically very low. This is for popularity, right. So, love versus write. Scripting and programming languages. Okay. JavaScript. You know, basically there are JavaScript haters as well. So, it's fine, but let's see PHP. So, isn't it bad? So bad, I think, because basically there are still a lot of people loving PHP. That's fine. But how about the frameworks? We are talking about Next.js, basically most of the people of Next.js, React, Node. What about Drupal? So, basically, I think Drupal does some half-times to pre-service. We are all using our time to continue to improve in the work. Right. That's me in the last four years. So, it's not a secret. Actually, Drupal is really good for a lot of things. It's actually a great tool. That's why we are all here. Right. But we are, you know, the new modern front ecosystem is so far away in the front-end side. But we are still very good. And my opinion is we are better than a lot of other CMSs out there. Much better. Because we have a lot of things that they are trying to create. They are trying to improve. We already have it. So, that's something that probably not so much JavaScript developers know. So, they are still using all the CMSs and paying a lot of money, basically, you know, putting clients in there and not using more than four content types to not get very built, you know. So, we are much better than those. It's my personal opinion. In a lot of things, structure data, flexibility, extensibility, probably not in the editor experience. But this is another topic to talk about. I think we have to focus on that in the next years. So, what would you do? I think some years ago, we were talking about getting off the island, right? Right now, I think we just need to embrace the web archipelago. Right. We are not alone. We are not the only, you know, cool platform out there. We are not the only way to do front end. So, that's why we think that the future of Drupal is the best. We actually think that this is true. So, let's put the best of both worlds together. So, let's use Drupal for what Drupal is the better option a client can have. And let's use other tools, right, for the front end and for the end of things that Drupal isn't that enough. So, the result, no more and more, all the developers delighted with our experience. So, basically, I think that for years, we were, you know, doing benchmarking with WordPress, you know, I don't know why we thought that WordPress is our competitor. You know, they have market, but they don't have enough to compete with Drupal. So, we started looking AM and Cycle. Okay, let's see what is for, you know, Enterprise CMS. That's fine. Okay, we did a really good effort. That's community to go there. But I think right now, our real competitors are Contentful, Trappy, you know, basically all the CMS is out there. So, we just need to focus on that. So, let's introduce next Drupal. Chapter three, I've been working in the last months, I think the last year, actually, in putting together a lot of good things that we can, you know, do with Drupal and with MaxiS and trying to attach all the strings. We can continue to do the boots. Drupal, you know, are the good things we ever know is API first, very important. Actually, this change within Drupal 8 was, I think, was the first step for the feature. Flexible data structures, secure, all the sensible, hundreds of control modules and themes to improve and personalize editor experience and main experience, especially in these cases. We are very strong in that. Very, very strong in that. So, next year, okay, the most loved framework among front-end developers right now. Performance is outstanding, actually. It's insane seeing, you know, the web checks we can do with MaxiS. In the front-end, the image optimization is helped by logs, internalization, server-side generation, and basically the server-side rendering as well, on-demand, saving real-altidation, API routes, and the developer experience. This is very important. This is why probably MaxiS is very popular, because the developer experience for front-end developers is really good, really, really good. Server config, pipe script support, the main CSS support, a lot of good features out there. Basically, you can extend it, you can use, take advantage of basically the whole React ecosystem when you are working with MaxiS. And NextRuPaul basically is the best of both. We are talking about in-line preview, instant publishing, multi-side support, authentication, internalization, support for webforms, such API, basically all the things we can create in Drupal. We can use it in NextRuPaul. Under developer experience, basically, we are trying to make this easy for all the developers. So, how can we start using it? So, this is the part. When everything fails, so, let's see. Copy, paste, and that's it. We'll need it. So, let's talk about, or let's think we have a very good and popular food magazine called Umami, right? We just want to start, you know, playing around with the couple. We already have our content types, menus, it's, you know, multi-lingual side, you already have the search. Basically, it is just to start playing around. So, assume that we are just starting with this. So, the first step is going to NextRuPaul.org and see what is this and how to start. So, you have to get started there. So, basically, you already have Drupal installed, so it's not necessary to install everything. So, you can start just installing NextRuPaul. Can you enlarge the font please? Yeah. Okay, okay, that's fine. It might be more legible if you made it dark on light. I don't know if that's possible. Okay, let's see if we can do something here. Is it better? No? A little lighter? Let's make it lighter. Yeah, let me check if I can do it. Okay. All right, so, basically, here's this. Okay, this is, basically, we just went to installing the module. Then there are a couple of patches that are very important because it's about sort of requests and the couple of routers, there are a couple of bugs that are not in the code base. Basically, we just need to go there and just apply patches. Okay, that'll happen. That's why I think this is the part that we can face. So, oh, that's because I just need to use the language. Yeah, the local version is different than the one. Actually, it's for the PHP version of the Mac. Okay, fine. So, we already have the patches and basically it's just going and installing NextRuPaul. So, we need a couple of modules to be installed in Next.js and Next.js JSON API. Let's wait for a while. I can start seeing what is there. This is so important. Basically, we need the path addresses configured for matching the NextRuPaul structures. It's so important to do that. Okay, good. So, we can go to patterns. We'll put a content, pattern type, we'll put articles, title, and so pattern. It's just for article. It could be both languages. So, let's call this just article. So, that's it. So, what's next? Okay. So, I'm seeing we already have everything done in the RuPaul site. So, it's that easy to start. And then we'll create this. It could be, you know, you can create a structure inside the RuPaul directory. And that's fine. Actually, you can use it as a mono repo, for example. Or you can just create a separate project in a separate repo. And it's fine as well. So, let's just create a new one here. So, this is the comment for creating a NextRuPaul application right now. Basically, we'll be using the basic starter. So, this is my Next. So, just for years of having a good internet connection and not getting stuck there. What do you generate in that? Is that an exciting thing? This is an exciting site, actually, yeah. It's separated from the RuPaul site? Yeah. Yeah. So, then we just need to configure the environment variables. So, let's see here. We already have the Next.js here. So, let's copy and paste. Let's rename this to local. And basically, we will need a URL in here. Okay. And that's it. So, basically, we can go and run this to start seeing what problems we can have. So, basically, you can just run yarn.bath. And you will start seeing what happened. So, basically, this, you can use MPM or yarn. And once you have this running, you will see that we'll have the first problem. Yeah. This is an error. And basically, it's because we are using Lando and we are using HTTPS. So, the way to fix this actually is pretty easy. That's why I typically will need this line. And this is just a configuration for, you know, ignore this in production. Basically, it's just for ignoring the secure thing. So, okay, that's fine. But we are still having errors. And this is fine because we are doing this in an existing site, right? It's not like the group out of the box general distribution. So, we have different things in here. For example, this is example code base just for starting. And we have like, you know, if we go, for example, and see what is this articles we are trying to get. Okay, we have the body, we have the bio builder in there. Okay, we have a few media image that is not in our code. So, we can go to pages and see, okay, this is, this is cool. This is using react components. Yeah, so cool. Probably, you will need this much bigger. Okay. So, this is basically where the magic started happening. And this is the way we are getting the data from Drupal. So, the first thing you can see, we are using JSON API. And, you know, there are a lot of things to do this. And actually, we are building good developer experiences for JSON API as well. And highly recommend to install JSON API extras, disable everything, and just start enabling what you really need in the front end. Okay, so, this here, and this here. And let's see. So, question here, the resitution changing, this is because content types have different smells. Yeah, it's because basically, this is like a basic starter for using Drupal, a resin installed Drupal. Okay, got it. Yeah, so, exactly. And this is, this is using like an image file inside of media. And we are just trying to fix this to see, you know, some kind of troubleshooting, not just doing the things in the way that they supposed to work. And yeah, so, we already have this, but what are the images, right? It's not there. We can go here and see that, okay, what, what, what it's using right now this index page is the node article teaser. So, we can go there and see what is happening here. Okay, we are just trying to get the same field image. It's different. So, wow, another, so, what's happening. And this is fine, you know, the same, you know, give when we start the presentation. Basically, you can just see what is happening, trying to look what we have in the node, right? So, you need to just refresh to get this. And here we go. So, you can start seeing the JSON API structure in here. And that's why I recommended to use JSON API extras and disabling everything because you have a lot of stuff here that you don't really need. So, okay, we have the filling media image that's fine, but it's a media, right? It's not the file. So, we have here another field media image that is basically inside. So, this is something we just need to remember to remove all the console logs, right? And we'll need this here. I think this is fine because this is just validating that the field exists. That image component on line third one, it's a next. Yeah, this is exactly. This is the next CS actually you can see in here is the next image and basically it supports basically much optimization of the box and it does really great. So, basically everything is lazy loading. It's all you can figure out. But basically, you have out of the box the responsive images and everything. So, yeah, that's pretty cool. As you can see, you can set a lot of things. This is responsive, object fit cover and a lot of stuff that usually you need to do using CSS. Okay, this is fine and something happening because it's not appearing. Okay, why is this happening? Basically, when you are using and this is one thing that we are trying to improve using an old tool that I will be talking in a moment. But when you include something like, you know, it could be like entity reference taxonomy or something like that, you just need to put and then include. So, yeah, we already have the image there. Yeah, it's working. So, oh, no. Yeah, that's why basically using next CS and this is very powerful. You can have this slug that will be matching all the routes you have in RuPaul but in next CS. So, you don't have to create a new page for every page you already have. It could be like, you know, 3,000 notes or something like that. It's insane. But having this slug, basically, and using the pattern we set with the article in RuPaul, it will be matching this and we'll have all the articles in, essentially, basically. So, let's see. We have the same problem here that we are getting this image. Yeah. So, let's change this for the same with it. And this is using another react component. I'm pretty sure if we are in the article using the note article component, and we will have the same problem here. So, let's change this. There are a lot of better ways to do this, right? You can just, you know, create a variable for the image or something like that and avoid doing this. But we are just trying to get this working and, you know, it's like a basic, a separate template. So, here we go. Well, we have this. So, we have our first decoupled site right now. And it's getting a collection of articles. And you can navigate, basically, all the articles. And that's it. We just fixed a couple of fields that were not working. And, yeah. So, this is pretty cool, actually. And it's powerful as well, because you know, it took me like, I don't know, 10 minutes or less to have my first decoupled site in next year using Drupal. So, yeah. Actually, it's a thing. Yeah, there are other things. So, we have great content. We already have content. So, it's on. Yeah, congratulations. We have another powerful thing, but we don't have enough time to do it. That is the preview mode. So, you can just go to the next Drupal.org and follow the instructions and configure. This is very important, because it's mostly like the real decoupling, creating consumers, roles, users, for authentication, everything. This is just for having the in-light preview in your Drupal as well. So, once you have everything configured, will be something like this. This is a site will be releasing in the next weeks, I think. So, just don't let the kind that we are trying to do this. But this is an in-light preview that is very powerful. Actually, this we are just using one site. But if you have different sites configured in your Drupal, you can change between, for example, what can I see in the tweak in the real Drupal thing versus what is in next years, but it could be several next year sites as well. So, you can change between sites and see how this content is looking in different sites. So, it actually is pretty cool. Another important thing is you can navigate this. Basically, something is not working right here. Just let me check if I can see it in the... Oh, here. It's because the configuration. I just got the database from production. But, yeah. Here we go. So, you can see that each time we navigate, it will be changing the Drupal page as well. And this is very powerful for the clients because you can start navigating pages and say, oh, no. This is not right. So, it will be changing that. You will click edit and you will be editing the home page again. So, yeah. That's not good. So, we can just go and navigate. And this will be syncing the preview with the real Drupal page. And then you can just click edit. Oh, that's pretty cool. Yeah. Take it to the right page to edit. Exactly. Oh, nice. Come on. Yeah. So, basically, that is the preview. So, let's continue. It was like a kind of small demo just to see how this work and how easy really is to configure something. If you already have a Drupal side running, you can just, you know, install the module, install the sari, the basic sari, changing some stuff and you can start playing around with the couple. Okay. So, let's see. One more. Okay. So, can I do it with next Drupal? This is very important because probably is the first thing when you start doing the couple. So, notes, blocks, menus, views, paragraphs. Can we support that using the couple? Yeah. Actually, you can use every data structure you can create in Drupal that is exposed by JSON API. That's important, right? And you can just, you know, get it in next and show the data you want to show. That's very cool. Multilingual, yeah? Actually, for example, check here. We have, and this is very cool. You know, we have this demo that is the same, you know what I mean, profile, but this is what I built in next year. It has exactly the same look and feel, the same functionality, and it's using everything Drupal as the box. So, you can see that this is in the article. And this is fast. Actually, this is live, right? This is not my local. So, I'm really navigating the site right now. This is the real performance. So, I'm changing to español right now. Everything is working fine. This is search API, for example. Yeah. Chocolate. Yeah. This is search API, actually. Yeah. And it's fast. Yeah, it's fast. Yeah. This is the real power of next year's. You know, you are giving your clients a really performant site and a really good developer experience for your things as well. Can you show the search API code? Yeah. Actually, you know, there is something better than showing the code. We have a guide here in the guide section, and step by step for doing this one of them. So, you can go here and see basically all this stuff you have to do for... And we already have the code in GitHub as well. Everything is open source. Basically, this is an open source project. And you can go and see the... Let me check if I have it in here. Domain access is really pretty easy to... Domain access. It's a good question. Actually, I think it's not necessary, but if you already have it, well, it's something that you need to take a little but it's the best way to handle it. Because you can just create sites that could be configured in a specific domain. But out of the box, and this is so important, basically, out of the box, next year's for Drupal is built for the multi-site. So, if you go to the next year's, you will see you need to start creating sites. So, basically, it's time you create a new site. It will be a really new site in the... It's like for having like an omni-channel tool and you can create a lot of sites or mobile applications or everything that you want to expose and have there. Basically, you can configure in here. So, if you are creating something from scratch and you don't have domain yet, it's better to think in something like that. Because you can have the same Drupal instance serving a lot of different sites. Yeah. Basically, you can look at the examples. We have here the omni. And yeah, everything is there. So, you can just start digging how to do that. But we already have a lot of guides for that as well, as I said. So, how to do on-demand revalidation in images. For example, if you want to take the wici web field and your client is using a lot of images there. So, basically, there is an example of a guide to that without thinking, links, web forms, redirects, search API is here, filtered by site as well. So, yeah, you can just follow the guide and see what is the way this is working. All right. Let me check where to continue. All right. So, multi-lingual content moderation. Yeah, it's a post-content moderation. Actually, it's pretty cool because you can have a workflow, an iterative workflow, and you can see in the inline preview what you are building. So, if you, for example, need approval, you can send, and this is another feature that is pretty cool. Right now, you can create links for a specific page with a specific role, and you can set an expiration date as well. So, it could be just for today and tomorrow, and that's it. So, you can get the page approved, not seeing the content in Drupal, but really looking how it looks in the final website. So, that's pretty cool as well. Okay. So, content moderation, yeah, role-sum permissions, yeah, it's a personal role-sum permission. You can just define how, you know, if a field, it's only visible for a certain role, yeah, it's possible as well. Multi-side, yeah, you just saw that basically, it's multi-side a lot of the works. Webforms, yes, you can basically match your webforms using the webform API, and using Reactforms, for example, just for match your webforms with the React webforms, for example. So, it's a forward search API, yeah. Has it searched? Yeah, you can do it as well, and that's pretty cool. Yeah, actually, we use it in the site. If I don't have enough time, I can show you. Okay, features. This is the version of great tool. Basically, in the last three versions, we did a lot of work, and we released some really good things, like the Drupal client. This is actually a client for managing all the JSON API calls and everything in a better way, so you can just get collections, you can just get a note, a view, a block, so basically, just putting Drupal that, get view, and with the ID and parameters, basically, you can have this view working. Custom authentication, serializer feature, yeah, a lot of things, and in the next version, basically, we have Drupal client stable with current operations as well, so there are, you know, very specific use cases when you need to do a like. And basically, that changed everything, because it's not just getting content, you need to send content back. And we have that specific situation in one site, and actually, we started building all the current operations for the part that is working really good. Yeah, and the last one was the preview URL generators, I just talked about, basically, you generate, you choose the whole, you choose the expiration date, and JSON web tokens, basically, it's experimental right now, and there is a module, the next model for working with JSON web tokens. So, yeah, that's it, and yeah, it's built totally with developer experience in mind. Actually, if you go to the site, here, this is my very part of this landing page, because it's, you know, everything that we are building for the developer experience. So, this is the Drupal client we were talking about. So, basically, you can use a lot of things. This is get resorts, for example, for getting a note, blog or something like that. You can create a resource as well. So, basically, you can create a note. You can have like a collection, for example, this is taxonomies. You can just get the collection there, a menu, a view. You can use filters, the crots part as well. So, you can update resources, create resources, delete resources. This is for multi-link authentication and typescript. That's very good for front-end developers, right? Yeah. I didn't catch the site. What's the site name? Oh, next Drupal. Yeah, next Drupal. Actually, we have some stickers there. You can find the other. Yeah. And yeah, so that's actually pretty cool. So, we are building this with two things in mind. One is basically the client experience, what they are looking in the front-end, and the other one is the developer experience. We want to have much fun in front-end. So, try to tell us to do in front-end that Drupal is not fun. When you are learning the first 10 years, yeah. But after the 15th year, it gets more, right? It's okay. You can get more, yeah. Okay. Yeah, the future, let's put it together. So, this is open source, this is community, so we can just go there, start digging around, put some tickets in GitHub, start talking about proposed and social things that we can do together. So, you can go there, and we are on the Slack, and the Drupal Slack is next year's channel. We are in Drupal.org with the module, and we are in GitHub with all the open source as well. So, thank you. Any other questions? Very good. You are tired? We want to hear it. Leigh-Anne or Jesus here and ask if you have any, are you going to do GraphQL connectors later in life? You can use actually the next year's module with GraphQL and define, you can use the inline preview and everything and define, but basically the package for the next project is not supported. Exactly, exactly. But you know, Jesus could do that, actually. Jesus could take the Drupal client and do the support for GraphQL as well. It will be very cool. There is an issue. Someone is like, are you trying to support this? And then, Arshad is like, look at the moment, Jesus is doing it again. Yeah, that's true. Okay. Yeah, thank you.