ReactFoo Delhi

On React, performance and front-end engineering

Tickets

Building data-driven apps with ReactiveSearch

Submitted by Kuldeep Saxena (@bietkul) on Monday, 12 August 2019

Section: Full talk (40 mins) Technical level: Intermediate Duration: 40 mins full talk

View proposal in schedule

Abstract

ElasticSearch is a blazing fast, open-source, full-text search engine. It allows you to store, search, and analyze big volumes of data quickly (we are talking milliseconds here). It is generally used as the underlying engine/technology that powers applications that have complex search features and requirements.
With Elasticsearch, you can build a fast search utilizing its powerful Query DSL. However, setting up Elasticsearch correctly requires a lot of work. For instance, the data mapping, analyzers, and tokenizers need to be set correctly or you may not receive accurate search results back. Besides, the more filters that get applied along with the search query, the more complex the resulting search query becomes.

We have built some open-source tools to help you do all these things with the matter of some clicks.
Tool to add data into Elasticsearch — Importer
Tool to view Elasticsearch data like an excel sheet — Data Browser
Tool to generate relevant Elasticsearch queries easily — Query Builder
Tool to build UI components with an Elasticsearch backend — Reactive Search (we will be talking about this in the talk).

Reactive Search is an open-source library which offers a range of rich and highly customizable UI components that can connect with an Elasticsearch index hosted anywhere. You can create amazing UIs with a declarative syntax, which can be extended with ElasticSearch’s Query DSL.

Who should attend?
- Have you ever wanted a blazing fast search with a combination of esoteric filters(fuzzy, geo, terms, range, multiple items)?
- Are you looking for a solution which can save time by providing an out of the box search experience?
- Are you already familiar with ReactiveSearch and want to learn more?
- Are you interested in what we’re building next & upcoming features in ReactiveSearch 3.0?

Outline

  1. Introduction to Data-Driven apps
  2. How to Elasticsearch?
  3. Introduction to ReactiveSearch
  4. A demo app with explanation
  5. ReactiveSearch Architecture
  6. ReactiveSearch Ecosystem (Maps, Vue & React-Native)
  7. Q&A

Requirements

None

Speaker bio

I have an experience of 3+ years with some cool startups and latest tech stack like ReactJS, ReactNative, VueJS and NodeJs etc.
As a full-stack developer, I love to do experiments with the latest web technologies, nowadays I’m exploring golang.

I am working with Appbase.io & previously worked at GeekyAnts.

There is a special place in my heart for the OSS, you can check some of the popular open-source contributions by me:
- https://github.com/appbaseio/reactivesearch
- https://github.com/bietkul/react-reactive-form
- https://github.com/bietkul/react-native-form-builder

Links

Slides

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

