 really good. You really fast get to the point that you can't build really good search experiences anymore. And therefore, we also like a little bit history on our side, we stopped using search APIs some years back because of this shortcoming. So we then started hosting our own Elastic servers and building client-side search applications, talking directly to Elastic. That was fine until Elastic started like version 6, 7, 8, and I don't know if we got the version numbers right now, yeah, but like that all changed and then some clients want solar and then some horses don't support this and then you have like GDPR and everything else, yeah? And it's just like it didn't work out for us and therefore, we want to go back to search API. But in order to have the experience, you know, that you want to have from a modern search application, you know, this needs to be decoupled. You need to have the opportunity or option to just like, you know, build JavaScript based applications that interact with your search backend and do this all in the front end. And that's what we contributed earlier this year. It's called search API decoupled, yeah? So you see this indicated in the graphic here, you know, search API ecosystem abstracted search indexes and we added an API module to it and that does two things. It allows you to use standard functionality on search API side, for example, configuring indexes, you know, and like attaching facets, attaching autocomplete and these kind of things, yeah? And then expose this configuration for your search to the front end on an API and secondly provide API for searching itself, yeah? So we did that and we presented this on Drupal Dev Days earlier this year. So that was really good, really great experience, lot of attention, many liked it, but it leaves you with this part here on your own, yeah? So I guess for you, if you want to start using this and you just have to build your own search client side application, you know, the bar can be pretty high. And so therefore, we decided to create a generic JavaScript search JavaScript client, ship it together with search API decoupled for you to just install this and start working with this out of the box. And that's what we've done and that's what we're going to show you. All right. So what you see here is a regular Drupal installation. We even left here the drush site installed, you know, for you so that you see it's really, really fresh. And so what we did is we just turned on a sub module which is called search by decoupled demo. Could you go to extend, please? And then search for demo, please. And now expand here, maybe zoom in a little bit for the ones in the back. So like together with the search API decoupled module, we now ship a sub module which is called search API decoupled demo. And if you turn that on, it does a couple of things. It sets up for you like a search index. It indexes all the content, the relevant fields. It indexes rendered search results or renders like rendered view modes of the search. And it provides for you a configuration of a search endpoint and provides a block for this endpoint. Let's go to block layer, please. So what we've done here is preparation before. You see here we've placed a block. If you configure this block, you see that, you know, it just comes. It doesn't do anything else that what a block does. And we've now here for testing purposes, we've placed this on a path called search-demo. So let's take a look. There you are. So this is what you just get from the beginning. Like you're all quiet now. I like this. And so if you have built the search API before, like this is big, you know, because like this is just an app that just does exactly what it is, maybe search for something. So you see here like in 53 milliseconds, you get the result completely returned and ran out on the page, yeah, to maybe open sources or something. So, you know, search is perfectly. Let's play with the facets a little bit. Maybe open the console. Let's just look at the JavaScript request so that you see this is real what we're saying. So this is just what you get back. So it just works really. And you get this like we did this here yesterday when we set this up. We just turned this on. So you install Drupal and you turn this on. This is what you have. Thank you. Thank you. That's music. That's awesome. That's awesome. Let's do some more. Let's play. Let's play a little bit more. All right. So like we said, you know, like you see, you see here like, so this comes out of the box. You see here, maybe open the index for a second. Right. So you see there's comes an index, you know, has field preprocessors out to complete everything is just like already configured. That's what the demo module does. That's not fancy. We didn't do it. We just configured it. Yeah. But now go back to endpoint, please. And now we have here like added an endpoint from the module. So what this endpoint does is really simple. You say what index, you say what fields you want to search. You say what fields you want to return. Then how many you want to return and you're going to have to pass mode for the query. That's all you can do. Standard. Like we didn't invent anything here. But now we invented this. Yeah. Look. So you saw the search, search input, you know, facets, search summary, search results, pager on the bottom, right? And one column layout. Let's change it to two column layout. Right. Now we have two column layout. So put the search on top. Leave the facets there. Maybe yeah, search summary also, render search results on the right to the bottom. Ah, good point here. Look, you can configure like facets, like those who've worked with facets before, you know how this works. So facets are all kind of settings. One of them is like if you want to facet to, you know, display horizontally or vertically. Of course, if you have two column layout and you want to facets in the sidebar, you want them to display vertically, right? So if we save this, now save the other page to please. Let's go back. Look at this. That's pretty awesome, isn't it? So you can already see two things. Oh, hang on. Let's show some more examples. Yeah. So now, like for us, because like the way we built, like at Onex Internet, we have like a specific way how we built front ends, right? So when we build front ends, we use web components. And the reason is we just like to build like UI libraries in a design system and then use these display components, both on Drupal websites and in decoupled applications. Yeah, so that's why we do it. And so therefore, we need this search to also work with not this type of display, because you see here, it displays the way the Olivero theme would just display, you know, here, checkboxes. That's actually the checkbox and, you know, like search results and so on. And so therefore, let's look at a different example where exactly the same thing is installed. So here, you know, some demo website from like the demo installation. So some of you got like this little card where it says try Drupal, right? So then they can test the same thing, because that's just what it does. It spins up like a demo instance for you and you can just play around with this if you wanted to. And yeah, and here you see exactly the same, maybe search here also for Drupal or something. It's taking its time. It's real. It's a live demo, you can see. Maybe something rogue. It's real. Yeah, it's definitely real. Maybe someone is deploying something. Yes. It's possible. Maybe. Yes, yes. Maybe take the one like without the prefix. Yes, you're right. Or you have a local version running too, don't you? Or maybe it's just that not having good connection, internet connection. Did you lose that work? Not sure. Yeah, yeah, it's definitely, it's definitely live. Yeah. But we said it in the beginning. OK, let's see. You lost internet connection? I think so. OK, now. Oh, it's back. OK, so if this was a screen recording, it would be very, very advanced. OK, so what you see here, maybe take the other one first, please, the search grid. Go to the other one that says search grid in the path. Search grid, not search demo. OK, so maybe like click around here. So like let's switch here the view mode. So we have here indexed like two different ways of displaying like the result card. And if you now like inspect the, if you inspect the source code here, so you see actually these are custom elements. Yeah, so it's not HTML, like it was, it's not standard HTML, it's just custom elements, yeah. And that was for us important that like the JavaScript app that we built is made in a way that you can switch out the widgets, right? Because like in our case, like we wanted to use something else. So we needed to separate like logic for displaying like functionality and like having the search logic of the app, like the way how it consumes configuration and does search. No, that need to be separate, yeah. Yeah, maybe here. And you see, look here, you see, so that's a card component has orientation horizontal. And if you switch, then you see like same card component, same card component, but it doesn't have like orientation. And it doesn't have like, so it's just as default orientation, yeah. So that we needed to support these two. And what we also wanted to support is because like this is still within, this is in Drupal, yeah. So like, I mean, Drupal, rendered view modes, doesn't matter that's web components now in the index and showing, but we also need this to work like in fully decoupled applications so that you just have something running completely elsewhere that also needs to work. And that was the other demo, go now to the search demo, please. And this is what you see here. So the cards, yeah, so they are not cards now in this case, like the app is just consuming the fields returned from the search result and it's just assembling them themselves to, and therefore like it has like a slightly different look to it. I think you can also toggle here. Yeah, so that would be the equivalent case if you just now have your fully decoupled app, yeah, and you just like consume fields and then you just construct like your search result the way you want. All right. Am I forgetting anything or should be? I think it's good. All right, then let's go to a little bit look deeper, you know, how is this built, like how does work under the hood and like where do you get it and like how can you help like make this even better and yeah, I'll say take it away. Thank you, Christoph. OK, so now I'm going to get a little bit more technical here. I'm going to explain a little bit about architecture. Please do not get scared, what I'm going to share now, but this is the diagram that actually represent the architecture of the client. It's a bit complex, it's doing a lot of things, it's in charge of URL changes, state, it's in charge of communicating with the back end also with the browser and everything. So I don't want you to get like this as the reference of the one for this talk. I want to get this one as the reference that this is more handable, right? So here you have the client on one side that is in charge of through the API, consume config and results. Once you consume the config or results, the client is in charge of processing that config, those results and make them available to the UI library that you want to use. How? Through these interfaces. So we have interfaces for each element type. You saw them in the demo, we were like moving the widgets like the search input or whatever, those are having interfaces on the client and then you can implement on the UI library side any beautiful widget to just follow that interface and communicate to it. You can also have one interface that communicates with multiple widgets, for example, the facet here, and just to summarize that in the end, this client on this UI library is just producing JS files when they are built, one for the client and multiple for each widget on the UI library side. So what's on the middle? How is the interface working? So we just define interface for each element, as I said, and they are mainly attributes and even listeners. You can see that for example, for the input, we have value and placeholder and then we listen to input change, input reset, input submit. So when you are actually implementing your widget, you need to follow this additional attribute that is data element type. And then it's following the structure like element type widget type. When you are configuring your facets or your elements, you will see that it's configurable there. Then you can just get that result that render HTML and there are even listeners attached to it. So you can just take that and implement wherever you want as your input widget just following that interface. And how is this arriving to Drupal? It's just that it's on NPM. You have packages. Composer are requiring them. When then you have the JS files that are converted to libraries in the module, specifically in the sub module UI. And then they are provided to the search block. And it's also important to know that only the UI elements that you use are the ones that are provided to the search block. The client is always provided because you always need a client, but only the files that you use are the ones that arrive to your loaded page. Can I add to this? Sure. It's for performance reasons, right? Because if this library grows and you have like a thousand widgets, but you only use two, you only want to load two. So it does that too. Okay. And where is the code leaving? Because we contributed this. And I'm going to share here that we contributed to Drupal. Of course you can install them and they are also published on NPM. So you can just do NPM installed and you get them. Here are the names for them. And then the code is leaving on the GitLab on Drupal.org. And the projects are also there because nowadays, Drupal.org is supporting, totally supporting you to provide JavaScript libraries or JavaScript application to also Drupal.org. So that's why we choose to do that. Okay. Now you might be wondering, it's nice, we get something out of the box that looks nice, but maybe it's not ready for my website, for my client's website. And I want to make it my way. I want to personalize it. So we are providing like two examples. One is like, you just need to customize the provided UI. It's really simple. You just do it in the Drupal way. Because as we said, they are just libraries. So you just check the CSS files that you get. And yeah, you can just check around and say, okay, it's doing some things to the input, then you create your own CSS file and you maybe have in mind to override or extend it and do your changes here. It's just changing the border radius, some background color, a couple of things. And then you just need to attach it as a module extension. Yes, Drupal theming. You define your new library, you do libraries extend or libraries override, and you replace it or extend it. Hang on, hang on. So we really wanted to make sure that this works in the way how we Drupal themers like to have it. You know, you install it, it works, it has UI, you can configure it. And then you go to your theme layer and you just override CSS, you exchange CSS, you add a library or you move a library. And we really made sure that this works, yeah. So that we wanted to make it possible to just stay in our home turf, you know, how it always has been. But at the same time also allow to, you know, advance the usages. So as an example, that was what was changed, it looks ugly. It's just to let you know that it actually changed. So this is what comes out of the box. And this is what I changed with that CSS file that I extended. Okay, the second way is just that you maybe want to use different widgets or your designer provided like a crazy design that is totally different to what we provide. So you want to use your own widget or your own even whole library of widgets for the search. And this is also doable because you can just follow these three steps and you will have it, you just need to check how interfaces are defined. We really talk about them, attributes, even listeners. You already know how are they rendered, like what are the entry points that we are providing from the clients. And you can just use React, View, JavaScript or whatever framework you want to actually target them, follow the interface and throw the events that you need to throw. And it will communicate with the client and search will be updated. And web components, we show that for our solution, we are using custom elements and we are going to contribute this soon. And the only thing that will change is that instead of a div and data element type, you will just receive the custom tag that you provide on the config. I want to add to this one here. So if you remember back in the graphic, so there was like there's the client side application, there's the UI library. That's exactly what you see here. Look, so there comes like, there comes a search request in, you have some data, the client library comes and routes this to a widget for rendering. And this is how you replace the widget. You know, so the client just puts out this div element, that's where you attach your custom widget to, that then looks completely different. As long as it, you know, shows the right events and consumes the correct values, you know, it's really simple to implement. And finally, again, in the Drupal way, you just just override the libraries that are already provided for the elements that we provide and replace them with your own new UI component, whatever library that you already have defined with your JavaScript file or whatever you have. Or maybe you want to do it in a totally complete way, different way, so you can just alter how this module is actually providing these libraries. So this is, again, the example we already demoed it, but it's here, out of the box, it looks like this and when you use your custom library, like we did, for example, it looks like totally different in terms of UI. But again, the interface is the same and things work the same way. It's all on the client. Okay, and the last step you could also arrive to is to actually contribute because we think that this is totally extendable and we can improve it and make it even more powerful than it is right now. And we provided a development environment to do that, so if let's assume that you just can do the first step easily, that it's just prepare a Drupal running with search API decouple and open course and the input config, because we are going to be working on a decouple client development environment. And once you have that, I'm going to now show how to set up the client and the UI library on life. So if we go here, you see that I have cloned both repositories one next to the other and now I am on the client repository on the package JSON. You can see here. So if we go here down here, because we need to replace on dev dependencies, we need to replace the latest package for the UI with our file in order to actually be using what we have locally. So if you do changes to the UI, you are also seeing it on life. Okay, we save here. We do build on the UI. Wait, it's not saving. Build here. We do install here in order to get this javascript files that are just generated from our internal. Yeah. And now we can just do npm run dev. And you will see this. And here you can see that it's prompting you to provide a search API host and a search API endpoint name. So we are going to use the one that we just generated that is, let me check it. You fold it upside. You can just copy this paste here. And we were using demo. Oh, and there it is. You have answers. You can see here on the network that it was trying with what I was providing. But in the end, I provided a correct one and we are getting results directly from there. So you can just start developing. It's true that here the images are not visible because it's using relative paths or whatever. But yeah, you can see that it's working. And we can search, for example, for Drupal. And you will see that it's exactly the same element that we searched on the other place or open source. Also there. Okay. And now I'm going to use our internal one. Let's do the XP3.1. And in our case, instead of demo, the endpoint that we configure is default. And there you go. Here the images are correctly working. And you have also all the features that we provided. So you can start just implementing whatever you want to implement, fixing whatever you want to fix, contributing to this project easily. And this is just running on your local. Here we can also check out that there are some other things here, like for example, I can change. This is all mocked. We have a mocked system that can also be improved for sure. And you can check here to sidebar, for example. And you will also be able to test the sidebar structure. Or you can just go to the mock system and do whatever you want. But by default, we provide this. And here we have some disabled elements that we have on our custom library, but we still don't have on the contributed library. So if you want to contribute any new widget, we can enable them here and you will be able to also change and just see how they change instantly. Okay, so that's it for the development environment. We want to finish just saying that it's really easy to contribute here because of the modular architecture that we have. On the search API decoupled, you can just extend the element types. So you might be wondering, okay, I want to have a different type of facet that it's having ranges. So I want to have an element type that is going to be provided to the client, that is going to have just a min and a max. And then with that can query ranges for the search. And then you just need to provide an interface on the client, a new interface that is range facet or whatever. And finally, a UI element that you will use for it. You contribute these three things and then automatically just then the search application to actually provide feature for range sliders. That's it. You can just contribute whatever these things. You can also fix things that already are there for the interfaces that we already have, for the widgets that we already have, but it's pretty easy. So as a summary, it works out of the box. Really easy to configure and you get to working. It's easy to customize, to extend, to override, just to follow in the Drupal theming basic concepts. And it's also easy to contribute. You can just use the development environment, see how it works, start changing things and seeing them preloaded on time. And yeah, you can just contribute whatever you want. Thank you very much. Thank you. That was so from our side. Oh, thank you for clapping. That feels so good, really nice. So we have time for questions. Like, I have a microphone here. I can come to you and if you want to ask a question, then we try to answer or you have idea or suggestion or anything. Yes, I start here. Hi, so have you looked at the Drupal state module instead of building your own Drupal client? No, we just follow the idea of, and actually is what we are contributing to the client itself. So it's the approach that we took from the beginning. Okay, because we are actually doing this for a client and we're using the Drupal state module, which is basically a JSON API client, you could say. So I was just wondering if you have research looked into that instead of building your own. No, no problem. Thank you. Paul? Yeah, hi. Thank you for this demonstration. I have one question regarding that is this module is also compatible with the Equia search? Yes. Yeah. And if you want, for example, the authentication layer on top of this particular API layer, then it is also possible. For example, we need to protect it. This particular it's currently it is like open. Yeah. Yeah. Just requests. Okay. Okay. Thank you. Questions? Here. It's possibly horrible because I'm back end PHP question. Maybe not. Just a quick high level overview. How how are you implementing the facets in the back end? This is actually a question because with the JSON API search API implementation and the there's a discussion now because facets is going to go views directed. So how will it work? Do you know or should I have a discussion? If you could pass the microphone to the gentleman that's sitting right next to you, he can answer that question. So basically facets what we use, we use just facets from facets module. And as you said, like the source normally now is only with views. So you can create the facets from views, but our endpoint is now also as a source for facets. So whenever you create a endpoint, you create have a source and you can create your own facets per endpoint. No, facets themselves work on their own. We didn't change it. So the only thing that we changed, we changed the orientation. So there is no setting for orientation vertical or horizontal. This was extended and everything else is just facets out of the box. So the facets element that you have seen on this UI builder, this is just reference to a normal facet. Okay. I have an additional remark on that. I co maintained facets. So that's why I'm talking about this. So facets tree is going to move towards views filters and going away from a lot of the things that we are doing with blocks and rendering ourselves as eeks already said. But facets to will be still supported specifically for use cases like this where you're not coupled to views. The problem that we have with facets to is the way that we handle Ajax and that's not implemented very well. I made some mistakes during that. So the tree version will be a lot, will just use all the view stuff. And that means you get Ajax for free. But for these kinds of solutions, we will still support the 2.0 version of facets. First of all, this is really cool. And I love how you guys thought about the full stack solution. There's a point to get in and change everything every layer of the system. I'm just curious, how do you configure the output of the search result? Is it like a view mode or is it like what's the, can you customize that? So could you go back to the Drupal installation? Let's go to the endpoint, please. So you see here, so you have the search fields and here are the fields that we return to the client of which you can exclude some. We chose to exclude not include because you usually want to get rid of fields you don't need to make the response smaller. So all these fields that are sent back, you can render. So what we do by default is that we just index rendered version of the node, the teaser. We put the teaser into the index and then we return the teaser, the rendered HTML from the teaser to the client and that's why it's so fast. You saw these incredible search times of like 50 milliseconds. That's because it doesn't do like, there's no bootstrapping in the Drupal involved at all. There's no views, there's no entity loading, no renderings, nothing of that. You talk straight to the index and gives back either fields if you want to render fields or stuff that Drupal has rendered for you that you can just show. Awesome session, thank you. Just a good question from a back end perspective. The module is called demo. The index is called demo. How do I ship that to production? So what do you would do? It's always a question like, if you make a demo module, will that be in production in many places? Should we call this default or should we call this demo? That's why you saw that we call it default because our default, we ship to production and here we wanted to provide a demo. That's why we called it demo. I think if you just, my recommendation would be like, you look how this is done and then you configure your own index because it's just few clicks and then you tailor it also to like what you want to see in your index. So we have only, for example, added the content type and title and then rendered teaser. That's the only thing we did, but probably you want to have some taxonomy fields that are also additionally indexed and so forth. Yeah. So you anyways would want to change it. So probably you make your own and then you just like generate a new endpoint. Maybe let's do that. Let's go to end points and you add an endpoint and here you select the index, the bottom, then you select your index and then you have exactly the same and then like the search block is generated for you and you know everything's available, you can then start setting up your UI. More questions? All right, then thank you very much again for listening and if you can go and contribute. If you want, come by and talk to us, come by our booth and yeah, we around and we would love to hear your ideas and your feedback. See you.