 Hey everyone, thank you for coming along to my Drupal Gov 2020 virtual event session. The title of this talk is Integrating Lunar JS into Drupal for Fast and Fuzzy Client Site Search. So a little bit about me first. My name is Sam, I go by Sam152 on Drupal.org and the Australia NZ Slack channel. I build websites for an agency called Previous Next and a fun fact, I started with Drupal version 6 almost 10 years ago. So in this session, it's a lightning talk, it only runs for about 10 minutes, I'm going to cover what is Lunar JS, how to get started and then building stuff on top of the solution. So first of all, what is it? Let's jump right into it. Is it right for me? Is it something you want to use on your next project? And to understand what Lunar JS is, first I'm going to look at the example of a more traditional search solution. So with a traditional solution, you might start with a Drupal site, it may have a bunch of documents or pieces of content on that site. And typically in the past, you might deploy a solar server, you'd sync the documents to that server. And then that solar server would index all the content and it also be responsible for querying. So when a user came along and entered a search term, you'd send that back off to solar, it would return you the matching documents and that would be the full life cycle of a search query. With Lunar JS, it's a little bit different. You still have your Drupal site with your content, but instead of syncing it to an external search index, you actually send it off to the user's browser and then a JavaScript library running in the user's browser takes care of the indexing and the querying. So Lunar JS is the JavaScript library that enables this kind of functionality. So there's a couple of pros with this approach. First of all, there's less infrastructure required. You don't need to maintain an external search server like solar. You may not need to maintain a SaaS product or a SaaS platform. Maybe there's costs associated with that stuff. And the other advantage is querying the index is really fast. Since it all happens within the user's browser, it's a really tight sort of feedback loop between typing in something to search for and actually getting results out of the index. There are a couple of downsides though. So the index size has practical limits. There's only so much content you can sync to a user's browser and expect their device to index and search against. And the other kind is your devices have to work a little bit harder. So since you're not maintaining a server to do indexing and searching, you're actually kind of delegating that work to the users who are searching on your site. So there is some downsides to the solution. So if that sounds like something you're interested in, what's next? How can you get started with what's available today in Drupal? So I'm going to be looking at two modules. The first one is called Lunar Search. And this module is based on views and it requires a build process to index content every time content is changed. So it was primarily built with static sites in mind. There's a project called Tome, which is a static site generator for Drupal. And this fits really well into that process because often with a static site, you already sort of have a build process and a build pipeline in place. So Lunar Search slots in pretty well there. The other project out there is Search API Lunar. And this one's a little bit different. It's based on Search API. There's no build process with the indexing of the content because the way this module works is it gathers up all of your content and sends it to the user's browser. The indexing part of the process is not done ahead of time. And I'm going to focus the rest of the session on Search API Lunar because this is the solution that we're running in production at previous Next. And here's a demo of Search API Lunar running on the Umami Food Magazine demo that comes with Drupal Core. So a couple of things to notice about this. First of all, the searching is actually done on KeyUp when you're typing into this input. So you can see every time a key is pressed, it's got a different set of results there and they appear sort of immediately in the dropdown there. The other thing to notice is I'm spelling words wrong. I think I spelled gluten wrong and pizza with 1z. And you can see it actually still matches results. So it's a really fuzzy sort of search. And it's the kind of search that users have really come to expect from websites. They don't want to be entering words and having to exactly match what's found in the document. And if I pop the Network tab open on this demo, you can see here that the browser downloads five different JSON files. And it uses these files to index the content locally. None of this is done on some external search server. This is all happening in the browser by the JavaScript library. And this is where the kind of practical limits to the size of your index come into play. You couldn't send hundreds of megabytes worth of content to the user's browser. It would really slow down the searching process and ultimately could have a lot of performance issues. But in this case, with the number of recipes on this website, it's a fairly modest number of nodes. It's actually fine to download all of this content, index it all and have it return in the time a user would expect when they're pushing a key in a search box. And looking at this a little bit closer, here's a contrast between the results that are returned from Luna and the same keyword entered into the core search. So in this case, the word is chilies. And on the left, you can see it's actually matched the recipe that's fiery chili sauce. And on the right, since the word chilies doesn't exactly appear in the recipe, core search doesn't actually match anything. So when you compare it to something like core search, it's a fairly high quality set of search results. It is closer to what you'd kind of expect if you were deploying some other more mature solution like solar. Here's the configuration of the module. It's pretty similar to what you'd expect if you've configured any other kind of search API plugins. Maybe you've deployed solar and you search API for that. You can add fields to the index. You can perform certain actions like clearing the index, re-indexing the content. All of that goes and generates the JSON files required for the JavaScript library to index the content. So in this section, I'm going to talk about extending the solution. What can you build on top of it? And Search API Luna is actually built around this JavaScript API. And this API connects the dots between what you configure in the Search API backend and actually using that functionality in a browser. So this is some JavaScript. I am doing a search query against an index that I've configured in the UI. And after you execute a search, you get a series of matches back from the index. And with each match, you have access to the raw document that was indexed, the ID of the document, the label of the document, and a summary of the document. And using this API, I built a feature on the previous next site. And it's this block at the top of the page. And what it does is it uses the page title to find blog posts that are similar to that page. So you can see here, I've got twigging out at Drupal.com Portland. And I've got some related blog posts. Two of those are about twig. The other one is about Drupal.com Portland. And each time I click through the page, there's this pop at the top where we're actually executing a search against the index and showing results that are related. So if you're not using Drupal with an integrated front end, maybe you're doing some decoupled stuff, there's actually a companion NPM library you can install as well. And you can use the same API, but you have to point it at your Drupal site. So in this instance, I'm saying, OK, I want to use the Luna API. But my Drupal instance with all my content is located at this address. And then once you've given it that context, it's exactly the same. You can query your search API indexes and you can execute searches. And here's a demo of that. This is actually a decoupled React front end for Drupal. And all of the content on this page actually comes from a Luna index. And you can see I've added some other features. I've done some faceting by date. But I still have that ability to search the whole index by typing in a search query there. So summing up, I would say Luna.js is a great choice if you have small collections of content, nothing too massive. There's plenty of tools in Contrib to get you started fast and you can also build and extend upon those solutions if you need to add your own functionality to them. Thank you for making it this far. Any questions, I'd be glad to hear them.