Building with Jamstack - wrangling APIs and UIs

BUILDING WITH JAMSTACK WRANGLING APIS AND UIS PHIL HAWKSWORTH @PHILHAWKSWORTH

LINES AND BOXES

yikes! YIYING ME MARK

JAMSTACK JAMSTACK JAMSTACK SOMETHING SOMETHING JAMSTACK PHIL, ALL THE TIME TO BE HONEST

ART IS ABOUT ASKING QUESTIONS, DESIGN IS ABOUT FINDING ANSWERS BRENDAN DAWES, I THINK

TECHNICAL DESIGN is DESIGN TOO

SIMPLICITY

https://unsplash.com/photos/KzGhmrQmB6I

https://unsplash.com/photos/KzGhmrQmB6I

fetch(‘https://nice.api.com/things.json’) .then(res =>” res.json()) .then(json =>” console.log(json));

BUILDING A SYSTEM e b n a c HARD

SOFTWARE ENGINEER TECHNICAL DIRECTOR DX ENGINEER

LINES AND BOXES

“VIEWING” SITES & “DOING” SITES

BUILDING WITH JAMSTACK WRANGLING APIS AND UIS PHIL HAWKSWORTH @PHILHAWKSWORTH

k c a t s m a j Fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers. https://jamstack.org

ASK FOR STUFF GET STUFF

“VIEWING” SITES & “DOING” SITES

ASK FOR STUFF GET STUFF DO ALL SORTS OF STUFF

MONOLITHS ONE CHOICE FOR ALL DISCIPLINES

https://unsplash.com/photos/KzGhmrQmB6I

SEPARATION OF CONCERNS

k c a t s jam MARKUP JAVASCRIPT API AS MUCH AS POSSIBLE, GENERATED IN ADVANCE USED AS A PROGRESSIVE ENHANCEMENT IN THE BROWSER OR ELSEWHERE

API USER INTERFACE

s s e l r e v r se ⚡ ⚡ k c a t s jam

API USER INTERFACE

API USER INTERFACE

API v8 v7 v6 v5.1 v5 v4.1 v4 v3 v2 v1 v8 USER INTERFACE v7 v6 v5 v4 v3 v2 v1

HOW ARE APIS AND UIS COUPLED? URL / SIGNATURE / RESPONSE

EXAMPLE

FINDTHAT.AT/CATCOUTURE EXAMPLE

{ “prod-cat-outfit-lion”: { “name”: “Cat lion mane costume”, “rrp”: “100.00”, “image”: “product-cat-lion.jpg”, “description”: “Dress your cat up as a lion and make it hate you while it looks cool.” }, … } inventory.json

EXAMPLE

API USER INTERFACE

const productViews = document.querySelectorAll(‘.product’); productViews.forEach(element =>” { fetch(/api/stock/${element.dataset.productId}) .then(response =>” response.json()) .then(data =>” { // update the UI based on the // levels of available stock }); }) shop.js

COUPLING — API ENDPOINT

API USER INTERFACE

API USER INTERFACE

API DECOUPLE WITH A PROXY USER INTERFACE

[[redirects]] from = “/api/stock/:id” to = “/.netlify/functions/stock?productId=:id” netlify.toml

[[redirects]] from = “/api/stock/:id” to = “https://other.api.com/stock?productId=:id” netlify.toml

HOW ARE APIS AND UIS COUPLED? URL / SIGNATURE / RESPONSE

├── ├── │ │ │ │ ├── ├── └── README.md api ├── data │ ├── catalogue.json │ └── inventory.json └── stock.js netlify.toml package.json src ├── css │ └── style.css ├── images ├── index.njk └── js └── shop.js

├── ├── │ │ │ │ ├── ├── └── README.md api ├── data │ ├── catalogue.json │ └── inventory.json └── stock.js netlify.toml package.json src ├── css │ └── style.css ├── images ├── index.njk └── js └── shop.js

├── ├── │ │ │ │ ├── ├── └── README.md api ├── data │ ├── catalogue.json │ └── inventory.json └── stock.js netlify.toml package.json src ├── css │ └── style.css ├── images ├── index.njk └── js └── shop.js

FINDTHAT.AT/CATCOUTURE/REPO EXAMPLE

UMM… “PRICE GOUGING?” SOME OF YOU, PERHAPS

ONE REPO ONE DEPLOYMENT

API UI

live API UI

live API UI

GIT WORKFLOWS ACROSS THE APPLICATION FTW

HOW ARE APIS AND UIS COUPLED? URL / SIGNATURE / RESPONSE

WRAPPING UP

LINES AND BOXES

STATIC FIRST ENHANCING IF REQUIRED

KEEP COUPLING LOOSE

THE API ECONOMY IS BOOMING

JAMSTACK & SERVERLESS ARE BEST FRIENDS

FINDTHAT.AT/LOLLY

FINDTHAT.AT/COMMENTS

FINDTHAT.AT/ELEVENTYONE

BOOK - MODERN WEB DEVELOPMENT ON THE JAMSTACK findthat.at/jamstackbook FREE CODE CAMP VIDEO findthat.at/jamstack/fcc JAMSTACK WHITEPAPER findthat.at/jamstack-whitepaper JAMSTACK COMMENTS EXAMPLE findthat.at/comments

FINDTHAT.AT/SMASHINGJAM THANKS @PHILHAWKSWORTH