Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Sahan Serasinghe

August 21, 2022
Tweet

More Decks by Sahan Serasinghe

Other Decks in Technology

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