The journey to better DX: Create InstantSearch App

InstantSearch by Algolia is a family of frontend libraries to create search UIs on top of Algolia APIs.

Today, we’re introducing Create InstantSearch App: a command-line interface (CLI) to bootstrap InstantSearch applications from the terminal. All you need is Node.js ≥ 8, you don’t need to install anything else.

Create InstantSearch App preview

Why

Developer Experience (DX) has always been in Algolia’s DNA. We constantly want to improve the interaction between developers and our products. A lot of efforts have been spent on the Algolia Dashboard to facilitate your search setup and on our API clients to communicate easily with our servers. On the other hand, our frontend solution to build search interfaces — InstantSearch — yet powerful, is quite complex to get started with.

When only InstantSearch.js was available, kicking a vanilla JavaScript application was pretty straightforward. Now that we support many environments (React, React Native, Vue, Angular, iOS, and Android), you’re likely to spend more time on tooling rather than actual search implementation. We already provide good component primitives to build search UIs, but what could we do better on our side?

We drew inspiration from Facebook and more specifically Create React App — an awesome project that the React team is conducting to improve the React developer experience and onboarding.

Create InstantSearch App lets you focus on your project by taking care of all the tedious and repetitive work, regardless of your ecosystem:

• Do you have a new dataset to use? Run the CLI and enter the credentials to access this dataset.
• Do you have a new client to build a demo for? Run the CLI, enter the application credentials and start building the experience.
• Do you need help from the Algolia team? Use an online template generated by Create InstantSearch App and send it to us! We’ll do our best to help you make your search experience great.

This tool is about actual search implementation rather than the process of building an app. It creates a working UI based on the given information. We’ve been using Create InstantSearch App internally for a few weeks before announcing it and it has immensely improved our productivity.

How we use the tool at Algolia

Help quickly delight users

At Algolia, Solution Engineers are customer-facing engineers building proof of concepts for clients and partners. They often need to create InstantSearch applications, demo and iterate on them. This tool helps them increase the speed of development to showcase what is possible for their business.

Help Algolia help you

Bug reproduction is often the best way to solve issues. Create InstantSearch App allows users to reproduce bugs either:

• Locally: by running the InstantSearch CLI and then hosting their app online
• Online: by using the compiled versions for InstantSearch templates on CodeSandbox (example of InstantSearch.js template)

The latter is now our go-to way to help customers identify issues. We send them a link to the online template, they fork it and showcase the bug. This happens entirely in the browser.

Help you understand InstantSearch

Tooling should never get in the way of new users. While rewriting the entire Algolia documentation, we decided to skip the tooling explanation in all our Getting Started guides and to advocate using Create InstantSearch App. We even used it to bootstrap our new interactive tutorial.

This is only the beginning

Create InstantSearch App is only the beginning of our journey to better frontend DX. We have much more to achieve and are looking forward to sharing more improvements. Meanwhile, give our InstantSearch libraries a try!

npx create-instantsearch-app my-app

You can find the documentation and the source code on GitHub. If you have any feedback don’t hesitate to let us know on Github, tweet to us or comment on this post.