Search by Algolia
Easily integrate Algolia into native apps with FlutterFlow
engineering

Easily integrate Algolia into native apps with FlutterFlow

Algolia's advanced search capabilities pair seamlessly with iOS or Android Apps when using FlutterFlow. App development and search design ...

Chuck Meyer

Sr. Developer Relations Engineer

Algolia's search propels 1,000s of retailers to Black Friday success
e-commerce

Algolia's search propels 1,000s of retailers to Black Friday success

In the midst of the Black Friday shopping frenzy, Algolia soared to new heights, setting new records and delivering an ...

Bernadette Nixon

Chief Executive Officer and Board Member at Algolia

Generative AI’s impact on the ecommerce industry
ai

Generative AI’s impact on the ecommerce industry

When was your last online shopping trip, and how did it go? For consumers, it’s becoming arguably tougher to ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

What’s the average ecommerce conversion rate and how does yours compare?
e-commerce

What’s the average ecommerce conversion rate and how does yours compare?

Have you put your blood, sweat, and tears into perfecting your online store, only to see your conversion rates stuck ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

What are AI chatbots, how do they work, and how have they impacted ecommerce?
ai

What are AI chatbots, how do they work, and how have they impacted ecommerce?

“Hello, how can I help you today?”  This has to be the most tired, but nevertheless tried-and-true ...

Catherine Dee

Search and Discovery writer

Algolia named a leader in IDC MarketScape
algolia

Algolia named a leader in IDC MarketScape

We are proud to announce that Algolia was named a leader in the IDC Marketscape in the Worldwide General-Purpose ...

John Stewart

VP Corporate Marketing

Mastering the channel shift: How leading distributors provide excellent online buying experiences
e-commerce

Mastering the channel shift: How leading distributors provide excellent online buying experiences

Twice a year, B2B Online brings together America’s leading manufacturers and distributors to uncover learnings and industry trends. This ...

Jack Moberger

Director, Sales Enablement & B2B Practice Leader

Large language models (LLMs) vs generative AI: what’s the difference?
ai

Large language models (LLMs) vs generative AI: what’s the difference?

Generative AI and large language models (LLMs). These two cutting-edge AI technologies sound like totally different, incomparable things. One ...

Catherine Dee

Search and Discovery writer

What is generative AI and how does it work?
ai

What is generative AI and how does it work?

ChatGPT, Bing, Bard, YouChat, DALL-E, Jasper…chances are good you’re leveraging some version of generative artificial intelligence on ...

Catherine Dee

Search and Discovery writer

Feature Spotlight: Query Suggestions
product

Feature Spotlight: Query Suggestions

Your users are spoiled. They’re used to Google’s refined and convenient search interface, so they have high expectations ...

Jaden Baptista

Technical Writer

What does it take to build and train a large language model? An introduction
ai

What does it take to build and train a large language model? An introduction

Imagine if, as your final exam for a computer science class, you had to create a real-world large language ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

The pros and cons of AI language models
ai

The pros and cons of AI language models

What do you think of the OpenAI ChatGPT app and AI language models? There’s lots going on: GPT-3 ...

Catherine Dee

Search and Discovery writer

How AI is transforming merchandising from reactive to proactive
e-commerce

How AI is transforming merchandising from reactive to proactive

In the fast-paced and dynamic realm of digital merchandising, being reactive to customer trends has been the norm. In ...

Lorna Rivera

Staff User Researcher

Top examples of some of the best large language models out there
ai

Top examples of some of the best large language models out there

You’re at a dinner party when the conversation takes a computer-science-y turn. Have you tried ChatGPT? What ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

What are large language models?
ai

What are large language models?

It’s the era of Big Data, and super-sized language models are the latest stars. When it comes to ...

Catherine Dee

Search and Discovery writer

Mobile search done right: Common pitfalls and best practices
ux

Mobile search done right: Common pitfalls and best practices

Did you know that 86% of the global population uses a smartphone? The 7 billion devices connected to the Internet ...

Alexandre Collin

Staff SME Business & Optimization - UI/UX

Cloud Native meetup: Observability & Sustainability
engineering

Cloud Native meetup: Observability & Sustainability

The Cloud Native Foundation is known for being the organization behind Kubernetes and many other Cloud Native tools. To foster ...

Tim Carry

Algolia DocSearch is now free for all docs sites
product

Algolia DocSearch is now free for all docs sites

TL;DR Revamp your technical documentation search experience with DocSearch! Previously only available to open-source projects, we're excited ...

Shane Afsar

Senior Engineering Manager

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