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

    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