How to increase your ecommerce conversion rate in 2024
2%. That’s the average conversion rate for an online store. Unless you’re performing at Amazon’s promoted products ...
Senior Digital Marketing Manager, SEO
2%. That’s the average conversion rate for an online store. Unless you’re performing at Amazon’s promoted products ...
Senior Digital Marketing Manager, SEO
What’s a vector database? And how different is it than a regular-old traditional relational database? If you’re ...
Search and Discovery writer
How do you measure the success of a new feature? How do you test the impact? There are different ways ...
Senior Software Engineer
Algolia's advanced search capabilities pair seamlessly with iOS or Android Apps when using FlutterFlow. App development and search design ...
Sr. Developer Relations Engineer
In the midst of the Black Friday shopping frenzy, Algolia soared to new heights, setting new records and delivering an ...
Chief Executive Officer and Board Member at Algolia
When was your last online shopping trip, and how did it go? For consumers, it’s becoming arguably tougher to ...
Senior Digital Marketing Manager, SEO
Have you put your blood, sweat, and tears into perfecting your online store, only to see your conversion rates stuck ...
Senior Digital Marketing Manager, SEO
“Hello, how can I help you today?” This has to be the most tired, but nevertheless tried-and-true ...
Search and Discovery writer
We are proud to announce that Algolia was named a leader in the IDC Marketscape in the Worldwide General-Purpose ...
VP Corporate Marketing
Twice a year, B2B Online brings together America’s leading manufacturers and distributors to uncover learnings and industry trends. This ...
Director, Sales Enablement & B2B Practice Leader
Generative AI and large language models (LLMs). These two cutting-edge AI technologies sound like totally different, incomparable things. One ...
Search and Discovery writer
ChatGPT, Bing, Bard, YouChat, DALL-E, Jasper…chances are good you’re leveraging some version of generative artificial intelligence on ...
Search and Discovery writer
Your users are spoiled. They’re used to Google’s refined and convenient search interface, so they have high expectations ...
Technical Writer
Imagine if, as your final exam for a computer science class, you had to create a real-world large language ...
Sr. SEO Web Digital Marketing Manager
What do you think of the OpenAI ChatGPT app and AI language models? There’s lots going on: GPT-3 ...
Search and Discovery writer
In the fast-paced and dynamic realm of digital merchandising, being reactive to customer trends has been the norm. In ...
Staff User Researcher
You’re at a dinner party when the conversation takes a computer-science-y turn. Have you tried ChatGPT? What ...
Sr. SEO Web Digital Marketing Manager
It’s the era of Big Data, and super-sized language models are the latest stars. When it comes to ...
Search and Discovery writer
Today we are launching react-instantsearch, a new library to build search interfaces with Algolia in React and React native. This new way of implementing Algolia brings ideas that go beyond the creation of widgets using React – we think they will fundamentally influence the way the JS community builds UI libraries!
A year ago we launched instantsearch.js, in order to provide an easy solution for building search interfaces The project now has more than 1000 stars on github and 1500 users, far exceeding our expectations. With the release of instantsearch.js, we tried to help front-end engineers as much as possible and because the framework war was roaring hard back then, we went for the universal choice: Vanilla JS.
It was our first take at building a complete widget library for building search UI’s. With it, we tackled the problems that our users found when building a search interface, namely the lack of packaged options for search UX patterns, and the cumbersome mapping of concepts from the search realm to the UI realm.
To tackle those issues, we took the vanilla JS / framework “agnostic” approach. We created a light framework to be able to consolidate all the search parameters that each widget can set. Our final product was a drop-in search addon for all JS front-ends; however, this light framework is nothing without the widgets that are included. Each of them provides options to customise the search behavior and also their UI – it turns out, you can never provide enough options for UI and behavior.
“You can never provide enough options”
We started with fixed markup, but this was not enough because you might want to use a specific CSS library with its own markup. So we added the ability to customize some parts of the UI with templates, but this wasn’t enough because users wanted customization across the board. We added the possibility to manipulate bigger chunks of the UI, but this created inconsistencies with our own expectations for the markup which led to more options… in the end, the more options you provide, the more complexity you create.
Complexity has two faces. First, it makes it harder to deal with inconsistencies and bugs. Second, it creates API noise. Dealing with inconsistencies and bugs is hard but it’s always a matter of how much you work on it, and eventually it’ll be fixed. On the other hand, the more options you have, the harder it will be to grasp what are the important or critical options. The amount of options creates an artificial sense of complexity, users get the impression that the learning curve is steep. They had to dig through all the options to find the one they need.
Overall the API created for supporting UI options made the library harder to learn and use, and therefore the developer experience suffered from it.
We began to wonder ”What if we could separate the two, and provide options that are only meaningful for the search and limit the UI options?” – this is how react-instantsearch was born.
Decouple search logic from rendering
From the outside, react-instantsearch shares the same philosophy as instantsearch.js. It provides widgets, and each will handle a single part of the search UI. The combination of widgets makes up a search query to Algolia, which in turn updates the UI with new results, which in turn allows the user to further refine the search. Unlike its cousin, however, react-instantsearch handles customization by giving developers complete control over the rendering – the result is worth taking a look at:
react-instantsearch is made of a root component <InstantSearch> and other UI components that we call widgets. These widgets are the composition of a dumb react component with a business logic counterpart called connectors.
And this is where the true originality of react-instantsearch is.
Connectors are higher order components that provides a dual API. For the wrapped component, it exposes the minimal API necessary to let it do what it is supposed to do: set and read the query if it’s a SearchBox, or set filters and get the filter values if it’s a RefinementList. For example, a minimalist implementation of a custom SearchBox would be:
The connector also provides an external API that let the developer set the search settings relevant to the concerned domain. For example, the `hitsPerPage` parameter is set on the Hits widget but is used by the connector to set the number of results to display on a single page.
Now we have a clear and powerful API that provides all manners of customization for developers, and at the same time we can provide ready-to-use widgets that have limited options for UI tweaks. Our widgets are the results of our collective experience with search UX and what we’ve learned from users.
The end result is that beginner users are not left wondering what kind of experience they should implement, while experienced developers can adapt their search experience accordingly. Developers looking for a quick & powerful solution will find exactly that with react-instantsearch – the deeper they dive, the more they will uncover its flexible underbelly by overriding the defaults we provide .
react-instantsearch is a dual-faceted API:
A glimpse of the future for service based UI’s
Algolia is, at its core, a search engine. UI&UX are very important elements that make for a great implementation and differentiate an unused search bar from a central navigation tool. Those improvements are very prominent when binding the search capabilities of an engine to the UI.
This new “flavor” of instantsearch provides more for the UI by channeling the capabilities of the search into abstract widgets. We provide our way of doing those implementations, but we also let you implement new UI widgets through the prism of our experience on how to use our engine.
If you want to have a look at what the next version of instantsearch.js will look like, try react-instantsearch and let us know if we have the right balance of feature and customization (on twitter, gitter or by email).
As a final word, we would like to express our sincerest gratitude to Alexandre Kirszenberg who built the initial POC during his summer internship. Thanks!!!
Powered by Algolia Recommend