Realtime data on the JAMstack

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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 ﬁts 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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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!