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

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