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
  2. DevRel and Partner Engineer for Ably Realtime sRUSHTIKA NEELAKANTAM Developer

    Relations Lead for Strapi Daniel Madalitso phiri INTROS!
  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
  4. What is jAMSTACK Quick introduction and major misconceptions 01. @Srushtika

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

    @malgamves | @strapijs
  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
  7. Are jamstack sites static or dynamic? yes @Srushtika | @ablyrealtime

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

  9. Understanding which piece fits where in the watch party and

    how it all works together architecture 02. @Srushtika | @ablyrealtime | @malgamves | @strapijs
  10. Watch party app architecture @Srushtika | @ablyrealtime | @malgamves |

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

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

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

    @malgamves | @strapijs
  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
  15. Watch party app architecture @Srushtika | @ablyrealtime | @malgamves |

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

    @malgamves | @strapijs
  17. Strapi is a Headless CMS Open source. 100% JavaScript. Customizable.

    Self-hosted. Plugins system. GraphQL. its.. @Srushtika | @ablyrealtime | @malgamves | @strapijs
  18. Headless means we deliver content to any frontend via an

    API Content @Srushtika | @ablyrealtime | @malgamves | @strapijs
  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
  20. Let’s dive into the GitHub repo CODE WALKTHROUGH 04. @Srushtika

    | @ablyrealtime | @malgamves | @strapijs
  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!