Adding intelligence to React Apps with Azure Cognitive Services | React Global Summit 2022

Transcript

1. INFUSING INTELLIGENCE TO REACT APPS SAHAN SERASINGHE SOFTWARE ENGINEER
2. ABOUT ME Sahan Serasinghe 👨💻‍‍ Software Engineer | GitHub 📣 twitter.com/@_SahanSera ✍ sahansera.dev { https://github.com/sahansera/rgs-2022-demo
3. AGENDA § The “search” problem § Key building blocks § Putting things together § What’s out there? § Reference Architecture § Implementation § Recap § Further improvements https://github.com/sahansera/rgs-2022-demo
4. DEMO CODE github.com/sahansera/rgs-2022-demo https://github.com/sahansera/rgs-2022-demo
5. TYPICAL REACT WEB APP https://github.com/sahansera/rgs-2022-demo
6. https://github.com/sahansera/rgs-2022-demo
7. https://github.com/sahansera/rgs-2022-demo
8. THE PROBLEMS How can you ingest data from many sources? How do you make them searchable? How do you give a great user experience by enriching with additional context? https://github.com/sahansera/rgs-2022-demo
9. KEY BUILDING BLOCKS Data source Search Index Indexer AI enricher https://github.com/sahansera/rgs-2022-demo
10. https://github.com/sahansera/rgs-2022-demo
11. PUTTING THINGS TOGETHER React App Search Index Indexer AI enricher Data source https://github.com/sahansera/rgs-2022-demo
12. WHAT’S OUT THERE? https://github.com/sahansera/rgs-2022-demo
13. MANY OPTIONS • Azure Cognitive Search • AWS Kendra • Algolia • Google Cloud Search • Elasticsearch https://github.com/sahansera/rgs-2022-demo
14. REFERENCE ARCHITECTURE https://github.com/sahansera/rgs-2022-demo
15. https://github.com/sahansera/rgs-2022-demo
16. https://github.com/sahansera/rgs-2022-demo
17. CODING TIME https://github.com/sahansera/rgs-2022-demo
18. RECAP React frontend and with backend Pushed data to a data store Created a pipeline to ingest data Added AI enrichment to the data https://github.com/sahansera/rgs-2022-demo
19. CONSIDERATIONS • Additional datastores • Serverless approach • Azure Functions/AWS Lambda/BaaS • Scalability • Reliability • Pricing https://github.com/sahansera/rgs-2022-demo
20. FURTHER IMPROVEMENTS • Support unstructured data (eg: images, PDFs etc.) • Translations • Custom AI enrichers • Post recommendations https://github.com/sahansera/rgs-2022-demo
21. THANK YOU https://github.com/sahansera/rgs-2022-demo
22. RESOURCES https://github.com/sahansera/rgs-2022-demo • https://nextjs.org/ • https://mantine.dev/ • https://docs.microsoft.com/en-us/azure/search/search- what-is-azure-search • https://aws.amazon.com/kendra/
23. IMAGE CREDITS • Photo by Lorenzo Herrera on Unsplash • Photo by Marius Niveri on Unsplash • Stock images provided by PowerPoint https://github.com/sahansera/rgs-2022-demo