Search by Algolia
What’s the secret of online merchandise management? Giving store merchandisers the right tools
e-commerce

What’s the secret of online merchandise management? Giving store merchandisers the right tools

As a successful in-store boutique manager in 1994, you might have had your merchandisers adorn your street-facing storefront ...

Catherine Dee

Search and Discovery writer

New features and capabilities in Algolia InstantSearch
engineering

New features and capabilities in Algolia InstantSearch

At Algolia, our business is more than search and discovery, it’s the continuous improvement of site search. If you ...

Haroen Viaene

JavaScript Library Developer

Feature Spotlight: Analytics
product

Feature Spotlight: Analytics

Analytics brings math and data into the otherwise very subjective world of ecommerce. It helps companies quantify how well their ...

Jaden Baptista

Technical Writer

What is clustering?
ai

What is clustering?

Amid all the momentous developments in the generative AI data space, are you a data scientist struggling to make sense ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

What is a vector database?
product

What is a vector database?

Fashion ideas for guest aunt informal summer wedding Funny movie to get my bored high-schoolers off their addictive gaming ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Unlock the power of image-based recommendation with Algolia’s LookingSimilar
engineering

Unlock the power of image-based recommendation with Algolia’s LookingSimilar

Imagine you're visiting an online art gallery and a specific painting catches your eye. You'd like to find ...

Raed Chammam

Senior Software Engineer

Empowering Change: Algolia's Global Giving Days Impact Report
algolia

Empowering Change: Algolia's Global Giving Days Impact Report

At Algolia, our commitment to making a positive impact extends far beyond the digital landscape. We believe in the power ...

Amy Ciba

Senior Manager, People Success

Retail personalization: Give your ecommerce customers the tailored shopping experiences they expect and deserve
e-commerce

Retail personalization: Give your ecommerce customers the tailored shopping experiences they expect and deserve

In today’s post-pandemic-yet-still-super-competitive retail landscape, gaining, keeping, and converting ecommerce customers is no easy ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Algolia x eTail | A busy few days in Boston
algolia

Algolia x eTail | A busy few days in Boston

There are few atmospheres as unique as that of a conference exhibit hall: the air always filled with an indescribable ...

Marissa Wharton

Marketing Content Manager

What are vectors and how do they apply to machine learning?
ai

What are vectors and how do they apply to machine learning?

To consider the question of what vectors are, it helps to be a mathematician, or at least someone who’s ...

Catherine Dee

Search and Discovery writer

Why imports are important in JS
engineering

Why imports are important in JS

My first foray into programming was writing Python on a Raspberry Pi to flicker some LED lights — it wasn’t ...

Jaden Baptista

Technical Writer

What is ecommerce? The complete guide
e-commerce

What is ecommerce? The complete guide

How well do you know the world of modern ecommerce?  With retail ecommerce sales having exceeded $5.7 trillion worldwide ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Data is king: The role of data capture and integrity in embracing AI
ai

Data is king: The role of data capture and integrity in embracing AI

In a world of artificial intelligence (AI), data serves as the foundation for machine learning (ML) models to identify trends ...

Alexandra Anghel

Director of AI Engineering

What are data privacy and data security? Why are they  critical for an organization?
product

What are data privacy and data security? Why are they critical for an organization?

Imagine you’re a leading healthcare provider that performs extensive data collection as part of your patient management. You’re ...

Catherine Dee

Search and Discovery writer

Achieving digital excellence: Algolia's insights from the GDS Retail Digital Summit
e-commerce

Achieving digital excellence: Algolia's insights from the GDS Retail Digital Summit

In an era where customer experience reigns supreme, achieving digital excellence is a worthy goal for retail leaders. But what ...

Marissa Wharton

Marketing Content Manager

AI at scale: Managing ML models over time & across use cases
ai

AI at scale: Managing ML models over time & across use cases

Just a few years ago it would have required considerable resources to build a new AI service from scratch. Of ...

Benoit Perrot

VP, Engineering

How continuous learning lets machine learning  provide increasingly accurate predictions and recommendations
ai

How continuous learning lets machine learning provide increasingly accurate predictions and recommendations

What new data points have you learned lately? Learning is never ending (hence the phrase “lifelong learning”), so chances are ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Using personalization to boost ecommerce ROI: trends, facts, tips
e-commerce

Using personalization to boost ecommerce ROI: trends, facts, tips

You love blue. You’ve bought several blue items from a particular up-and-coming brand. You’re also a ...

Catherine Dee

Search and Discovery writer

Looking for something?

facebookfacebooklinkedinlinkedintwittertwittermailmail

At Algolia, our business is more than search and discovery, it’s the continuous improvement of site search. If you use InstantSearch, you already know how flexible it is for creating amazing search experiences. We’ve just added several new features that make it even better. 

Optimistic UI, modern templating, and simplified events give you more control and make outstanding search and a top-notch UX easier to build. Read on for the highlights, or watch the video shared below.

