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

Building a Fully Featured Scalable Chat App - Azure CosmosDBConf 2022

Building a Fully Featured Scalable Chat App - Azure CosmosDBConf 2022

Slides for my session at Azure CosmosDBConf 2022: https://www.youtube.com/watch?v=LpzJTJvH6go

The GitHub repo: https://github.com/ably-labs/fully-featured-scalable-chat-app

Marc Duiker

April 20, 2022
Tweet

More Decks by Marc Duiker

Other Decks in Technology

Transcript

  1. @MarcDuiker
    Marc Duiker
    Sr Developer Advocate

    View full-size slide

  2. @MarcDuiker 3

    View full-size slide

  3. @MarcDuiker 4

    View full-size slide

  4. @MarcDuiker 5

    View full-size slide

  5. @MarcDuiker 6

    View full-size slide

  6. @MarcDuiker 7

    View full-size slide

  7. @MarcDuiker 8

    View full-size slide

  8. @MarcDuiker 9

    View full-size slide

  9. @MarcDuiker 10

    View full-size slide

  10. @MarcDuiker 11
    https://ffs-chat.ably.dev

    View full-size slide

  11. @MarcDuiker 12

    View full-size slide

  12. @MarcDuiker 13
    Docs Code samples

    View full-size slide

  13. @MarcDuiker 14

    View full-size slide

  14. @MarcDuiker 15

    View full-size slide

  15. @MarcDuiker 16

    View full-size slide

  16. @MarcDuiker 17

    View full-size slide

  17. @MarcDuiker 18

    View full-size slide

  18. @MarcDuiker 19
    DAO
    DAO

    View full-size slide

  19. @MarcDuiker 20
    Azure Static
    Web Apps
    React
    Auth Ably CosmosDB Blob Storage
    Azure Functions

    View full-size slide

  20. @MarcDuiker 21
    CosmosDB
    Azure Functions
    Ably
    React
    messages
    channels / users / roles

    View full-size slide

  21. @MarcDuiker 22

    View full-size slide

  22. @MarcDuiker 23
    Ably
    User 1
    User 2
    User 3
    User 4
    Publish

    View full-size slide

  23. @MarcDuiker 24
    Ably
    User 1
    User 2
    User 3
    User 4
    Subscribe
    Subscribe
    Subscribe

    View full-size slide

  24. @MarcDuiker 25
    User 1
    User 2
    User 3
    User 4
    CosmosDB
    POST

    View full-size slide

  25. @MarcDuiker 26
    User 1
    User 2
    User 3
    User 4
    CosmosDB
    GET
    GET
    GET

    View full-size slide

  26. @MarcDuiker 27
    1 + 999 = 1000 messages
    Ably
    Publisher Subscribers
    1
    999
    1000 users in a channel

    View full-size slide

  27. @MarcDuiker 28
    Ably
    Publishers Subscribers
    1000 + 1000 * 999 = 1 million messages
    1000
    999
    1000 users in a channel

    View full-size slide

  28. @MarcDuiker 29
    Ably CosmosDB
    1000 POST
    1000
    Azure Functions
    1000 GET
    1000
    Azure Functions
    1000
    1000 users in a channel

    View full-size slide

  29. @MarcDuiker 31

    View full-size slide

  30. @MarcDuiker 32
    https://cosmos.azure.com/capacitycalculator/

    View full-size slide

  31. @MarcDuiker 33

    View full-size slide

  32. @MarcDuiker 34
    https://www.npmjs.com/package/@azure/static-web-apps-cli

    View full-size slide

  33. @MarcDuiker 35
    https://docs.microsoft.com/en-us/azure/static-web-apps/local-development

    View full-size slide

  34. @MarcDuiker 36
    https://techcommunity.microsoft.com/t5/apps-on-azure-blog/introducing-
    the-azure-static-web-apps-cli/ba-p/2257581

    View full-size slide

  35. @MarcDuiker 37
    https://docs.microsoft.com/en-us/azure/cosmos-db/local-emulator

    View full-size slide

  36. @MarcDuiker 38
    https://docs.microsoft.com/en-us/azure/cosmos-db/local-emulator

    View full-size slide

  37. @MarcDuiker 39

    View full-size slide

  38. @MarcDuiker 40
    https://github.com/features/codespaces

    View full-size slide

  39. @MarcDuiker 41
    https://github.com/features/codespaces

    View full-size slide

  40. @MarcDuiker 42

    View full-size slide

  41. @MarcDuiker 43

    View full-size slide

  42. @MarcDuiker 44

    View full-size slide

  43. @MarcDuiker
    - Chat moderation
    - Search
    - Media previews
    - Private messaging
    - New ideas?
    https://github.com/ably-labs/fully-
    featured-scalable-chat-app

    View full-size slide

  44. @MarcDuiker 46
    @marcduiker
    Ably Discord:
    https://discord.gg/q89gDHZcBK

    View full-size slide