A presentation at Smashing Meets by Phil Hawksworth
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
Whether you’re using third-party services or developing your own APIs, leveraging them well from your UI can be challenging over long development projects.
In his talk, he’ll shed the light on some of the techniques you can use when working with serverless functions, proxies and Jamstack tools to help you build projects with confidence.
