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

Realtime data on the JAMstack

Realtime data on the JAMstack

Slidedeck presented at a webinar run by Daniel from Strapi. Check out the recording here: https://www.youtube.com/watch?v=CGW3ui3BuXo

Srushtika Neelakantam

August 04, 2021
Tweet

More Decks by Srushtika Neelakantam

Other Decks in Technology

Transcript

  1. REALTIME DATA ON
    THE JAMSTACK
    with Srushtika from Ably and Daniel from Strapi

    View Slide

  2. DevRel and Partner Engineer for Ably Realtime
    sRUSHTIKA NEELAKANTAM
    Developer Relations Lead for Strapi
    Daniel Madalitso phiri
    INTROS!

    View Slide

  3. Quick introduction and major
    misconceptions
    A live demo of the watch party
    app built in NuxtJS
    What is jamstack
    WATCH PARTY DEMO
    WHAT WILL WE COVER
    01.
    02.
    App architecture
    ABLY AND STRAPI
    CODE WALKTHROUGH
    Understanding which piece fits
    where and how it all works together
    Diving into the GitHub repo
    Key realtime and CMS concepts
    03.
    04.
    05.
    Polls and q/a throughout
    @Srushtika | @ablyrealtime | @malgamves | @strapijs

    View Slide

  4. What is jAMSTACK
    Quick introduction and major misconceptions
    01.
    @Srushtika | @ablyrealtime | @malgamves | @strapijs

    View Slide

  5. J
    A
    m
    Javascript
    APIs
    Markup
    @Srushtika | @ablyrealtime | @malgamves | @strapijs

    View Slide

  6. Traditional
    tRADITIONAL WEBSITES VS JAMSTACK
    Web browser CDN Load balancer Web server Database/ SaaS
    Web browser CDN
    JAMstack
    Original explanation credits to
    Phil Hawksworth @philhawksworth
    @Srushtika | @ablyrealtime | @malgamves | @strapijs

    View Slide

  7. Are jamstack sites static or dynamic?
    yes
    @Srushtika | @ablyrealtime | @malgamves | @strapijs

    View Slide

  8. LOADING…
    https://jamstack-watch-party.ably.dev/
    dEMO!
    @Srushtika | @ablyrealtime | @malgamves | @strapijs

    View Slide

  9. Understanding which piece fits
    where in the watch party and
    how it all works together
    architecture
    02.
    @Srushtika | @ablyrealtime | @malgamves | @strapijs

    View Slide

  10. Watch party app architecture
    @Srushtika | @ablyrealtime | @malgamves | @strapijs

    View Slide

  11. Ably and strapi
    Key realtime and CMS concepts
    03.
    @Srushtika | @ablyrealtime | @malgamves | @strapijs

    View Slide

  12. Ably
    A suite of simple APIs to develop powerful realtime experiences
    @Srushtika | @ablyrealtime | @malgamves | @strapijs

    View Slide

  13. HTTP REQUEST/RESPONSE CYCLES
    Websockets persistent connection
    @Srushtika | @ablyrealtime | @malgamves | @strapijs

    View Slide

  14. Pub/sub messaging pattern
    NEPTUNE
    MERCURY
    MARS
    Neptune is the farthest planet
    from the Sun
    Mercury is the closest planet to
    the Sun
    Mars is a cold place. It’s full of
    iron oxide dust
    If you want to modify these graphs, click on them,
    follow the link, change the data and replace them
    Pub/Sub
    platform
    Ably
    @Srushtika | @ablyrealtime | @malgamves | @strapijs

    View Slide

  15. Watch party app architecture
    @Srushtika | @ablyrealtime | @malgamves | @strapijs

    View Slide

  16. STrapi
    The Open Source Headless CMS
    @Srushtika | @ablyrealtime | @malgamves | @strapijs

    View Slide

  17. Strapi is a Headless CMS
    Open source.
    100% JavaScript.
    Customizable. Self-hosted.
    Plugins system. GraphQL.
    its..
    @Srushtika | @ablyrealtime | @malgamves | @strapijs

    View Slide

  18. Headless means we deliver content to any frontend via an
    API
    Content
    @Srushtika | @ablyrealtime | @malgamves | @strapijs

    View Slide

  19. wE USE sTRAPI TO
    MANAGE OUR APP
    CONTENT
    STRAPI LETS US ADD STORAGE AND UPLOAD
    PROVIDERS SO FOR OUR APP WE USE
    CLOUDINARY AS A VIDEO STORAGE SOLUTION
    img.jpg
    @Srushtika | @ablyrealtime | @malgamves | @strapijs

    View Slide

  20. Let’s dive into the GitHub repo
    CODE
    WALKTHROUGH
    04.
    @Srushtika | @ablyrealtime | @malgamves | @strapijs

    View Slide

  21. CREDITS: This presentation template was created by Slidesgo, including icons by
    Flaticon, and infographics & images by Freepik
    THANKS!
    Reach out to us via Twitter
    @Srushtika and @malgamves
    DO YOU HAVE ANY QUESTIONS?
    FINISHED!

    View Slide