ReactiveSearch v2 — UI Components for Elasticsearch 🚀

Image: https://opensource.appbase.io/reactivesearch

Super excited to announce the release of Reactive Search v2, a UI components library for Elasticsearch.

Reactive Search 3.0 is out. Read all about it over here.

What’s Awesome About The v2 Release

1. Connect with any Elasticsearch index — While prior versions only targeted Elasticsearch hosted by appbase.io, starting with v1, an Elasticsearch index hosted anywhere can be connected with the UI components view. We went a step further with this release by releasing a generic middleware example that can be used to connect to any Elasticsearch cluster.
2. 20+ data driven UI components — most comprehensive of any UI components library: Search, Lists, Dates, Range, Result displays. Components are styled and scoped with configurable theming and customizable query syntax.
3. Being used in production today — by consumer facing search apps, in B2B e-commerce settings, as well as internal UIs.
4. Actively developed on Github — Available under Apache 2.0 license, this release includes over 300+ feature additions and issue fixes since the first release.
5. Bring your own components — Starting v2, you can bring your own components into Reactivesearch to take advantage of the reactive state architecture.

You can also check out the intro video.

Who Is This For

If you haven’t been in the loop and are wondering what ReactiveSearch is all about, it is a UI components library for Elasticsearch to build data-driven apps. Some examples:

• a marketplace for connecting sports trainers with interested hobbyists,
• a crypto currency related news links aggregator,
• a business intelligence search platform,
• a social media analytics tool.

…. feeds, chats, you get the idea.

Time to Build Data-Driven Web Apps Today

From our experience in building data-driven apps, the key ingredients required and time frame for each of these are:

It might initially be fun to do the whole app’s wiring yourself, but it is just schlep work that is slow (takes several weeks), expensive (often requires a frontend and/or backend programming expertise) and has less tangible returns than other parts of product development.

ReactiveSearch Time Savings: Go Live In Days 🚀

ReactiveSearch provides scaffolding to build production ready data-driven apps much like Bootstrap and Materialize provide scaffolding to build styles for your website.

We have implemented the above flow over a dozen times using Reactive Search now, and have consistently shipped a production ready UI in timeframes ranging from few days to sometimes even less than a day.

Image: Display of all the UI components that are available.

You can also get our sketch playground template for designing accurate UI flows that use Reactivesearch.

We recommend appbase.io as the place to start experimenting with your Elasticsearch data, it is completely free for datasets of up to 10,000 records, and we have built a plethora of tools that work well with it to support the data-driven app workflow. It also comes with no vendor lock-in: nothing stops you from moving to your own Elasticsearch cluster when you need to.

2. Using ReactiveSearch for building the UI components should be a breeze, and we will make it right if you find otherwise.

• The components handle both the view and state changes directly by connecting with database fields (Elasticsearch in this case),
• 90% of the common querying use-cases are handled using declarative component props. As an example, you can write a search bar UI with an auto-suggestions query using this:

<DataSearch
    componentId="searchUI"
    dataField="places"
    autoSuggest={false}
/>

Image: DataSearch component

• There are 20+ different UI components (and growing) to pick from. From simple text fields to calendars to advanced search UIs: we have it all.

3. The components have already been used in a variety of production scenarios and handle several edge cases.

• Whenever some components are composed together to form a single result view UI, they only register on query on the network. Queries are only made intelligently when there is an actual change in the state.
• Components can be extended with custom styles, allow setting a custom query where one can directly plug in a DSL query, or connect with other external libraries with callback events.

How To Get Started

1. Installation npm install @appbaseio/reactivesearch
2. The ReactiveSearch starter app
3. 7 mins read — Building an e-commerce bookstore app with ReactiveSearch
4. Reactive Manual : Documentation Reference
5. Interactive component playground

Go ★ the project on Github so you can find it when you need to build that awesome search!