Amazing introduction to the JAMstack approach for modern web development. I like that it weighs different options and explains that there is no “one-fits-all” solution, it really depends on your needs. The case study of Smashing Magazine is stellar!
#Notes
Benefits of using JAMstack sites is that they are:
- Globally distributed and resilient to heavy traffic.
- Centered around a developer friendly, GIT-based workflow.
- Designed modularly, consuming other services via APIs.
- Prebuilt and optimized before being served.
The JAMstack brings together JavaScript, APIs, and markup, the three core components used to create sites that are both fast and highly dynamic.
Globally distributed content isn’t entirely new, but the speed at which you can update CDN files directly from a repository is new.
JavaScript in the browser as the runtime. Reusable HTTP APIs rather than app-specific databases. Prebuilt markup as the delivery mechanism.
The World Wide Web is fundamentally just a UI and interaction layer built on top of a stateless protocol called the HyperText Transfer Protocol (HTTP). The most fundamental concept of the web is the Universal Resource Locator (URL).
Modern web APIs were officially born with Roy Fielding’s dissertation, “Architectural Styles and the Design of Network-Based Software Architectures,” in 2000. It is a seminal paper that defined Representational State Transfer (REST) as a scalable and discoverable architecture for services exposed through HTTP.
Content management can also be handled by Git-centric content editing tools like Netlify CMS, Prose, Forestry, or CloudCannon. Or, you can use the build tool to make the first build step a content synchronization with an external content API like Contentful, Prismic, or DatoCMS.
JAMstack sites embody these principles:
- A minimal surface area with largely read-only hosting infrastructure.
- Decoupled services exposed to the build environment and not the public.
- An ecosystem of independently operated and secured external services.
Although traditional, monolithic software platforms need to introduce layers of complexity for the sake of performance, security, and scale, JAMstack sites embody this by default.
When designing the technical approach to web applications, there are a few commonly used terms that seem to be regularly confused. We’ve alluded to a couple of them in the previous chapters, but it is worth taking a moment to clarify the differences between some of these common terms:
- Server rendering
- Client-side rendering
- Prerendering
Once, when we talked about “static” sites, we would most likely rule them out as candidates for specific use cases on the basis of some common stumbling blocks. Requirements like search, forms, notifications, or payments would rule out a static architecture for many sites. Thankfully, as the ecosystem has expanded, solutions to all of these requirements have emerged, allowing developers and technical architects to go far beyond what they might once have considered possible on the JAMstack.
This is generally the best approach for anything but lightweight sites: store content and metadata in Git, but offload assets that are not part of your “theme” to a dedicated asset store with a CDN integration.
You can find a listing of headless CMS offerings at https://headlesscms.org/
Smashing Magazine uses an open source microservice, GoTrue, to handle user sign-up and logins. It’s a microservice written in Go with a small footprint.