Off and on, the model of architecting software shifts. Over time, programming principles, best practices, toolkits evolve to accommodate the contemporary way of building fast, resilient, and reliable apps. Right now, the buzzword is J-AAAAAAM-STACK.
Before JAMstack became available, tightly-coupled software monoliths based on stacks like Linux, Apache, MySQL, PHP (LAMP), RaspberryPi, MySQL, Python (RAMP), and others, e.g., WordPress and Drupal, abounded. They are still in use. However, JAMstack ushered in a new era in which you can decouple software systems and build apps on the front-end while leveraging reusable APIs for the back-end, data storage and processing, authentication, and other key capabilities.
Several major attributes of the JAMstack architecture are a significant help for app development.
This one is a major reason for leveraging JAMstack for building apps. With JAMstack, instead of having to set up your own web server, you can run functions on a function-as-a-service (FaaS) platform on a remote server, invoking them only when necessary. Not having to manage your own back-end infrastructure saves time, effort, and cost.
The domain expertise of reusable, third-party APIs ensures no loopholes through inadvertent errors on your part. Furthermore, those APIs lower the risk of security attacks because deliberate hacks or compromises of the API platforms must first occur before exposure of your app’s private data becomes at risk.
The overall experience of developing and maintaining apps relies on how several app components of the underlying architecture work together. Loose coupling along with the advantage of having third-party services perform the cumbersome, labor-intensive tasks make for a smooth developer experience, freeing you up to focus on your app’s business logic and other important issues.
Scaling apps is a daunting task. JAMstack’s scalability is baked in. Because your app’s interaction with reusable APIs over HTTPS is stateless, you can scale your app content through CDNs to several regions while drawing closer to your users. Replication of your app to multiple servers then proceeds fast.
JAMstack contains three main sections.
Reusable APIs in the JAMstack context are reliable and reusable services geared for developers in the form of pluggable APIs. Gratifyingly, most of them have proven to be effective and robust. See a later section of this article for an extensive list of reusable APIs.
During deployment, you must prebuild this markup to be displayed to users. Static site generators, such as Gatsby and Hugo, fit into this spectrum, generating markups and serving them to clients afterwards.
I just realized this @cloudinary transformer plugin I’m building for @gatsbyjs will support using animated GIFs with— Jason Lengstorf lives in airports now, apparently (@jlengstorf) September 25, 2019
[alt: GIF loaded with gatsby-image using the “blur up” technique] pic.twitter.com/zsyRWVxWX2
Many tools and APIs are available for building JAMstack apps. See below for a list by architectural component.
Vue, React, Angular, Meteor, Ember, Preact, Next, Nuxt, Aurelia, Stimulus, Cycle.js, Babylon.js, Svelte, Backbone.js, Flight, Polymer, Inferno.js, Knockout.js, Stencil.js, Gatsby, Gridsome, and Ionic
Below are reusable and reliable APIs that stand to save you a load of development time.
- Cloudinary: Media storage, transformation, and optimization, along with a content delivery network (CDN).
- Auth0: Authentication and federated identity.
- Firebase: Authentication and push notifications.
- Prismic, Strapi, Forestry: Headless content management system (CMS) API.
- Mailgun, Postmark, and SparkPost: Transactional email messaging.
- Contentful and e-spirit: Content-infrastructure API
- Azure, Lambda, and webtask.io: Serverless back-end functions
- Foxy.io and Shopify: Integration with ecommerce sites
- Stripe and Paystack: Payment processing
- Twilio and Nexmo: Short Message Service (SMS)
Among the tools available for generating prebuilt markup, which can serve your website as static HTML files, are—
GatsbyJS, Hugo, Nuxt.js, Next.js, Jekyll, Hexo, VuePress, and Pelican
Community-defined best practices for building JAMstack apps are available online. However, no hard and fast rules exist. Below are a few guidelines for starting the development of or enhancing JAMstack apps.
CDNs serve websites to users fast even though those networks bear the brunt of multiple users simultaneously trying to access the sites in question. Instead of your servers, the access requests are directed to your CDN, which ultimately saves your site or platform from crashing. Talk about peace of mind!
Cloudflare, Fastly, and Akamai as recommend worthy CDNs.
Furthermore, build tools automate the entire build process, from code pushes to deployment. If you are using a tool like SASS, LESS, or another framework that requires compilation, you can also leverage it to minify, concatenate, and reduce the size of media assets before serving your content to users.
Git is the best version-control tool for apps, bar none. With Git, many tasks, such as collaboration, rollbacks, deployment through Git hooks, project tagging and versioning, and code reviews, are a breeze.
Atomic deployments render each deployment as a full snapshot of the site. That means that, for every release, your deployment serves everything at the same time across the board to users. Such a practice is especially important for major updates.
Two difficult tasks in computer science are naming of programming elements and invalidation of the cache. So, put in place a reliable and well-tested cache-invalidation process to avoid serving outdated content to users.
A Netlify feature invalidates the cache. Have a try.
I strongly believe that JAMstack was made for mankind but not the other way round. As a superb architecture for building web apps, JAMstack also accords them scalability and speed. However, be sure to research in detail what suits your product or company and ensure that you’ll benefit from JAMstack before taking the plunge of switching to it.
Tamas Piros has created a comprehensive course titled Introduction to the JAMstack. The videos there contain many details on the fundamentals of JAMstack and guidelines for building apps with that architecture.
Are you using JAMstack in production? How has it helped you? How do you store, optimize, and transform media assets? I’d appreciate your sharing your insight.
Cloudinary provides easy-to-use, cloud-based media management solutions for the world’s top brands. With offices in the US, UK and Israel, Cloudinary has quickly become the de facto solution used by developers and marketers at major companies around the world to streamline rich media management and deliver optimal end-user experiences.