Choose the right approach
Choose the right approach
Coveo provides a number of frameworks and REST APIs to build a search interface. Which framework and/or REST API is the best for you depends on your business needs, desired performance, complexity, etc.
Which is the best approach?
|
These two diagrams show that Atomic might be the best choice if performance, development speed, and customization are equally important for you. If you rather need to quickly create a simple search interface, especially for test or demo purposes, the search interface builder, which uses the Atomic library, is an ideal, codeless alternative. |
The comparison matrix
The following matrix presents an in-depth comparison of the tools that we provide.
|
|
The stars in this table are score points. The higher, the better. The bottom row shows the total score for each tool. |
| Search interface builder | Atomic | Headless | JS Search Framework | REST API | |
|---|---|---|---|---|---|
Programming Skills Required |
None ⭐⭐⭐ |
Low ⭐⭐⭐ |
Medium ⭐⭐ |
Low ⭐⭐⭐ |
High ⭐ |
Performance |
High ⭐⭐ |
High ⭐⭐ |
High ⭐⭐ |
Medium ⭐ |
N/A — |
Bundle Size |
N/A — |
Light ⭐⭐ |
Light ⭐⭐ |
Heavy ⭐ |
N/A — |
Pre-built Components |
Yes ⭐ |
Yes ⭐ |
No — |
Yes ⭐ |
No — |
Server-side Rendering |
Yes ⭐ |
Yes ⭐ |
Yes ⭐ |
No — |
N/A — |
UI/UX Customization |
Low ⭐ |
Medium ⭐⭐ |
High ⭐⭐⭐ |
Low ⭐ |
High ⭐⭐⭐ |
Analytics |
Included ⭐ |
Included ⭐ |
Included ⭐ |
Included ⭐ |
Excluded / DIY — |
Time to Build a Search Interface |
Minutes ⭐⭐⭐ |
Days ⭐⭐⭐ |
Days to Weeks ⭐⭐ |
Days ⭐⭐⭐ |
Months ⭐ |
Score |
12 pts |
15 pts |
13 pts |
11 pts |
5 pts |
See the dedicated sections below for details on each approach.
|
Combining the JS Search Framework and Atomic
We strongly recommend against using both the JavaScript Search Framework and Atomic in the long term unless absolutely required. If you use these two frameworks at the same time, you’re likely to face inconsistency-related issues in the long term. |
Search interface builder (recommended)
Coveo’s search interface builder is available via the Search Pages (platform-ca | platform-eu | platform-au) page of the Coveo Administration Console and works with the Atomic library. It lets you create a simple search interface in a few minutes without writing any code.
The builder lets you create hosted search pages, which makes them ideal for test or demo purposes. You can share a link to your search page with anyone, even people who don’t have access to the Coveo Administration Console.
Hosted search pages can easily be consumed using the atomic-simple-builder component.
Should you want to create a custom search interface, however, you should opt for Atomic or another library or framework. You can use an Atomic hosted search page created with the builder and customize it further using the Coveo CLI.
| Pros | Cons |
|---|---|
Requires no programming skills. |
Limited UI/UX customization. |
Lets you create a basic search interface within minutes. |
|
|
If you have the Enterprise edition, group your hosted search page and your other implementation resources together in a project. See Manage projects. |
Atomic library (recommended)
Atomic is a collection of pre-built UI components meant to quickly create versatile search interfaces. You can theme and customize the Atomic components to suit your needs. Under the hood, Atomic relies on the Coveo Headless library to interface with Coveo and handle the search application state.
The Coveo CLI supports a variety of Atomic search page development and deployment flows. For example, you can:
-
Download a hosted search page as a starting point.
-
Customize the search page locally and deploy it to your Coveo organization.
-
Consume your hosted search page using the the
atomic-hosted-pagecomponent.
| Pros | Cons |
|---|---|
Requires minimal programming skills. |
Coupling between the UI and business logic. |
Faster to build than the JavaScript Search Framework. |
|
Both browser and mobile compatible. |
|
Lightweight and higher performance than the JavaScript Search Framework. |
|
Extendable through custom components. |
Atomic library resources
-
To get up and running quickly with Atomic, see the Level Up Coveo Atomic Tutorial.
-
Coveo provides code samples in React, Angular, Next.js, and Vue.js in its Coveo ui-kit repository.
-
For Atomic library reference documentation, see Use the Atomic library.
-
See the blueprint of a search interface example implementation in the We.Retail demo site.
Headless library
The Headless library is a Redux-based toolset for developing your own search UI component libraries. It provides the underlying functionality of the Atomic library or of the JavaScript Search Framework without tying that functionality to a specific UI implementation.
See Use the Coveo Headless library for details.
| Pros | Cons |
|---|---|
Usable in any environment that can run JavaScript. |
Requires advanced programming skills. |
Extendable through custom middlewares and reducers. |
JavaScript Search Framework
The JavaScript Search Framework is a UI component library that you can use to assemble feature-rich search interfaces. It’s both customizable and extendable to suit your individual use cases.
See Use the Coveo JavaScript Search Framework (legacy) for details.
| Pros | Cons |
|---|---|
Customizable through styling. |
Only suitable for building web-based search UIs. |
Extendable through custom components. |
Strong coupling between UI and logic layers. |
REST APIs
The Atomic and Headless libraries, as well as the JavaScript Search Framework, are built on top of the Coveo REST APIs. Those APIs are publicly documented, and you can develop directly against them if you need to integrate Coveo search features in an environment that can’t run JavaScript.
See Use the REST APIs to build a search UI for details.
| Pros | Cons |
|---|---|
Flexible. |
Complex. |
Lets you build a Coveo-powered search UI in an environment that can’t run JavaScript. |
Error-prone. |
What’s next?
When you have decided on the framework/API to use, you’re ready to implement your search interface.
Very useful
Not really
Very useful
Not really