What the JAMstack?

This talk will covers the basics of JAMstack i.e. what it is, why it’s becoming so popular and also some of the potential drawbacks with using JAMstack.

It will then follow up with a short demonstration of a project using Gatsby and showcase how this fits into the JAMstack and why it is proving to be a success.

Transcript

1. What the JAMstack? Jamie Bradley @jamiebradley234 @hello_endeavour
3. 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
4. What is JAMstack?
6. Static Website Architecture
7. I PROMISE I’M NOT SPONSORED I JUST ❤ NETLIFY
8. – jamstack.org “Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup”
9. 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
10. 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
11. 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
12. https://www.staticgen.com/
13. When is my site NOT built with JAMStack?
14. 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)
15. 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.
16. 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
17. WHY?
18. Security %&
19. • 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. %&
20. 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 %&
21. Cheaper Hosting!
22. • Affordable services. • Cheaper to scale. • Simpler site, more secure, easier to maintain. • Less unpredictable expenses.
23. Better Performance ⚡
24. • Serve pre-built Markup. • Atomic Deployments - reduced downtime • Instant Cache Invalidation • Hosted on a CDN • Smashing Magazine noted a 10x boost in Performance ⚡
25. Your Sanity
26. • Everything lives in Git. • More flexibility with Technical Decisions • Build with whatever you like
27. TRADE OFFS?
29. Global ADN Automated Deployments Works with GIT GitLab/Github/Bitbucket HTTPS is Automatic Lambda Functions Identity API Forms API