PHOTO:
Yolanda Sun | unsplash
The Jamstack web development practice — which combines client-side JavaScript (J), reusable APIs (A) and prebuilt Markup (M) approaches — continues to grow, since it was coined in 2015 by Matt Biilmann, CEO and co-founder of Netlify, which manages Jamstack.org.
While it’s hard to pinpoint its community growth vs. other web development frameworks and practices such as React, Gatsby, Nuxt and Next.js, it’s hard to deny its momentum, as evidenced by the reported 20,000-plus attendees at the virtual Jamstack Conf 2021, this past Oct. 6-7.
Netlify certainly boasts about its growth and the size of websites backed by Jamstack approaches. However, seasoned developers don’t measure web-development practices by community size but rather how they can successfully build, deploy and manage web and digital properties and ultimately empower users like marketers to create digital customer experiences.
We caught up with Biilmann and other expert developers around Jamstack on the definition of Jamstack, trends in the practice, challenges, strengths and vision for 2022 and beyond.
What Is Jamstack, Anyway?
Jamstack is a modern web architecture that marries best practices of pre-built sites with the API economy and serverless functions to deliver faster load times and dynamic content, according to Biilmann. For developers, he added, Jamstack means compiling the UI, decoupling the frontend web layer from the backend business logic, and pulling in data as needed. “The core Jamstack principles of pre-rendering and decoupling enable sites and applications to be delivered with greater confidence and more resilience than ever before,” said Biilmann, who said By coining the phrase, he added, he wanted developers to have a better, shared understanding of the architectural approach in conversation.
Here’s a quick breakdown of the core principles:
- 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.
Sean C Davis, developer experience engineer at Stackbit who has been working with Jamstack for four years, defines Jamstack as “an architecture for atomically building and delivering precompiled, decoupled front-end web projects from the edge.”
Related Article: What is JAMstack?
A Transitional Year for Jamstack
According to Davis, Jamstack is constantly evolving and 2021 felt very much like a transitional year. He went on to warn about a current identity crisis with the Jamstack pattern. “With Next.js absolutely exploding in 2020, it brought into question what Jamstack really means,” he said. “The community led by Netlify evolved the definition to suit their product, while working to preserve the original benefits of Jamstack. It is still evolving in my mind. What is Jamstack became a difficult question for anyone to answer, and it’s been the theme of 2021. Lots of people with lots of opinions out there.”
Davis’ hope is that 2022 will see the architecture grow and mature a bit.
Related Article: Read This Before Moving to a JAMstack-Ready CMS
Jamstack Faces Challenges
Static Site Generation
Jamstack introduced static side generation, which speeds up the delivery of a site to end users since all the HTML pages are created at build time and pushed to a CDN that is close to the users accessing the site, according to Marcelo Lewin of HeadlessCreator.com. However, he said, this introduced a challenge: whenever you need to change one small section of your site, you need to rebuild the entire site. For a site that has thousands of pages, this can take a long time to perform.
That said, frameworks are now beginning to address this issue, Lewin said. For example, GatsbyJS 4 introduced DSG (Deferred Static Generation), which will not generate the page until a user first requests it and then builds it and caches it. “This is great for those old articles you may have that are rarely requested,” Lewin said. “For pages that are highly dynamic and change constantly, there is now a SSR mode (server side rendering), which allows the server to render for every user the page that constantly changes and is highly dynamic.”
Third Party APIs
Another challenge to be aware of: the heavy use of third party APIs (the “A” in Jamstack). This introduces multiple possible points of failure, according to Lewin. “It’s wonderful to not reinvent the wheel and be able to use third party APIs (e.g. weather, forms, user authentication, etc), but that means that you are no longer in control of that code and if it goes down, your site using that API may go down with it,” Lewin said. “Though rare, it happens and you just need to be aware of that and have fall back code to make sure your site continues.”
Losing Control in Decoupled World
Jamstack means decoupling, which also means everything that goes into a site is a separate thing, according to Davis. “With our old Rails apps,” Davis said, “almost everything about the application was done inside Rails — authentication, form submission, page rendering, searching, the entire CMS application. In a decoupled world, most of those pieces of the puzzle are handled by a different service.” According to Davis, the challenges that come with this are:
- The promise of cost savings decreases with scale. All these tools need to make money, and while they tend to have free tiers, they get expensive at scale.
- Decision-makers (CTO, tech leads, etc.) need a vast understanding of the current landscape to be able to put the right tools in place. It’s not enough to know how Rails does authentication. Now we have to know who the authentication providers are, how they compare to one another, and choose the right one for each job.
- Stitching these pieces together to build a seamless web experience takes effort. This can be abstracted and made efficient over time — if teams have the luxury of consistent requirements and ability to make decisions on service providers — but it takes time, and money, to get there, according to Davis.
Are Content Creators Left Behind?
The Jamstack movement made great promises to developers and to end users, Davis said, but it left behind the content creators: marketers, editors, etc., people responsible for building pages and working the CMS. “Suddenly marketers had to learn how structured content works,” he said. “And they were editing without context. In our coupled, custom CMS days, it was trivial to provide real-time, in-context previews. Content editors loved it. With the Jamstack, especially in the early days, it was extremely difficult. And the landscape still has a long way to go to mature in this space.”
Related Article: What Is a Content Experience Platform?
The Benefits of a Jamstack Architecture
Choosing Your Framework and Language
The ability to pick and choose the technology you are familiar with is one of the major strengths of Jamstack, Lewin added. It does not tie you down to a particular framework or language, even though the “J” in Jamstack was for JavaScript; it no longer limits you to that language.
Many APIs to Choose From
Although APIs can be a potential challenge, the ability to use the thousands of third party APIs available today is a huge benefit to Jamstack, Lewin said. This lets you focus on your domain of expertise and use APIs for the general stuff: such as storing content in a headless CMS, pulling weather information from a third party vendor or using authentication services from another vendor.
Educational Services, Community
As the Jamstack ecosystem continues to grow, even more products and services emerge to help developers build decoupled applications, according to Netlify’s Biilmann. “While this offers increased flexibility for developers, it can be overwhelming to those new to the Jamstack, especially to those accustomed to working with an all-in-one solution,” he said. Free educational courses such as Netlify’s Jamstack Explorers seek to make understanding the ecosystem fun and approachable, and, offers developers insight and hands-on instruction for making the most of the Jamstack, he added. “With the help and support of many factors, Netlify provided to us a revolution — a completely rethought way to build and deploy websites. I will always love them for how they provided developers a solution to frustrations we’d been having for years and years,” said Davis.
Trends for Jamstack in 2022
According to Davis, maturity will come in the form of three trends he that he is hoping will come to fruition in 2022. They include the following.
Jamstack Use Cases Are Getting Larger
Increasingly, Biilmann said Netlify sees more Jamstack implementations serve large sites and dynamic user experiences. The Jamstack Community Survey found 32% of Jamstack developers are building websites that have audiences numbered in the millions. In fact, over the past year, commerce brand Spring scaled to deliver its platform on the Jamstack, now with 6.5 million stores where customers create and sell online. Similarly, Twilio migrated its Console, its main product that reaches customers in more than 200 countries, to Jamstack this past year.
“In addition to more stories about scale, looking ahead I expect to see the ecosystem of integrations for the Jamstack continue to expand, allowing a Git-based workflow to underpin not just code changes, but also content, data, design assets and more,” Biilmann said.
More Small, Sophisticated Sites Will See Benefits
Smaller sites get great benefits with Jamstack, according to Andrew Boardman, principal at Manoverboard. He said his teams adopted a Jamstack approach for some of their clients over the past couple of years. The deployment of it has been incredibly instructive because they can build sites a bit faster and with less worry about larger infrastructural issues like database management. “We are recommending Jamstack for organizations that want the benefits of a robust public-facing website and do not have complex content management needs,” Boardman said. “In other words, we are using Jamstack for smaller yet still sophisticated sites.”
With Jamstack, teams can create incredibly performant sites — pages are served over a Content Delivery Network (CDN) in good time — and end users have the peace of mind of not having to worry about databases and database security. In the Jamstack Community survey, performance and uptime were the top two categories both of the past two years, and security rose to third place. “The one meta-challenge is helping clients understand the beauty and rigor of using a Jamstack architecture for their site,” Boardman said. “Jamstack as a concept is five years old but it’s still new in many ways.”
Component-Driven Site Generators
Component-Driven Site Generators will be focused on shipping less JavaScript to the browser and should be mature to the point of being ready for production. Astro, SvelteKit, and 11ty (with Slinkity) are a few that come to mind, he added. “They will let developers work with component-driven frameworks like React without requiring JavaScript to run in the browser,” Davis said. “And through a process often referred to as partial hydration, they will let developers be declarative about exactly where they need client-side JavaScript.”
Web Development Split
The first trend above is causing a split on how we build websites today, according to Davis. While the power and popularity of…
The Pros and Cons of Jamstack Architecture and What the Future Holds for It