The Almighty JAMstack

THE ALMIGHTY JAMSTACK Jamie Bradley @jamiebradley234 https://jamiebradley.dev https://endeavour.digital

HELLO!

HELLO! UI Engineer

HELLO! UI Engineer Failed Musician

HELLO! UI Engineer Failed Musician Founder of Endeavour Digital

HELLO! UI Engineer Failed Musician Founder of Endeavour Digital Huge fan of JAMstack!

WHAT WE’LL BE COVERING

WHAT WE’LL BE COVERING What is JAMstack?

WHAT WE’LL BE COVERING What is JAMstack? Advantages/Disadvantages

WHAT WE’LL BE COVERING What is JAMstack? Advantages/Disadvantages Examples of JAMstack

WHAT WE’LL BE COVERING What is JAMstack? Advantages/Disadvantages Examples of JAMstack How to Get Started with JAMstack

WHAT IS JAMSTACK?

WHAT IS JAMSTACK ” A modern architecture — Create fast and secure sites and dynamic apps with JavaScript, APIs, and prerendered Markup, served without web servers. ” https://jamstack.org

JAMSTACK JAMSTACK

“…SERVED WITHOUT WEB SERVERS”

SERVED WITHOUT WEBSERVERS

SERVED WITHOUT WEBSERVERS Web Apps/Websites are Hosted on a Global CDN

SERVED WITHOUT WEBSERVERS Web Apps/Websites are Hosted on a Global CDN Not managing a dedicated Web Server(s)

SERVED WITHOUT WEBSERVERS Web Apps/Websites are Hosted on a Global CDN Not managing a dedicated Web Server(s) Content is immediately distributed to the user No server side rendering to generate dynamic content at runtime

SERVED WITHOUT WEBSERVERS Web Apps/Websites are Hosted on a Global CDN Not managing a dedicated Web Server(s) Content is immediately distributed to the user No server side rendering to generate dynamic content at runtime What about server side API requests? Serverless functions (Functions As A Service) So long dedicated API Proxy!

WHAT ISN’T A JAMSTACK WEBSITE

EXAMPLE: TYPICAL CMS DRIVEN WEBSITE

THE GOOD

THE GOOD Content Managed Website

THE GOOD Content Managed Website Instant Feedback

THE GOOD Content Managed Website Instant Feedback Huge array of Plugins

THE NOT SO GOOD

THE NOT SO GOOD Content retrieved at runtime

THE NOT SO GOOD Content retrieved at runtime Bigger surface area of attack

THE NOT SO GOOD Content retrieved at runtime Bigger surface area of attack The more data we have the slower the page load

THE NOT SO GOOD Content retrieved at runtime Bigger surface area of attack The more data we have the slower the page load Those shiny plugins can feck up the site

THE NOT SO GOOD Content retrieved at runtime Bigger surface area of attack The more data we have the slower the page load Those shiny plugins can feck up the site Cost more money to scale

THE NOT SO GOOD Content retrieved at runtime Bigger surface area of attack The more data we have the slower the page load Those shiny plugins can feck up the site Cost more money to scale Provision more servers Introduce load balancers Move assets to a CDN

THE NOT SO GOOD Content retrieved at runtime Bigger surface area of attack The more data we have the slower the page load Those shiny plugins can feck up the site Cost more money to scale Provision more servers Introduce load balancers Move assets to a CDN It could be simpli ed

WHAT’S THE ALTERNATIVE?

WE’RE GONNA TURN TO THE BROWSER AND ABSTRACT THE UI LAYER

NOTHING NEW HERE. THINK OF THE IPHONE Imagine a mobile app where UI is reloaded from a server each time an action was taken Why not treat Web Apps in the same way?

JAMSTACK JAMSTACK

JAVASCRIPT

JAVASCRIPT Dynamic programming during the request/response cycle is handled by JavaScript Frameworks: React, Angular, Vue etc Vanilla JavaScript

JAVASCRIPT Dynamic programming during the request/response cycle is handled by JavaScript Frameworks: React, Angular, Vue etc Vanilla JavaScript Routing UI Logic Dynamic behaviour

API’S

API’S Server-side processes or database actions are abstracted into reusable APIs, accessed over HTTPS with JavaScript.

API’S Server-side processes or database actions are abstracted into reusable APIs, accessed over HTTPS with JavaScript. Leveraging third-party services: Fetching Content (Contentful/Sanity), Handling Payments (Stripe) Custom-build services: User Authentication, Product Inventory

MARKUP

MARKUP Templated markup should be prebuilt at deploy time, usually using a site generator for content sites, or a build tool for web apps.

