Snel en schaalbaar client-side zoeken met Instantsearch & ItemsJS

Als kleine startende webwinkel wil je graag een zoekfunctie: een functie die bijna elke website wel heeft. Een passende oplossing is dan belangrijk. Je wilt een gemakkelijke implementatie en altijd beschikken over een goede performance, ook wanneer jouw bedrijf groeit, er meer producten verkocht worden en er een upgrade nodig is.

Hierbij zijn niet alle mogelijke functionaliteiten van belang, analytische gegevens zijn bijvoorbeeld voor een startend bedrijf minder interessant. Ook kunnen kosten van een betaalde service snel oplopen. Vandaar dat Unplatform met het idee kwam om een passende oplossing te programmeren voor deze startende bedrijven. In dit artikel beschrijven we de aanpak die wij gekozen hebben: Instantsearch in combinatie met ItemsJs.

Wat is Instantsearch?

"InstantSearch.js is een open-source UI-bibliotheek voor Vanilla JS die klaar is voor productie, waarmee u snel een zoekinterface in uw front-end toepassing kunt bouwen."

Algolia.com

Doormiddel van verschillende widgets kun je snel en gemakkelijk een front-end zoekfunctionaliteit opbouwen. Deze widgets zijn als componenten beschikbaar in React, Vue en andere frameworks. Je kunt deze componenten volledig configureren naar je behoeftes, om ze bijvoorbeeld te laten filteren op een bepaald veld. Ook kun je functionaliteiten van het component aan/uit te zetten.

De maker van deze UI-bibliotheek is Algolia. Zij verkopen zelf ook een back-enddienst. Dit werkt uiteraard goed samen, omdat dit door hetzelfde bedrijf gemaakt is. Het gebruik van een zoek service met uitgebreide features is echter vaak niet nodig. Zeker niet voor een webwinkel met een beperkt aantal producten.

ItemsJS

Om een goed alternatief voor een uitgebreide zoekservice te vinden is er een onderzoek gedaan. In dit onderzoek is bepaald dat client-side zoeken in de lijst van eisen moet staan, omdat deze manier van pagina's laden efficiënt en dus snel is. Bij een zoekfunctionaliteit is dit handig, omdat de pagina vaak veranderd en dus opnieuw geladen moet worden.

Er zijn vervolgens meerdere client-side-bibliotheken onderzocht en ItemsJS kwam als meest geschikte kandidaat naar voren voor dit project. Hierbij is gekeken naar de gewenste functionaliteiten en andere factoren zoals goede documentatie en onderhoud. Op basis van deze criteria zijn de twee beste opties vergeleken in een POC, waarbij de snelheid is gemeten. De twee beste opties scoorden beiden hoog op de aangeboden functionaliteiten, de documentatie was prima en ze worden actief onderhouden. ItemsJS heeft echter een betere snelheid, wat de doorslag heeft gegeven om voor ItemsJS te kiezen.

De ItemsJS bibliotheek zorgt voor het indexeren van je dataset. Dit houdt in dat de informatie slim wordt opgeslagen, zodat zoekacties snel uitgevoerd kunnen worden. Hierdoor kan je client-side, tekst en facet gebaseerde zoekopdrachten uitvoeren. Ook biedt deze bibliotheek de mogelijkheid tot het gebruik van veel andere features.

ItemsJS kan gezien worden als een back-end. Hierbij moet vermeld worden dat het geen back-end service is. ItemsJS draait volledig client-side en heeft dus de functionaliteit van een back-end, maar draait niet op een server.

De oplossing: een adapter

Om ItemsJS aan Instantsearch te koppelen is er een bibliotheek gebouwd om de Instantsearch logica te vertalen naar iets wat ItemsJS begrijpt en vice versa. Om deze code te publiceren is er een NPM-package beschikbaar gemaakt: Instantsearch-ItemsJS-Adapter. De package is openbaar en kan eenvoudig geïmplementeerd worden bij verschillende webwinkels. Dit maakt de code herbruikbaar.

Deze adapter kan gebruikt worden in je front-end applicatie met Instantsearch. In onderstaande afbeelding is hier een schematische weergave van gegeven. De gebruiker, linksboven te zien, communiceert met Instantsearch. Vervolgens kunnen hier verschillende back-end oplossingen aan gekoppeld worden, zoals in de afbeelding te zien met de voorbeelden van Algolia en de Instantsearch-ItemsJS-Adapter.

Omdat de verschillende back-endoplossingen gebruik maken van dezelfde front-end, kunnen deze relatief makkelijk uitgewisseld worden zonder dat er iets voor de gebruiker verandert. Een bedrijf met een kleine catalogus begint bijvoorbeeld met ItemsJS. Als de catalogus groeit, kan er relatief makkelijk worden overgestapt op Algolia, bijvoorbeeld voor meer features.

Welke back-end kies jij?

In bovenstaande afbeelding is goed te zien dat Algolia en de adapter beiden van dezelfde front-end gebruik maken en dus makkelijk uitgewisseld kunnen worden. Er kan dus gekozen worden om met de (voor gebruik) gratis adapter te beginnen en later pas te upgraden naar Algolia. Hier komt dan de overweging voor meer functionaliteiten bij kijken. Het gaat hier dan om functionaliteiten zoals analytische gegevens, gemarkeerde resultaten en autocomplete. In de Readme van de adapter is een compleet overzicht te zien van welke features wel en niet beschikbaar zijn.

Verder kun je de adapter-implementatie uitproberen op de demo-website. Neem gerust een kijkje. Ook de code van de Adapter en Demo zijn opensource.

Heb je vragen, neem dan contact met ons op via ons contactformulier of stuur een e-mail naar info@unplatform.io.