Comments

  • Zainab Bawa (@zainabbawa) Reviewer 2 months ago

    Thanks for the submission, Kuldeep. I have some questions for your proposal:

    1. ReactiveSearch has been created by Appbase.io. Does this make the proposal a pitch for Appbase.io’s offerings?
    2. Why should a developer pick ReactiveSearch? What pain points does ReactiveSearch solve?
    3. What are similar tools/solutions and how does ReactiveSearch compare with such tools/solutions?
    4. What is the one big win of ReactiveSearch’s innovation?
    5. Do you have implementation case studies of organizations that have used ReactiveSearch? If yes, show before-after comparisons in terms of what was the organization’s status before using ReactiveSearch and what is the situation after use? What got compromised in the process of using ReactiveSearch?

    Look forward to your responses.

    • Kuldeep Saxena (@bietkul) Proposer 2 months ago

      Thanks for the reply, please find the answers of your questions.

      1. ReactiveSearch has been created by Appbase.io. Does this make the proposal a pitch for Appbase.io’s offerings?

        ⇒ No, ReactiveSearch is an Apache 2.0 licensed project. It’s a UI components library for building modern search interfaces and supports an ElasticSearch based backend (ElasticSearch is the #1 search engine which is open-source: There are are about 20 different hosting providers for it. You can also host it yourself)

        ⇒ The talk is focused on ReactiveSearch and how it enables developers to build modern search interfaces.

        My talk will include a note on the ElasticSearch hosting options as that’s a pre-requisite to using ReactiveSearch. It will include appbase.io as well as some other prominent options and a brief note on the pros/cons of them. This is however a very small (but important) part of the talk, and should take a few mins to go over.

      2. Why should a developer pick ReactiveSearch? What pain points does ReactiveSearch solve?

        ⇒ ReactiveSearch enables building search UIs (aka data-driven apps) rapidly. The project was aimed at React developers to begin with, but today, we offers versions for Vue.JS, React Native and are planning to expand to other frameworks as well.

        ⇒ ReactiveSearch works with any ElasticSearch index hosted anywhere.

        ⇒ Typically, building a search UI requires understanding the search engine terminologies. Relevance tuning is hard. Queries are not intuitive. Building a user facing interface web/mobile responsive takes weeks.

        ⇒ ReactiveSearch takes inspiration from React et al and offers a declarative interface to building search UIs using a component based architecture.

        1. As a frontend developer, this is incredibly empowering as declarative props now allow you to control powerful search querying features.
        2. You don’t need to a search expert. Although if you are, ReactiveSearch doesn’t get in your way. It lets you also write raw Query DSL logic.
        3. You can bring your own design kit. From the very start, our goal has been to enable our users to build consumer facing web apps - and we allow you to bring in your current design kit. ReactiveSearch can mix and match with what you already have.
        4. Now, also available for Vue.JS and React Native.

        ⇒ ReactiveSearch is used by organizations such as US Department of Labor, NASA, Facebook Research as well as hundreds of small and medium sized companies. It’s the leading choice for building search UIs with ElasticSearch today.

      3. What are similar tools/solutions and how does ReactiveSearch compare with such tools/solutions?

        ⇒ InstantSearch is a family of libraries from Algolia that does something similar. In terms of Github stars, ReactiveSearch is more popular than InstantSearch today.

        ⇒ Searchkit is another library for building search UIs with ElasticSearch. However, it’s not maintained and their power users have already migrated to using ReactiveSearch.

      4. What is the one big win of ReactiveSearch’s innovation?

        ⇒ A good way to frame this is in the time savings. It’s unbelievable how quickly a user can go from installing to building a prototype. And this also remains our continuous focus. We have addressed over 1,000 issues from the point where we started building the library initially.

      5. Do you have implementation case studies of organizations that have used ReactiveSearch? If yes, show before-after comparisons in terms of what was the organization’s status before using ReactiveSearch and what is the situation after use? What got compromised in the process of using ReactiveSearch?

        ⇒ Yes. We have case studies with large organisations about their migration to ReactiveSearch. Here are also a couple of live tweets to see how incredible and transformative ReactiveSearch has been for our users.
        “ReactiveSearch is my favorite library in YEARS”
        https://twitter.com/MarcelChastain/status/1167036213603328000
        “I couldn’t have done it without Reactive Search!”

        https://twitter.com/findfehu/status/1171158500711510017

      Looking forward to present the ReactivSearch in JSFoo conference, I’ll update the slides soon.

  • Zainab Bawa (@zainabbawa) Reviewer 18 days ago

    Thanks for yesterday’s rehearsal, Kuldeep. Here is the feedback from yesterday’s rehearsal:

    1. Currently, the talk is a detailed presentation of the documentation of ReactiveSearch. You have to turn this into a pitch about ReactiveSearch and why developers should consider using it.
    2. Explain the problems that ReactiveSearch solves, and why it deserves attention from developers? Draw attention to how ReactiveSearch works with ElasticSearch.
    3. Turn the talk into 15 mins duration where the core idea is to explain the problems that ReactiveSearch solves and why it should be used.
    4. Articulation has to be smoother.

    Add the link to your revised slides by 30 October so that we can conduct a second rehearsal.

  • Zainab Bawa (@zainabbawa) Reviewer 7 days ago

    Hello Kuldeep, what is the status of your revised slides?

  • Kuldeep Saxena (@bietkul) Proposer 6 days ago

    I updated the slides, please find the revised slides by following below link.
    https://slides.com/kuldepsaxena/building-data-driven-apps-with-reactivesearch

  • Raghavendra Satish Peri (@artofvision) 6 days ago

    Hello,
    At hasgeek events we are trying to make our events accessible for people with disabilities. To achieve our goal is to first get the content of presentations accessible. Here is some guidance to make the presentations accessible. Please use these fonts & size so that even able body people can see the content in the auditorium during presentation.

    Fonts and Font Size
    Because they are the easiest to read, only use Sans Serif fonts, such as Arial and Verdana. Since a PowerPoint presentation will most likely be projected onto a large screen consider how far the audience will be from the screen and choose a font size accordingly. The minimum font size for a PowerPoint presentation should be 24 points.

    For more accessibility info on making presentations accessible use the following link
    https://www.framingham.edu/Assets/uploads/about-fsu/accessibility/_documents/7-steps-accessible-ppt.pdf

  • Atishay Baid (@atishaybaid) 6 days ago

    Few feedback points on slides.
    1)Concept and theme of the talk is great.
    2) At the introduction Observer Pattern  slide looks un-clear

    3)the flow of content could be changed, initially instead of introducing with elastic search, you can 1st introduce your open source library, then connect with elastic search briefly

    4)code examples should be added for the feature of library like injection and theming customisations,Query Customisation support etc.Wothout code snippents it would diffult to undertstand the use of this liberary.

    5)you can also add no of GitHub stars and no of downloads.

  • Raghavendra Satish Peri (@artofvision) 5 days ago (edited 5 days ago)

    Hello Kuldeep,
    Here is the feedback, please do the necessary changes in your slides by Nov 9th. All the best for your talk,
    What reactive search does?
    How it is different from other libraries?
    How easy is to implement it?
    Code examples explaining the above
    Live demo or video of of a good & bad example. Demonstrate how reactive search improves things & if we are not using what we lose.
    Too much text on 5-6 slides. Need bullet points
    Add references at end of the slides& your slide link below the thank you note.

    Articulation has to be smoother.

  • Kuldeep Saxena (@bietkul) Proposer a day ago

Login with Twitter or Google to leave a comment