Unleash the Power of the JAMstack

@tpiros Unleash the Power of the JAMstack

@tpiros Unleash the Power of the JAMstack Welcome to the
Space JAM

@tpiros Hi I am  Tamas Piros Developer Evangelist Cloudinary Director
Full Stack Training Google Developer Expert Web Technologies

@tpiros Fresh body, ﬁt mind.

@tpiros Thank you for the standing ovation.

@tpiros What is the JAMstack?

@tpiros JavaScript, APIs, Markup

@tpiros Well, badaaaaa, but what is it really?

@tpiros –Phil Hawksworth (Netlify) “A modern architecture: Create fast, secure
sites and dynamic apps with JavaScript, APIs and pre- rendered Markup, served without web servers.”

@tpiros “A modern architecture: Create fast, secure sites and dynamic
apps with JavaScript, APIs and pre-rendered Markup, served without web servers.”

@tpiros There’s no origin server.

@tpiros Origin Server: Responds to requests arriving from clients. Typically
it’s a computer running a piece of application on it and it’s capable of serving up content.

@tpiros Think about the LAMP stack

@tpiros Think about the LAMP stack On each page request:

PHP gets called

PHP gets called SQL query is made

PHP gets called SQL query is made PHP generates HTML code

PHP gets called SQL query is made PHP generates HTML code HTML sent to browser

PHP gets called SQL query is made PHP generates HTML code HTML sent to browser {

PHP gets called SQL query is made PHP generates HTML code HTML sent to browser { Task of the origin server

@tpiros There are a lot of moving parts.

@tpiros There are a lot of moving parts. Database Queries

Data Movement

Data Movement Code execution

Data Movement Code execution Large attack surface area

Data Movement Code execution Large attack surface area Maintenance? Scaling?

@tpiros Then the MEAN stack came along

@tpiros JavaScript everywhere ™

@tpiros Popularity of Frontend Frameworks = SPAs

@tpiros Browser became the main execution engine.

@tpiros Browser executing a lot of code on each request
= potential bad user experience nearly impossible SEO

@tpiros Along came Server Side Rendering

@tpiros Render HTML on each request server-side, deliver ﬁnal HTML
to browser.

@tpiros Maybe rehydrate for dynamic events…

@tpiros There’s still an origin server to run Node.js.

@tpiros Okay, we get it. There’s an origin server. So
what now?

@tpiros Deploy to an edge server.

@tpiros Edge Server: Set of computers distributed globally, with a
task of delivering content as fast as possible to the closest requesting user. (CDN)

@tpiros CDNs are used to store static assets today.

@tpiros CDNs are used to store static assets today. JavaScript
& CSS

& CSS Cached automatically

& CSS Cached automatically Geographically distributed

& CSS Cached automatically Geographically distributed Served from closest server

& CSS Cached automatically Geographically distributed Served from closest server Automatic scaling & load balancing

@tpiros Why not store HTML on the edge servers?

@tpiros Right. Sounds great, but how would we do that?

@tpiros Instead of rendering at request time, render at build
time.

@tpiros Such HTML can be hosted anywhere.

@tpiros How do we “pre-render markup”?

@tpiros Say hello to Static Site Generators.

@tpiros Say hello to Static Site Generators. Gatsby

@tpiros Say hello to Static Site Generators. Gatsby Nuxt.js

@tpiros Say hello to Static Site Generators. Gatsby Nuxt.js Next.js

VuePress

VuePress Gridsome

VuePress Gridsome 11ty

VuePress Gridsome 11ty Jekyll

VuePress Gridsome 11ty Jekyll Hugo

@tpiros We say static sites, but they aren’t really static.

@tpiros Leverage API Providers

@tpiros Leverage API Providers Payments? Stripe

@tpiros Leverage API Providers Payments? Stripe Images? Cloudinary

@tpiros Leverage API Providers Payments? Stripe Images? Cloudinary SMS Messaging?
Twilio

Twilio Forms? Formspree

Twilio Forms? Formspree E-Commerce? Snipcart

Twilio Forms? Formspree E-Commerce? Snipcart Authentication? Auth0

@tpiros Let these companies do what they do best (and
manage the architecture)

@tpiros Further customisation via Functions As A Service

@tpiros But wait a minute. Where does the data come
from?

@tpiros Headless CMS!

@tpiros Traditional CMS = Coupled content & presentation layer

@tpiros Headless CMS = Decoupled content & presentation layer

@tpiros There are two types: API based and git based.

Strapi - API based

Strapi - API based Netlify CMS - git based (YAML & frontmatter)

Strapi - API based Netlify CMS - git based (YAML & frontmatter) Contentful - API based

Strapi - API based Netlify CMS - git based (YAML & frontmatter) Contentful - API based Cosmic JS - API based

Strapi - API based Netlify CMS - git based (YAML & frontmatter) Contentful - API based Cosmic JS - API based Appernetic - git based

@tpiros Incredible Developer Experience.

@tpiros Easy, atomic deploys.

@tpiros Continuous Integration / Continuous Delivery

@tpiros Use familiar tools. Worry less about infrastructure.

@tpiros No server-side code execution Less attack surface area Better
performance

@tpiros Development and deployment are decoupled.

@tpiros Several beneﬁts to end-users.

@tpiros High Level Overview User Developer CDN hook

@tpiros High Level Overview User Developer Requests a page CDN
hook

@tpiros High Level Overview User Developer Requests a page CDN
git push && commit hook

@tpiros Live Demo!

@tpiros Demo Architecture • Vue & Nuxt.js • Strapi •
Heroku • mLab • Cloudinary • GitHub • Netlify DEV Headless CMS git commit && git push hook Continuous Delivery CDN http/2 git push heroku master Images

@tpiros Resources • Collection of Headless CMS • Collection of
SSG • Cloudinary • Netlify • Nuxt.js • Strapi • PWA Book • Star Wars Strapi CMS • Star Wars Nuxt.js

@tpiros jamstack.training

@tpiros Media Developer Experts Programme https://cloudinary.com/partners/media-developers

@tpiros + Merci vielmal! + @tpiros

Unleash the Power of the JAMstack

Unleash the Power of the JAMstack

More Decks by Tamas

Other Decks in Technology

Featured

Transcript