Talk on how to easily integrate elasticsearch with react. Similar process with remapping of the data schema can yield a knowledge discovery and search application for any industry consuming huge amount of structured or unstructured data

1. hybriData.us 1
{elasticsearch X react}

2. CJ Ejimuda
cj@hybriData.us
Full Stack Data Scientist
Msc. Petroleum Engineering - USC
BEngr. Electrical Electronics Engineering - FUTO
Enjoy Soccer / Beach Volleyball at Silicon Beach
hybriData.us 2
A little about me...

3. hybriData.us 3
Outline
● Objectives
● Use cases and more
● Show and tell
● React
● Elasticsearch
● Searchkit
● Live Demo
● Conclusion

4. hybriData.us 4
Why are we here?
● Learn how to easily integrate Elasticsearch with React

5. hybriData.us 5
Few Elasticsearch Use Cases by Industry
● Media and Entertainment: Making it easier to search for the media you are looking for
● Utility: Provide the right energy-saving advice to energy consumers
● Financial Services: Transaction monitoring and error detection ensuring a smooth payment system

6. hybriData.us 6
Some Corporations Running on Elasticsearch / React
Elasticsearch:
● Verizon, Facebook, Cisco, Nasa JPL, Walmart, Warner Bros, Accenture, Sprint, Ebay, BBC, Barclays, Merck,
Nvidia, Fandango, Uber, Tinder, Emerson, Goldman Sachs, Microsoft, Activision, Esri, USGS, Eventbrite,
Adobe, New York Times, Sales force, Netflix, Symantec . . .
React:
● Facebook, Elastic, Instagram, Whatsapp, BBC, Netflix, Dropbox, Coursera, IMDb, PayPal, Dailymotion,
Chrysler, American Express, Intuit, Khan Academy, Lyft, Atlassian, New York Times, Reddit, Airbnb,
Walmart Labs, Tesla, Tencent QQ (with more than 829 million active accounts), Baidu Mobile (with more
than 600 million users), Bloomberg. . .

7. hybriData.us 7
What would it look like?
Source: https://macalicomm.com/2014/04/show-and-tell-for-powerful-content/

8. hybriData.us 8
Tell me more about React?
● Declarative

9. hybriData.us 9
Tell me more about React?
● Declarative
● Component-Based

10. hybriData.us 10
Tell me more about React?
● Declarative
● Component-Based
● Learn Once, Write Anywhere

11. hybriData.us 11
Simple Component (aka Dumb)
Source: https://reactjs.org/

12. hybriData.us 12
Source: https://reactjs.org/
Stateful Component (aka Smart)

13. hybriData.us 13
Components = Application
Source: https://reactjs.org/

14. hybriData.us 14
SearchKit: Baked Elasticsearch React Components
● https://github.com/searchkit/searchkit - teneleven.co.uk
● Don’t Repeat Yourself (DRY)
Source: http://docs.searchkit.co/stable/

15. hybriData.us 15
Elasticsearch Mapping Best Practices

16. hybriData.us 16
Demo

17. hybriData.us 17
High level steps
● Map elasticsearch fields
● Create-react-app (https://github.com/facebookincubator/create-react-app)
$ npm install -g create-react-app
$ create-react-app esxr
$ cd esxr
$ yarn add searchkit
$ yarn start
● Configure Elasticsearch client ( local server / cloud server environment )
● Compose our components
● We are all set!

18. hybriData.us 18
Recap: Summary
● Searchkit makes it easy to integrate Elasticsearch with React
● Why Elasticsearch?
- Scales to terabytes of data with ease and low maintenance
- Logstash, Kibana, Plugins (Kafka,Hadoop, Spark and more plugins)
● Why React?
- Build large-scale applications with data that changes repeatedly over time
- Follows the same design pattern for building native mobile apps (ioS and Android) with
react native

19. hybriData.us 19
Questions?
Thank You!
Please fill out the survey:
https://bit.ly/2iYOV1J
e:cj@hybriData.us
p:213-282-8273

20. hybriData.us 20
Back Up

21. hybriData.us 21
Challenges before React?
● Potential typos leading to less developer productivity
● Slower rendering of DOM
● Search engine failure to read javascript heavy apps

22. hybriData.us 22
Challenges before Elasticsearch?
● Poor user experience
● Tough to ship or analyze logs
● Unable to add database fields because of slow index rebuild speed