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

Transcript

1. INFUSING
   INTELLIGENCE
   TO REACT
   APPS
   SAHAN SERASINGHE
   SOFTWARE ENGINEER
   

   View Slide

2. ABOUT ME
   Sahan Serasinghe
   👨💻‍‍ Software Engineer | GitHub
   📣 twitter.com/@_SahanSera
   ✍ sahansera.dev
   {
   https://github.com/sahansera/rgs-2022-demo
   

   View Slide

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
   

   View Slide

4. DEMO CODE
   github.com/sahansera/rgs-2022-demo
   https://github.com/sahansera/rgs-2022-demo
   

   View Slide

5. TYPICAL REACT
   WEB APP
   https://github.com/sahansera/rgs-2022-demo
   

   View Slide

6. https://github.com/sahansera/rgs-2022-demo
   

   View Slide

7. https://github.com/sahansera/rgs-2022-demo
   

   View Slide

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
   

   View Slide

9. KEY BUILDING BLOCKS
   Data source Search Index Indexer AI enricher
   https://github.com/sahansera/rgs-2022-demo
   

   View Slide

10. https://github.com/sahansera/rgs-2022-demo
    

    View Slide

11. PUTTING THINGS TOGETHER
    React App
    Search Index
    Indexer
    AI enricher
    Data source
    https://github.com/sahansera/rgs-2022-demo
    

    View Slide

12. WHAT’S OUT
    THERE?
    https://github.com/sahansera/rgs-2022-demo
    

    View Slide

13. MANY OPTIONS
    • Azure Cognitive Search
    • AWS Kendra
    • Algolia
    • Google Cloud Search
    • Elasticsearch
    https://github.com/sahansera/rgs-2022-demo
    

    View Slide

14. REFERENCE
    ARCHITECTURE
    https://github.com/sahansera/rgs-2022-demo
    

    View Slide

15. https://github.com/sahansera/rgs-2022-demo
    

    View Slide

16. https://github.com/sahansera/rgs-2022-demo
    

    View Slide

17. CODING TIME
    https://github.com/sahansera/rgs-2022-demo
    

    View Slide

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
    

    View Slide

19. CONSIDERATIONS
    • Additional datastores
    • Serverless approach
    • Azure Functions/AWS Lambda/BaaS
    • Scalability
    • Reliability
    • Pricing
    https://github.com/sahansera/rgs-2022-demo
    

    View Slide

20. FURTHER IMPROVEMENTS
    • Support unstructured data (eg: images, PDFs etc.)
    • Translations
    • Custom AI enrichers
    • Post recommendations
    https://github.com/sahansera/rgs-2022-demo
    

    View Slide

21. THANK YOU
    https://github.com/sahansera/rgs-2022-demo
    

    View Slide

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/
    

    View Slide

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
    

    View Slide