A presentation at Middlesbrough Front End in in Middlesbrough, UK by Jamie Bradley
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.
Front End Development has changed dramatically over the last few years thanks to browsers becoming more advanced and the rise of powerful JavaScript libraries like React. As front end engineers we can do so much with our websites and web apps. In this talk I will discuss ways that we can use JAMstack to our advantage and develop very powerful experiences. I will also walk through previous examples and discuss things that I learned from the solutions that I used.
for free. You
can too.