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
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!