There are many technology stacks for developers to choose from — LAMP, MEAN, .NET, etc. JAMstack is another choice, but many developers will tell you it’s far more than just another option — particularly now that we’re venturing into the Internet of Things (IoT) era.
That’s because, unlike other technology or IT stacks, JAMstack isn’t concerned with the specific software or technology being used. Instead, it’s based on the usage of JavaScript, APIs and Markup — but exactly how you use these is up to you.
What Is JAMstack?
JAMstack represents a major trend in the field of web development. Coined by Mathias Biilman, the co-founder of Netlify, the official JAMstack website defines the term as “a modern web development architecture based on client-side JavaScript (J), reusable APIs (A) and prebuilt Markup (M).”
The site explains that 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.”
JAMstack grew in popularity thanks to the surge of modern browsers and devices, the need for API-driven content management and CDNs.
According to Chimenzie Enyinnaya, writing for Scotch.io, a JAMstack project must meet the following criteria:
JavaScript (J) - Any dynamic programming that is running a request/response cycle on the client should be handled by JavaScript. This can include any front-end framework like Vue.js, React or Angular.
APIs (A) - The server-side processes or database actions are abstracted into reusable APIs that is accessed over HTTP with JavaScript. These APIs can be custom-built or leveraged through third-party services.
Markup (M) - Templated markup should be prebuilt during deployment, usually using a site generator, such as Gatsby.js, Hugo and Nuxt.js, for content sites, or build a tool for a web app via Parcel.js and Webpack.
Related Article: Blockchain's Role in the Enterprise in 2019
How Is JAMstack Different From Other Technology Stacks?
To understand how JAMstack differentiates from other development stacks, Francois Lanthier Nadeau, market leader & partner of SnipCart, provides a comparison of the workflows involved in both LAMP-driven traditional projects and JAMstack projects.
In a traditional workflow, both the “building and hosting are coupled. A user requests a page [and] the file gets processed and served following a [long] series of interactions between a database, back-end code, server, browser and layers of caching,” said Nadeau. “Core updates are pushed to production servers, often through FTP [and] content updates are pushed through a traditional CMS, like WordPress or Drupal.” The building and hosting can also be referred to as front-end and back-end, respectively.
As for a JAMstack workflow, Nadeau explained that both the building and hosting are decoupled, rather than coupled. When a user requests a page, the “file is already compiled and gets directly served to the browser from a CDN,” Nadaeu said. “Core updates are pushed through Git, the site gets rebuilt entirely via modern build tools like static site generators, and content updates are pushed through Git or a static site CMS.”
Learning Opportunities
Webinar
Apr
5
Adopt a Modern Digital-First Marketing Strategy
Learn how to use a composable DXP to your advantage
Webinar
Apr
13
Composable Commerce The Future of Retail
The Adobe Commerce approach to composable and why it's best in class
Webinar
Apr
13
Accelerating Content Velocity Across the Digital Supply Chain
Learn to integrate DAM with upstream tools to improve workflow efficiency.
Webinar
Apr
18
Drive Business Growth Through Customer Service and Support
Defining the future of technology. What is AI’s role in the future of customer service?
Git, according to Redpoint Ventures investor Astasia Myers, is fundamental to JAMstack since it holds all the site’s components. “An SSG [static site generator] generates the browser markup, which is pushed to Git as a collection of prebuilt pages. The CDN and/or hosting service can identify the changes, automatically rebuild the site, and deploy it. This workflow embodies the modern software development lifecycle practice of Continuous Integration and Deployment (CI/CD),” said Myers.
Related Article: 24 Headless CMS That Should Be On Your Radar in 2019
JAMstack Benefits: Do They Stack Up?
The advantages of JAMstack can be categorized into five key areas as identified by both Myers and Enyinnaya.
- Improved Scaling - Static content can be served in a CDN, making it easier to scale.
- Better Security - Since there are no databases, plugins or software running on a server, it significantly reduces the risk of potential code injections and database hacks.
- Low Operating Costs - JAMstack utilizes fewer resources. Servers and databases are not necessarily needed, hence low operating costs.
- Accelerated Load Times - JAMstack provides a faster performance since the browser is processing the functionalities, not the back-end. In JAMstack, the HTML files are prebuilt and served over the CDN instead of rendering on the server.
- Improved Developer Experience - The decoupling between build and hosting provides streamlined debugging and targeting development as well as having more options to extend features via API. This enables developers to make changes more easily and work via a CI/CD pipeline.
Pete Czech, founder of New Possibilities Group, summarized the benefits of JAMstack, “I think the biggest advantage to the JAMstack approach is that the front-end user experience can be agnostic from the CMS. This removes any limitations the CMS may place on the creation of the user interface, freeing up designers and front-end developers to utilize whatever library or techniques can best accomplish their vision and requirements. Technology like this can potentially usher in a new era of design aesthetics unseen since "Web 2.0" innovations,” Czech explained.
Gavin Yue, a former software engineer at Amazon Web Services and Goldman Sachs, added that JAMstack enables brands to go “serverless,” using AWS free tier to essentially eliminate hosting costs in the short-run at least. “With the serverless trend, the cost of hosting website is dropping significantly. For traditional WordPress hosting with 20,000 pageviews per month, it costs $30 at least for decent hosting. With serverless, the cost would be near zero since AWS provides the free tier,” Yue said.
Yue added that, in line with the API-first trend, JAMstack makes a lot of sense. “Right now, everything is about API, and combining APIs and JavaScript is much easier [compared with other frameworks],” he said.
What Are the Limitations of JAMstack?
But while JAMstack does have its advantages, there some limitations that you need to keep in mind, wrote Leo Farias in Concepta.
- Steep Learning Curve - For content editors and marketers, JAMstack technologies are rarely approachable, as most headless CMSs don’t offer a user-friendly interface for content creation and marketing campaign management.
- Features Can Only Be Added via Client-Side Third-Party Solutions - Features like comments, polls, online stores and galleries, can only be added via third-party solutions. While this might be an advantage, it can become a burden if they are needed for every dynamic feature on the page.
- All Changes Must Go Through a Developer - Any changes to the design must go through the development. Development costs are expensive, therefore the costs for a series of incremental changes will add up.
- Best for Static Projects - JAMstack is not suitable for projects that require frequent updates and new pages, real-time updates, or delivering interactive features.
Will you be using JAMstack in 2019? Let us know your thoughts in the comments section below.