MARKUP Templated markup should be prebuilt at deploy time, usually using a site generator for content sites, or a build tool for web apps. Headless CMS Sanity Contentful Prismic Forestry Ghost 🎉

ISN’T THIS JUST A STATIC WEBSITE?

ISN’T THIS JUST A STATIC WEBSITE? Well yeah…kinda

ISN’T THIS JUST A STATIC WEBSITE? Well yeah…kinda The only static part is the output of our pre-compiled pages/templates (at build time) that are distributed to the user.

ISN’T THIS JUST A STATIC WEBSITE? Well yeah…kinda The only static part is the output of our pre-compiled pages/templates (at build time) that are distributed to the user. We can still deliver dynamic content.

HOW DO WE DO IT?

ABSTRACTING THE FRONT END LAYER GIVES US SOME ADDED BENEFITS

BETTER PERFORMANCE

MORE SECURE

HOW ARE WE GOING TO HOST IT?

HOW ARE WE GOING TO HOST IT? Content Delivery Network (CDN) - no web servers Manually publish Automatically publish code/content changes Automatic HTTPS upon initial deployment Incorporated within our GIT work ow

IS THERE A SERVICE THAT CAN DO ALL THAT?

😎 ABSO-FECKIN-LUTELY

NETLIFY SIMPLIFIES DEV OPS FOR FOLKS LIKE ME WHO JUST WANT TO FOCUS ON FRONT END CODE.

REAL LIFE EXAMPLES

SMASHING MAGAZINE ” SmashingMagazine.com is now much faster, they went from 800 ms time to rst load to 80 ms. Smashing’s users will have a smoother experience due to the easier integrations, speed, and better performance. ” https://www.netlify.com/blog/2017/03/16/smashing-magazine-just-got-10x-faster/

CORNERSTONE ONDEMAND ” …Cornerstone OnDemand, a talent management company, migrated from an outdated, monolithic CMS architecture to the JAMstack, powered by Netlify, Gatsby, and Sanity.io. As a result, page loads are 25% faster and time to market with new web pages and content has improved 30%. As a bonus, the team has also greatly improved its ability to retain and attract new talent. ” https://www.netlify.com/blog/2019/07/02/cornerstone-ondemand-delivers-web-projects30-faster-with-netlify/

STRIVECTIN - GATSBY & SHOPIFY (PREV. MAGENTO) ” …We have seen an immediate and sustained increase of 20% in organic traf c to the site. ” https://www.gatsbyjs.org/blog/2019-08-14-strivectin-case-study/

GETITNG STARTED WITH JAMSTACK

GETTING STARTED WITH JAMSTACK Use a generator like Stackbit (https://stackbit.com)

GETTING STARTED WITH JAMSTACK Use a generator like Stackbit (https://stackbit.com) Pick a theme

GETTING STARTED WITH JAMSTACK Use a generator like Stackbit (https://stackbit.com) Pick a theme Pick a Static Site Generator

GETTING STARTED WITH JAMSTACK Use a generator like Stackbit (https://stackbit.com) Pick a theme Pick a Static Site Generator Pick a Headless CMS

GETTING STARTED WITH JAMSTACK Use a generator like Stackbit (https://stackbit.com) Pick a theme Pick a Static Site Generator Pick a Headless CMS It deploys the package to Netlify

GETTING STARTED WITH JAMSTACK Use a generator like Stackbit (https://stackbit.com) Pick a theme Pick a Static Site Generator Pick a Headless CMS It deploys the package to Netlify Create your own themes! (Great for Agencies)

GETTING STARTED WITH JAMSTACK Use a generator like Stackbit (https://stackbit.com) Pick a theme Pick a Static Site Generator Pick a Headless CMS It deploys the package to Netlify Create your own themes! (Great for Agencies) Check out Jason Lengstorf’s YouTube Series “Learn with Jason”

GETTING STARTED WITH JAMSTACK Use a generator like Stackbit (https://stackbit.com) Pick a theme Pick a Static Site Generator Pick a Headless CMS It deploys the package to Netlify Create your own themes! (Great for Agencies) Check out Jason Lengstorf’s YouTube Series “Learn with Jason” Visit https://jamstack.org

GETTING STARTED WITH JAMSTACK Use a generator like Stackbit (https://stackbit.com) Pick a theme Pick a Static Site Generator Pick a Headless CMS It deploys the package to Netlify Create your own themes! (Great for Agencies) Check out Jason Lengstorf’s YouTube Series “Learn with Jason” Visit https://jamstack.org Checkout the JAMstack O’reily Book

THANK YOU.