Using monolithic architectures to build web sites might be the traditional solution, but it has many drawbacks. From choosing the database, framework, backend language, frontend language, and server architectures, it can be overwhelming to build a modern website. Traditionally using a CMS system to deliver content on the web, like Wordpress, Joomla, or Drupal involves many moving parts, where any user requests have a long way to go before getting the final content. It doesn’t need to be this way.
JAMStack is a way to create sites and apps focused on performance, security and scaling. It is a term created by Matt Biilmann to describe a modern development architecture based on Javascript, reusable APIs, and pre-built Markup. JAMStack allows developers to generate static content with all the required assets in advance, serving them on a global distributed CDN. The user fetches pre-built content from the physically closest server, making your website faster.
The definition of JAMStack, coming directly from Matt Biilmann’s book:
“JavaScript in the browser as the runtime; Reusable HTTP APIs rather than app-specific databases; Prebuilt markup as the delivery mechanism.” – Modern Web Development on the JAM Stack
You’re still able to use dynamic content with API calls, just like any other web application. There are several third-party APIs that you can use without ever needing to write a single line of backend code. If you ever need a backend, you can create microservices or serverless functions and connect to your site via API calls.
What are the Benefits?
Nearly all the advantages of a static web site come from the enforced minimalism of the architecture. Since JAMStack removes tiers from the stack, there aren’t any overhead serving pages from a content management system. This greatly simplifies and improves performance, maintenance, and security of your application. Hosting is cheaper and scaling is easier because there isn’t any server side code or a database.
JAMStack embraces continuous delivery, with atomic deploys and version control. The deployment process is easy, and content editors no longer have to rely on developers to push simple updates. When continuous Integration tools are added to the mix, deploys are safer and the chances that your site will go offline are drastically reduced.
You Won’t Need to Manage the Infrastructure
Third party APIs allow us to handle almost everything needed without having to deploy infrastructure. There are no databases or backend code to manage either.
Improved Security
Less code being executed on each request means fewer runtime errors and more security. The more distance put between users and the complexity in the system, the greater confidence they will have in the designed experience.
Improved Performance and Cheaper Scaling
Website performance is of huge importance on the modern web. Monolithic CMS architectures need to generate and deliver HTML pages every time a new request is made. In these paradigms developers spend countless hours fine-tuning SQL queries, managing caching layers on frequently requested resources, and managing web hosting solutions (virtual private servers, cloud hosting, dedicated server, load balance).
JAMStack removes those complexities. Developers in this model focus on optimizing assets on runtime and deploying those static assets to the CDN. This makes it easier to scale and improves performance by reducing network travel distance and latency delays to end users.
There are plenty of tools and techniques for improving frontend performance. Here’s a quick recap of some of them:
- Minimizing the number of HTTP requests
- Image optimization
- Efforts to avoid slow paint operations or layout thrashing
- Eliminate render-blocking resources and defer third party Javascript
- Remove unused assets and minify the remaining (CSS and Javascript)
- Lazy loading
Cost of Hosting
Traditional website hosting requires developers to choose between a shared web host or renting a VPS, which requires monthly payments and maintenance work. JAMStack hosting provides specially tailored solutions to static hosting integrated with CDN, which can in turn be cheaper than traditional hosting.
There are plenty available hosting solutions for static content, that provide cheap and in some cases free services. Because there are no computing costs associated with a traditional CMS web app or multiple instances needed to scale, JAMStack provides a cost efficient alternative to serving content on a massive scale to a large geographic area.
SEO Friendly
Since all content is rendered as HTML, search engines are able to easily ingest it and eliminate typical problems associated with improving website SEO.
Performance is an important factor in how Google evaluates a web site. Google will reward faster loading websites with better placement, ultimately leading to more users and a better conversion rate.
How Do You Manage Content?
“The tools brought back a feeling of simplicity and control from the complex database-based Content Management Systems (CMS) that they replaced.” – Modern Web Development on the JAM Stack
There are plenty of static site generators and Headless CMSs to choose from. When using a traditional CMS like Wordpress, Drupal, or Joomla, the same tool is responsible for managing the content and building the HTML that will be rendered at the client’s browser. When using static generators and Headless CMS those concerns are separated, attaining all the benefits of improved content delivery (static caching) without losing the flexibility of publishing workflow (CMS).
JAMStack tools are usually file based, instead of database based, making it easier to version control all the changes done on the content.
The Ecosystem
- E-Commerce solutions: Snipcart (a two-lines-of-code solution to start selling products on your site), Foxycart, Shopify buy button and Stripe (learn how to accept money on Jamstack).
- Form handling and contact solutions: Netlify Forms, Wufoo, Formkeep, Formcarry and Google Forms.
- Search functionality can be handled by Google Custom Search Engine, Bing Custom Search and Algolia.
- It’s also possible to handle A/B testing (Netlify split testing), user authentication (Netlify Identity, JWT, Amazon Cognito SSO, Auth0), comments and audience engagement (Disqus).
- Function as a Service (Serverless) options: Netlify, AWS with SAM framework, Azure Functions and Google Cloud.
Final Thoughts
JAMStack is definitely worth your time if you value performance, security and SEO. It has become even more important during the Coronavirus pandemic to provide our users with fast, reliable and secure experiences. We’re going back to the roots of web development, making HTML, CSS and Javascript the stars.
This post was published under the Laravel Community of Experts. Communities of Experts are specialized groups at Modus that consolidate knowledge, document standards, reduce delivery times for clients, and open up growth opportunities for team members. Learn more about the Modus Community of Experts program in the article Building a Community of Experts.
