Building data-driven apps with React

new slide, who dis?

Deepak Grover

@metagrover

Senior Frontend Engineer at Appbase

Data driven apps 🤔

Observer Pattern 👀

One-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated accordingly.

Search box

Interaction

Component A

Brand Category

Range Slider

Component B

Component A

Brand Category

more components

Server

New Query

Data

notifies

Elasticsearch 🤘 

Distributed, RESTful search and analytics engine capable of storing, searching, and analyzing big volumes of data quickly (milliseconds)

How to Elasticsearch

  1. Defining data mappings
     
  2. Indexing data
     
  3. Search queries

Mappings

Mapping is the process of defining how a document, and the fields it contains, are stored and indexed.

Indexing data

Elasticsearch queries

Introducing ReactiveSearch âš¡

A React UI components library for building data-driven apps

ReactiveSearch offerings âš¡

  • Easy to setup
  • 30+ UI Components
  • Flexible class injection and theming customisations
  • Query Customisation support
  • Component-to-Component communication
  • Component-to-Server communication
  • Streaming support
  • Creating custom *Reactive* components

Platform agnostic core architecture

Bonus

  • React Native (Same Component API)
     
  • Maps (in alpha)

Catch us in action

@metagrover 👶

Building data-driven apps with React

By Deepak Grover

Building data-driven apps with React

  • 635