What the JAMstack? Jamie Bradley @jamiebradley234 @hello_endeavour

No content

Founded in 2017 Javascript Contractor/ Freelancer Sky, DWP, ZeroLight, Increment By One, PrimitiveSense, Layers & More! React, WordPress, Shopify, UI Frameworks, JAMstack(2019) Moved into Boho5 February 2018 https://endeavour-digital.com

What is JAMstack?

No content

Static Website Architecture

I PROMISE I’M NOT SPONSORED I JUST ❤ NETLIFY

– jamstack.org “Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup”

Any dynamic programming during the request/ response cycle should be handled by JavaScript, which only runs on the client. This includes the use of a JavaScript framework/ library or vanilla JS. JavaScript

Server-side processes or database actions should be abstracted into reusable APIs. APIs are accessed over HTTPS with JavaScript. This includes third party APIs such as Stripe or Contentful and custom-built APIs. APIs

Markup should be templated and pre-built at deploy time. We can achieve this with Static Site Generators (such as Jekyll, Hugo, Gatsby etc) or a Build Tool such as Webpack or Gulp. Markup

https://www.staticgen.com/

When is my site NOT built with JAMStack?

DB Server Web Server API " # Data fetched with Client Side JavaScript e.g. Instagram Posts HTML, CSS, JS Query DB for Content Return Content to Web Server GET https://my-site.com High Level Example: Website Built with Server Side CMS (LAMP)

When is my site NOT built with JAMstack? • A site purely built with a server-side CMS e.g. Craft CMS etc • A single page app that uses isomorphic rendering to build views on the server at runtime. • A monolithic server-run web app that relies on Ruby, Node, or another backend language.

Content API API " # Change to website pushed to GIT by developers or content change made by content team Instruction sent to Netlify (via a web hook) to trigger a build/deploy Data requested from Content API Data returned to Netlify CDN CI GET https://my-site.com HTML, CSS, JS Data fetched with Client Side JavaScript e.g. Instagram Posts JAMstack Site Built with Headless CMS

WHY?

Security %&

• No direct interaction with Database, your website is just static HTML. Reduced Attack Vectors. • Think of a Bridge [Reminder for Jamie ] • Leverage domain expertise of specialist third-party services. %&

JAMstack does indeed move complexity elsewhere. It moves it out of the critical path at request time. It moves it out of your area of responsibility. And it moves it over to domain experts who offer specialised services as commodities. It is perfectly possible that complexity still exists. but we don’t need to shoulder that burden. In the same way as wireless routers depend on wires. And serverless functions run on servers. Somewhere. But not in my house :) Phil Hawksworth https://medium.com/@philhawksworth/jamstack-does-indeed-move-complexity- elsewhere-e34b62bd66df %&

Cheaper Hosting!

• Affordable services. • Cheaper to scale. • Simpler site, more secure, easier to maintain. • Less unpredictable expenses.

Better Performance ⚡

• Serve pre-built Markup. • Atomic Deployments - reduced downtime • Instant Cache Invalidation • Hosted on a CDN • Smashing Magazine noted a 10x boost in Performance ⚡

Your Sanity

• Everything lives in Git. • More flexibility with Technical Decisions • Build with whatever you like

TRADE OFFS?

No content

Global ADN Automated Deployments Works with GIT GitLab/Github/Bitbucket HTTPS is Automatic Lambda Functions Identity API Forms API

No content