This content was originally presented at Algolia DevCon 2023.

Optimistic UI

Blazing fast search is part of Algolia’s DNA, but sometimes the internet can’t keep pace. If you’re searching on the subway, search speed can suffer.

The solution is optimistic UI. When a searcher clicks or makes a change that initiates a network request, Optimistic UI doesn’t wait for the network request to resolve the UI update. Rather, it assumes what the result will be and applies it. 

When a user clicks on a search component, it launches a network request. When the request comes back, the page is updated with refined filters. With optimistic UI, the page updates instantly with the same refinements based on its optimistic assumption of what the network request will return.

Now, end users get the sense that something’s happening, the assurance that the request is being resolved, and the confidence that refined hits are coming through. And, when the network request does come back, the page is updated with the correct hits and the correct facets.

optimistic UI before/after

Under the hood, the search results are the source of truth. They contain a search state that reflects the current query, current facets, current page, etc. With optimistic UI, whenever a state change initiates a new rendering, we replace that search state with the most current search state. When the network request is returned, the results displayed and the search state are in sync once again. 

Optimistic UI goes even further by dealing with errors. By saving the last valid search state, it can revert to the state that matches the search results displayed. End users benefit from seeing an updated UI where the results and even the URL are in sync, even if they’ve lost their network connection.

In a nutshell, optimistic UI improves the end user search experience in low network conditions. Better yet, it works right out-of-the-box with Algolia’s built-in widgets, and with community and self-made widgets.

Read more about maintaining speed perception with optimistic UI

Modern Templating

Modern templating has always been a feature of InstantSearch, but we’ve made it easier to do more with JavaScript. The new templating is built on HTM and turns HTML as a string into “real” HTML elements. Once introduced into the rest of the application, those elements work much more efficiently. 

There are visible changes as well to components, control flow, and event handlers.

Components

In the previous highlighting solution, you needed to rely on a specific helper to pass parameters. This is not very discoverable. The new templating allows you to interpolate components, autocomplete, validate, and choose correct arguments out-of-the-box. 

code snippet interpolate components

Control flow

Control flow in Hogan.js, the previous templating library, was based on Mustache and was rather complex. The new templating supports real JavaScript inside interpolations and lets you code regular JavaScript methods, such as map(), join(), etc. This update brings added clarity to complicated conditions.

support JavaScript inside interpolations

Event handlers

We’ve simplified the way InstantSearch sends “Insights Events” (network requests related to clicks, conversions, etc.) to Algolia by enabling event handlers to be added as JavaScript. Previous event handlers were added as DOM attributes using globals and JavaScript as a string. Templates can now also directly accept JSX made with Preact.

event handlers

Simplified Events

The previous method for sending Insights Events was fairly complicated. You needed to set up InstantSearch as usual, then instantiate a separate Insights library and link it to InstantSearch to send network requests.

One way to simplify the approach is to automate Insights Events right out-of-the-box. This solution would load the library automatically, set up the user token automatically, set up the middleware automatically, and send Insights Events automatically.

However, our goal is to create the best developer experience (DX) possible. We want developers to decide when they want to send Insights Events. To give developers more control, we placed all these functions behind a single “Insights” option. Now developers no longer need to worry about Insights middleware. But setting “Insights” to true simply loads the Insights library and links it with InstantSearch so it’s ready to use. You can still send Insights Events by regular network request, but more events are now sent by default. 

Insights Events are an indispensable part of InstantSearch. They connect user actions, such as clicks and purchases, to the search results that prompted those actions. These connections create significant feedback loops that generate deeper insights and support the following additional capabilities:

  • A/B Testing: Lets you compare different settings to assess performance and determine which one performs better.
  • Algolia Recommend: Lets you display specific items to users that match their preferences.
  • AI-powered vector search engine: Leverages Insights Events data to drive search and discovery.

To make Insights Events information useful, user tokens are necessary. Different items might be viewed, clicked, and purchased, but it’s important to know that these actions were taken by the same person.

InstantSearch now decouples anonymous user tokens from cookies and saves them automatically across sessions. This update makes it easier to send as many Insights Events as possible. Plus, if you have your own user tokens available, you’ll still be able to link cross-session information together for deeper insights.

Do More with InstantSearch

You may think you know InstantSearch already, but Algolia is always raising the bar. New features bring new benefits, give you more control, and let you serve site visitors better. 

Ready to build more with InstantSearch? To see the new features in action, simply request a demo

About the author
Haroen Viaene

JavaScript Library Developer

githublinkedintwitter

Recommended Articles

Powered byAlgolia Algolia Recommend

Maintaining speed perception with NeuralSearch and optimistic UI
engineering

Sarah Dayan

Principal Software Engineer

5 reasons to add clicks to site search analytics (and code to do it)
product

Alexis Monks
Peter Villani

Alexis Monks &

Peter Villani

Harnessing API’s with React: a different approach
engineering

Alexandre Stanislawski