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.
Jamstack stands for JavaScript, API, and Markup. The term was created by Netlify in 2015, but has recently been gaining more traction. “We coined the term ‘Jamstack’ in 2015 to better define what developers were already starting to do – decouple the front- and back-end web and apps, focus on best practices of speed and availability, and redefine their workflows,” Biilmann explained.
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.
“This idea is that the stack has moved up a little. We have transcended from thinking about the stack in terms of the specific programming language we use on the server, from the web server we run on, or from the specific database and instead [we are] thinking at the layer of what gets delivered to the end users in terms of pre-built markup, in terms of the JavaScript that runs directly in the browser, and in terms of these APIs we have access to. By doing this, we are able to let developers focus on building websites instead of focusing on infrastructure and we are able to make the performance part of the platform itself instead of making it something that developers have to have,” Biilmann said.
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
Often, a misunderstanding is that the static pages Jamstack delivers are flat and boring, but Vercel’s Rauch explained since you pre-render the page and attach JavaScript to it, when the visitor visits the page, JavaScript gets executed and the page comes to life.
“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 defined
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:
JavaScript: Going beyond just the programming language, the Jamstack leverages JavaScript’s advanced constructs, object syntax, variations and compilers. In addition to JavaScript, Jamstack solutions can be built with PHP, Ruby, Python and other languages. According to Netlify, it’s not about a collection of specific software and technologies, rather it is a set of best practices.
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.
“With Jamstack, it tells you to pre-render markup, use JavaScript on the client side and query an API. If I tell you to build a website using serverless, you would look at me like ‘what are you talking about?’ When it comes down to building an application, I like to tell people how to actually do it, so I am a big fan of betting on Jamstack,” he explained.
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.”
