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

Back in November 2015, we released InstantSearch.js v1 in order to give you an efficient way to build search UIs. We have received good feedback so far: 1600+ GitHub stars, 600+ upvotes on Product Hunt, and 1700+ live implementations and counting.

Over the last 18 months, we have learned a lot with your feedback, our experience creating other libraries, and with our internal usage of those same libraries.

What we’ve found is that:

  • When it comes to widget customization there are never enough options.
  • The learning curve has one steep jump in it: when you have exhausted the API options, you have to create custom widgets which requires search knowledge.
  • There are some limitations in the current implementation that we want to overcome so that we can confidently continue to improve InstantSearch.js.

We’ve done our best to integrate what we’ve learned into InstantSearch.js v2, which we are releasing today. Here are some of the changes we’ve implemented.

Customization API for widgets

Before getting down to nitty gritty details of this new API, let’s have a look at a practical use case.

Blog layout as of June 2017

 

On our blog we use a menu widget to let the user navigate into the categories. The behavior of this widget works perfectly here because of its unique properties:

  • Only one element can be selected at a time
  • It displays all the values with the counts
  • It also displays a special all item which deselects the current category

This behavior is exactly the same as another well known UI element: the drop-down menu.

Some of you rightfully asked: “Can we render your menu widget as a drop-down element?”

The problem is that the HTML of both UI menu elements is completely different and can’t be expressed as template options. The two widgets’ HTML implementations are very different:

HTML rendering of UI elements: menu widget and a drop-down HTML rendering of the menu widget and a drop-down

Reflecting on that, we would have to either:

  • Add a “renderAsSelect” option to the InstantSearch.js menu widget
  • Provide a menuSelect widget (we even considered a PR for that)

But adding more options does not make an API any good. This problem is actually deeper and can be phrased as:

“How can I precisely control the rendering of InstantSearch.js widgets?”

As we discussed during our release of react-instantsearch earlier this year, widgets are made up of two parts:

  • Search business logic, which deals with the Algolia engine
  • Rendering logic, which renders the UI and handles the user interactions

With the connectors API, we abstracted the search business logic into its own API, making it easier than ever for you to precisely control the rendering of any widget. The default IntantSearch.js widgets are implementations of their respective connectors.

Example usage:

The connector handles the business logic and exposes a simplified API to the rendering function (items, refine, widget parameters). In this case, it receives a function to change the currently selected value and the list of options to display. This makes the core logic of a widget easily reusable.

In v2, all the built-in widgets with a UI rendering now have their own connector. Because this is a significant change in the way the library is used, we needed to rethink the documentation:

Revamping the documentation

In v1, the documentation layout was a single page with multiple columns. Visually it looked great but when the API grew, some issues started popping up:

  • The content felt constrained and was hard to scroll through
  • It was hard to find space for new topics

After InstantSearch.js v1, we iterated a lot on our other documentation websites: places, JS Helper, React InstantSearch. With this knowledge and experience, we found that the best way of organizing documentation for libraries like ours is having multiple pages. For InstantSearch.js v2, we are introducing getting started and guides, and we are reorganizing the API reference into independent sections.

API documentation best practices

The getting started tutorial is the part that helps our new users most. Making it a prominent part of the navigation easily orients them. This is where we want to provide a good overview and real learning value.

Guides are also very important because we found that you can only do so much with an API. Guides provide a framework to users whose use cases may be too niche or advanced to use an obvious solution.  

Finally, we kept and split up the API reference. Like we’ve done since InstantSearch.js v1, this part is completely built on top of the code documentation (jsdoc). We even go to the point of using it to create pseudocode examples to explain the API.

To learn more about what we think about documentation, read the blog post that we wrote about the user’s journey learning a library.

Building for the future

For the last part of this release, we also wanted to make sure that we are going to be able to continue to improve the library during this major version’s lifecycle. For this, we had to introduce a few breaking changes. All of them are documented in the migration guide.

Other notable changes:

  • InstantSearch.js now ships a simple and effective theme for all widgets ?
  • The slider is now based on AirBnB’s rheostat slider ?
  • The build is now 33% smaller and uses preact internally ?
  • The searchFunction (an advanced feature) has been improved. It now has all the methods ?

Final word

With this version, we want to:

  • Give you more power to customize widgets
  • Simplify the project to new users
  • Make the core of InstantSearch.js future proof

InstantSearch.js v2 is available and you can try it now:

As always with Algolia, your feedback is key to provide you the best tools. Encountering a bug? Open a GitHub issue, Want to showcase your awesome InstantSearch.js website? Post it to our forum and get expert feedback from our community.

 

About the author
Alexandre Stanislawski

Algolia documentation

It's extensive, clear, and, of course, searchable.

Read the docs
Algolia documentation

Recommended Articles

Powered byAlgolia Algolia Recommend

Harnessing API’s with React: a different approach
engineering

Alexandre Stanislawski

Announcing instantsearch.js: Everything you need for great search in one library
product

Alexandre Stanislawski

The guiding principles of InstantSearch
product

Jaden Baptista

Technical Writer