Building data-driven apps with

 

ReactiveSearch

Kuldeep Saxena

@bietkul

Senior Software Engineer @Appbase.io
worked @GeekyAnts 

Data-driven apps 🤔

E-Commerce

Observer Pattern 👀

1. One-to-many dependency

2. Notify state updates to dependents 

Search for something ...

iphne

Sorry, no results found.

iphne

Elasticsearch 🤘 

Elasticsearch 🤘 

  • Search and analytics engine

Elasticsearch 🤘 

  • Search and analytics engine
     
  • Storing

Elasticsearch 🤘 

  • Search and analytics engine
     
  • Storing
     
  • Searching

Elasticsearch 🤘 

  • Search and analytics engine
     
  • Storing
     
  • Searching
     
  • Analyzing

Why Elasticsearch?

  1. Powerful Query DSL

Why Elasticsearch?

Why Elasticsearch?

  1. Powerful Query DSL
     
  2. Data aggregations

Why Elasticsearch?

  1. Powerful Query DSL
     
  2. Data aggregations
     
  3. Textual Search

Why Elasticsearch?

  1. Powerful Query DSL
     
  2. Data aggregations
     
  3. Textual Search
     
  4. Geo Search

Elasticsearch Index

Elasticsearch queries

Challenges

1. Observer pattern

2. Elasticsearch communication 

ReactiveSearch ⚡

A UI components library for building data-driven apps with ElasticSearch

ReactiveSearch works with any ElasticSearch index hosted anywhere.

How to ReactiveSearch?

<ReactiveBase
  app="ELASTICSEARCH_INDEX"
  credentials="AUTH_CREDENTIALS"
>
 Hello 👋 ReactFoo!
</ReactiveBase>

One time setup

<DataSearch
  componentId="BookSearch"
  dataField="original_title"
/>

Search component

<ReactiveList
 componentId="SearchResult"
 dataField="original_title"
 renderItem={item => (
   <ResultList key={item._id}>
    <ResultList.Image src={item.image} />
    <ResultList.Content>
     <ResultList.Title>
      {item.original_title}
     </ResultList.Title>
    <ResultList.Description>
     <div>by {item.authors}</div>
     <div>({item.average_rating} avg)</div>
     <span>
      Pub {item.original_publication_year}
     </span>
    </ResultList.Description>
   </ResultList.Content>
  </ResultList>
 )}
/>

Result component

<MultiList
  componentId="AuthorFilter"
  dataField="authors.raw"
/>

MultiList Filter

<ReactiveList
 componentId="SearchResult"
 dataField="original_title"
 renderItem={item => (
  <div>Some JSX stuff</div>)
 }
/>

Reactive design Pattern

<DataSearch
  componentId="BookSearch"
  dataField="original_title"
/>

No dependency

<ReactiveList
 componentId="SearchResult"
 react={{
   and: "BookSearch"
 }}
 dataField="original_title"
 renderItem={item => (
  <div>Some JSX stuff</div>)
 }
/>

Reactive design Pattern

<DataSearch
  componentId="BookSearch"
  dataField="original_title"
/>

1:1 dependency

Bookstore Demo 

https://github.com/bietkul/book-search-demo

Another component library?

Component-component communication

Component-server communication

You don't need to be a search expert.

ReactiveSearch offerings ⚡

25+ UI components

Flexible class injection and theming customizations

Flexible class injection and theming customizations

  • Customize with className and style props

Flexible class injection and theming customizations

  • Customize with className and style props
  • Style sub-components with innerClass prop

Flexible class injection and theming customizations

<Reactivebase
 theme={{
  typography: {
   fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Noto Sans", "Ubuntu", "Droid Sans", "Helvetica Neue", sans-serif',
   fontSize: '16px',
  },
  colors: {
   textColor: '#424242',
   primaryTextColor: '#fff',
   primaryColor: '#0B6AFF',
   titleColor: '#424242',
   alertColor: '#d9534f',
  }
 }}
/>

Query Customisation support

<MultiList
 customQuery={() => ({
  timeout: "1s",
  query: {
   term: { country: "IN" }
  }
 })}
/>

Server Side Rendering

Creating custom *Reactive* components

<ReactiveComponent
 componentId="ColorPicker"
 defaultQuery={() => ({
  aggs: {
   color: {
    terms: {
	 field: 'color',
    },
   },
  },
 })}
 render={({ aggregations, setQuery }) => (
  <ColorPickerWrapper
   aggregations={aggregations}
   setQuery={setQuery} 
  />
 )}
/>

Time saving

Build a prototype in just few minutes

Reactive X

React Native

Reactive Maps

Vue (beta)

What's new in 3.0?

  • Voice Search
     
  • GraphQL support
     
  • Accessibility enhancements

Similar Projects

Similar Projects

1. InstantSearch

Similar Projects

1. InstantSearch

2. SearchKit

Used by these awesome folks

References

Catch us in action

github.com/appbaseio/reactivesearch 🎉

@bietkul 👶

Thanks 🙂

https://slides.com/kuldepsaxena/building-data-driven-apps-with-reactivesearch

Made with Slides.com