Link to original post on Medium.
JAMstack: noun \’jam-stak’\
Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.
Before I begin to examine that lovely collection of technical keywords, I’d like to first lay a foundation necessary to empathize with previous archetypal models in order to envision such paradigms of the future.
Software bundles, known as “stacks,” are merely an ensemble of collaborative programs used in tandem to accomplish one cohesive goal. A typical stack usually takes an operating system, some middleware, database management, and other varying applications. LAMP is considered one of the classics, if not the most common, which stands for the Linux operating system, the Apache HTTP server, MySQL relational-database management systems, and either the PHP, Python, or Perl programming language.
Constructing a stack meant selecting programs that could interact with each other across the front (client) and back (server) ends.
Then along came the MEAN stack — MongoDB, Express.js, AngularJS, and Node.js — which allowed for all components involved to run on just a single programming language: JavaScript. Due to the integration of server-side scripting thanks to Node.js, JavaScript has become an extremely powerful and versatile tool since it can now function on both sides of the stack. Other software solutions can be made from this basic foundation, as I would consider myself skilled in the NERP stack — a Node.js server, Express.js middleware, the React application framework, and PostgreSQL object-relational database management systems (accessed by Sequelize.js)— which is just another combination of JS-centric platforms that was explicitly taught at my time attending the Grace Hopper program under Fullstack Academy.
The exponential growth of the internet and progressing web services have subsequently shifted the needs of users and developers alike, where higher performance, fierce security, and improved scaling capabilities are all increasingly becoming industry standard. And now cue the JAM stack:
JavaScript
While we know JS can live across the stack, it’s typically stationed on the frontend by use of frameworks like React, Vue, or Angular. These decorative JS building blocks provide infrastructure for reactive web pages, most notably SPAs (single page applications) that dynamically update through user interaction, processing request/response cycles on the client side. The fluidity of these updates renders smooth and clear user interfaces since the majority of the work occurs right on the browser. However, this can lead to poor SEO (search engine optimization) because these pages access additional data by AJAX requests solely on the frontend, so it’s difficult for Google search bots to scan anything other than a bundler’s entry point at runtime (and we are all well aware of the newly universally-accepted mathematical theorem: more clicks = more $$$).
APIs
Application programming interfaces are basically UIs but for software instead of humans. It enables software to essentially “talk” to each other, and handles all the backend, dynamic interactions when implemented in a JAM stack. Without the need of a local server database and excess plugins, hackers are less capable of infiltrating a protected system, especially if an API can leverage a third-party’s heightened security parameters.
Markup
Considered the actual content of a website pre-API requests (like general text and images), markup can be delegated to non-programmers in larger scaled projects due to its relatively simple formatting. SSGs (static site generators, like Gatsby.js which works alongside React) are crucial cogs in the mix as they convert markup files into static HTML pages that are built along with the client on startup, delivering a server-side application that loads fast and search engines can parse efficiently, yet still hold the elegant performance of a SPA.
JavaScript, APIs, and Markup text are three distinct sets of tools; individual parts that can be constructed to bring out the best in one another.
The way software bundles are conceptualized in this technological climate will continue to change as we discover faster and cheaper ways to deliver content to the masses. The metamorphosis now revolves around these three umbrella-ed enterprises, with each division consisting of many sub-parts adept in solving the problems that they were made to solve. The mixing and matching of components ensures that developers themselves are making the most out of their environments and unique skillsets. The possibilities are quite endless.
The official JAMstack website specifically states on its home page:
When we talk about “The Stack,” we no longer talk about operating systems, specific web servers, backend programming languages, or databases.
The JAMstack is not about specific technologies. It’s a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a better developer experience.
With the myriad platforms, languages, and frameworks present in the world today — with many more in development even as you read this, or those left wandering our collective consciousness just waiting to be extrapolated — it can be quite intimidating for a newcomer to familiarize themselves with such an influx of seemingly vital information. Seems like the JAM stack and its abstraction of a once strictly-bound solutions template is something we’d best harness in our perceptual scope.
Top comments (2)
Great write-up! I always have the hardest time trying to describe markup to somebody but you did a great job of it.
Thank you so much! I find the best way to really wrap your head around such concepts is to break them down and generalize as much as possible, before further refining on particulars. Trying to articulate them for an audience helps me to understand them better, so I wholeheartedly appreciate your feedback!