Businesses that want to attract, engage and retain more online customers need to provide an exceptional front-end solution. It’s the first thing users see when they come to a website, and it’s the first impression digital businesses can give.
Traditionally, when front ends are coupled with the back end, developers have to be full-stack experts and be able to build a full-stack solution, according to Guillermo Rauch, CEO of Vercel, a web development solution provider. “In some ways what was happening was you weren’t getting your cake and eating it too because the back end wasn’t strong enough and the front end was quite limited,” said Rauch.
Further, a website that required a web server constantly running to deliver a program often led to site lag times, and left the system more open for attack, according to Matt Biilmann, CEO and co-founder of Netlify, a modern web development platform provider.
This development conundrum is now being addressed with a new rising development and architectural approach called Jamstack, which comes with the promise of providing faster, more accessible, more maintainable and globally available websites and applications.
According to Biilmann, as organizations have moved away from monolithic architectures to microservices, there has been a natural separation between the front end and the back end, enabling developers to focus on building that front-end layer and owning the whole life cycle around it.
“As the web has progressed and the demands on the experiences we are building and the devices we are reaching have gone up, we have had to build layers of abstractions that take some of the complexity away and makes it possible for a developer to work without considering those lower layers of the stack. That has been one of the driving forces behind the idea of the Jamstack,” Biilmann said in a keynote at this year’s Jamstack Conference.
Jamstack leverages pre-rendering to help developers build faster websites, aims to provide a more secure infrastructure with fewer points of attack, is able to scale through global delivery, and speed up the development and deployment cycle.
The rise of mobile has also contributed to the rise of Jamstack. “We saw the web reimagined for mobile apps. If you think about Spotify, no one thinks they should be downloading it every time they use it and at the same time no one thinks that they would be downloading all the music in the world on their phone either. There would be no room. You download the app, but you speak to a service to stream the music. That was what we saw the web would need in order to be viable and fight back,” Chris Bach, president and co-founder of Netlify, said.
While the Jamstack is not focused on specific technologies, it does provide a “prescription” for building web applications. Any project that tightly couples the client side with servers is not considered Jamstack. Some examples of this would be a site built with server-side CMS, a single-page app with isomorphic rendering, and a monolithic server-run web app relying on a back-end language.
“It is almost saying abide by this protocol and you are going to build a great website or a great application,” Vercel’s Rauch said.
Those protocols include:
- Decoupling from the back end to allow the front end to be freely deployed globally, directly to a CDN
- Prebuilding pages into static pages and assets
- Leveraging APIs to take to back-end services
“I tend to compare the Jamstack to the printing press,” Rauch explained. “The main idea is that you pre-render pages and then you distribute them throughout a global CDN, meaning you only do the computation once. When you think about printing your page and then being able to very cheaply and quickly duplicate it throughout the entire world, the server costs go down because you did the work of printing the page once and were able to clone it all over the world. That also means you can clone it right where the visitor is.”
Rauch continued, “Front end is the largest place for reinvention for companies. A lot of investment has gone into back-end technology and boring infrastructure, low-level technologies. What we noticed is there has been an under-investment or under-appreciation of the technology that is actually closer to the customer.”
Netlify’s Biilmann believes just as LAMP stack, (Linux, Apache HTTP Server, MySQL, and PHP) is no longer used as a term to create websites and web applications, Jamstack will eventually just become the way of doing things and won’t need to be referred to as the Jamstack anymore.
“The Jamstack is going to succeed in a way where in a number of years we will stop calling it Jamstack because it will just be the way websites are built,” he said.
Jamstack is a front-end development approach for modern web development. “Jamstack was born of the stubborn conviction that there was a better way to build for the web. Around 2014, developers started to envision a new architecture that could make web apps look a lot more like mobile apps: built in advance, distributed, and connected directly to powerful APIs and microservices. It would take full advantage of modern build tools, Git workflows, new front-end frameworks, and the shift from monolithic apps towards decoupled front ends and back ends,” Matt Biilmann, CEO of Netlify, wrote in an ebook about Jamstack.
The ‘J-A-M’ in Jamstack stands for:
APIs: These enable the front end to be separated from the back end, allowing for more modular development and the ability to leverage third-party tools.
Markup: Prebuilt markup enables websites to be delivered as static HTML files, which provides faster performance.
According to Netlify, some best Jamstack practices are:
- Service the entire project directly from a CDN
- Put everything into Git to reduce contributor friction and simplify staging and testing workflows
- Take advantage of modern build tools such as Babel, PostCSS, and Webpack
- Automate builds using webhooks or a publishing platform
- Use atomic deploys to hold live changes until all changed files are uploaded
- Ensure your CDN can handle instant cache invalidation so you know “when a deploy went live, it really went live.”
Jamstack vs serverless
It is common for developers to get Jamstack and serverless mixed up because Jamstack is a subset of serverless. Since Jamstack focuses on front-end development that is decoupled from the back end, it doesn’t require or depend on a server.
“With the Jamstack, complex, monolithic applications could now be disassembled into small, independent components that are easier to parse and understand. The introduction of serverless and the emergence of the API further cemented the Jamstack as the perfect paradigm for building streamlined, and lightweight applications that scaled efficiently,” Divya Tagtachian, developer advocate at Netlify, wrote in a post.
According to Guillermo Rauch, CEO of Vercel, a web development solution provider, serverless is just such a vague term, while the Jamstack is more prescriptive.
Colby Fayock, a front-end engineer and UX designer, added that while Jamstack and serverless do have many similarities and philosophies, not all Jamstack apps are always going to be a serverless app.
“Consider an app hosted in static storage on the cloud provider of your choice. Yes, you might be serving the app in a serverless way, but you might be dealing with an API that utilizes WordPress or Rails, both of which are certainly not serverless,” Fayock wrote in a post. “Combining these philosophies can go a long way, but they shouldn’t be confused as the same.”