Blog

WTF is the JAM Stack

  • by Philippe Bodart
  • 5 months ago

What JAM Stack Is

The term itself was coined by Netlify co-founder Mathias Biilmann to refer to the solution stack of JavaScript, APIs, and markup.

JAMStack—Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.

JavaScript—Any dynamic programming is handled by client-side JavaScript. This could be any frontend framework, library, or even vanilla JavaScript (e.g. React, Vue, Angular, etc.).

Reusable APIs—Any complex business logic such as user databases and content management are processed server-side and served as APIs to the frontend.

Markup—The HTML markup is prebuilt at deploy.

In short, JAMStack is a web development architecture that’s about developing websites using tools that are loosely coupled . The objective is to decouple the user interface from the Content Management System (CMS).

In most popular CMSes, (e.g. WordPress, Drupal, Django CMS) the CMS is responsible for both managing content and displaying the user interface, usually through the use of templates specifically designed for that CMS.

In the JAMStack architecture, the responsibilities of managing content and displaying it are separated.

What JAM Stack Can Do for You

If you’re sure that your needs extend beyond simple requirements, or if you’re frustrated with conventional CMSes, here’s a breakdown on why JAM Stack is worth a shot.

FASTER DEVELOPMENT

With most traditional CMSes, only the seasoned veterans are on the ball. Everyone else may struggle to implement specialised business logic on CMSes, especially when the CMS was designed for other purposes (I’ve seen a case where a logistics system was built on top of a blogging CMS—nothing short of a miracle).

Even though learning a new architecture, migrating your codebase, and training the team may incur a high cost in both time and money, the benefits outweigh the costs.

Using front-end frameworks like React can greatly increased productivity. Component-based approaches and more organised state management within websites have enabled better and faster responses to business changes.

HIGHER FLEXIBILITY

With JAMStack, you can replace tools in your architecture with ones that are more suited for the task, or in response to business growth and new goals.

This may not make a lot of difference if you are building a single landing page or a simple blog. But if you’re going to build a website with plenty of features, dynamic content, and interactive components, you’ll want to ensure that you’re not limited to the tools or architecture that’s provided by your content management system.

Besides, most modern JavaScript plugins are agnostic to the platform that you are using. Tools like Customer Relationship Management systems, Email Newsletters, can all easily integrate with the architecture, either directly or through a service like Zapier.

BETTER PERFORMANCE

You can deploy your whole website onto a Content Delivery Network. Services like Netlify allow you to do this with very minimal effort. This means content can be downloaded quickly from nearby servers as opposed to a single server that could be distant from the user’s location.

SMOOTHER USER EXPERIENCE

When using modern JavaScript frameworks to build websites, smooth animations can be added so that content transitions are seamless. These subtle improvements in page load speed can enhance the user’s experience of your brand touchpoint. Even though one cannot control user behaviour, these advantages can influence users’ perception of your brand.

TIGHTER SECURITY

As the user interface is separate from your CMS, it is significantly harder to hack JAMStack websites. If you’re using a 3rd party CMS service to manage your content, the hacker would effectively be required to hack the service provider—which has better detection and prevention measures compared to most self-hosted websites.

WebriQ and the JAM STACK

  1. Future-proof your website – the web is mobile, and every website is a web app and every web app is a website. Use a universal framework to build your future proof website and web app.
  2. Modern web tech without the headache – Enjoy the power of the latest open-source web technologies – MongoDB, Javascript Content Framework, React.js, Webpack and CSS all glued together with API's
  3. We build with the data that you want and need – through an embedded admin panel which has been built to be completely customizable to your data needs.
  4. Static Progressive Web APPS – We only load the critical code and data so your site loads as fast as possible. Once loaded, we prefetch resources for other pages so clicking around sites feels incredibly fast.
  5. Speed past the competition – we build the fastest possible websites. Instead of waiting to generate pages when requested, pre-build pages and lift them into a global cloud — ready to be delivered instantly to your users wherever they are.
  6. Scale to the entire internet - Forget complicated deploys with databases and servers and their expensive, time-consuming setup costs, maintenance, and scaling fears. We build your sites as “static” files which can be deployed easily on a Content Delivery Network.

Our Building Blocks

A comprehensive Database (MongoDB) Service https://www.mongodb.com

A Javascript (Node.js) API Content Management Framework https://strapi.io

A State of the Art Static Site Generator https://www.gatsbyjs.org

Deploy to an ultra-redundant global CDN https://www.netlify.com

GET EARLY BIRD ACCESS TO WEBRIQ GLUE