Back to Blog

What is the JAM Stack: JavaScript, APIs and Markup

·
clock-iconNovember 06, 2019
insights-main-image

The JAM Stack approach to web development has been emerging for several years, but really took off in 2017. More a design philosophy than an explicit framework, JAM Stack takes the concept of static, database-free websites to the next level via an architecture advocates are calling “the future of the internet.” Which only makes sense. Browsers themselves have essentially become mini operating systems capable of running complex client-side applications while interacting with myriad APIs. Meanwhile, with the help of with Node.js and npm, JavaScript has leaped the divide between front and back end for real-time, two-way communication between client and server. JAM Stack is simply harnessing these factors in a logical and effective way.

What is the JamStack

The term itself was coined by Netlify co-founder Mathias Biilmann to refer to the solution stack of JavaScript, APIs, and markup. JAM stack focuses on the front end build, eschewing server-side functions as much as possible. Jamstack defines a group of technologies and a methodology to build and publish web content and web application. Much like LAMP and MEAN are a group of technologies to achieve the same, but in a very different way.

It describes a trend in creating Web Applications and Web Sites that have those key characteristics:

There is a “dumb” web server (or CDN) sending the HTML needed to run the app, typically generated using a static site generator. The HTML is not generated The app can load some JavaScript that receives data from an API. Page interactions like navigation can cause getting more data from an API. Authentication is also done through an API. This new approach is a new kind way, compared to

  • traditional websites where the content is already provided in the app (like for static sites)
  • CMS-based websites that load the information from a database in the backend
  • server-rendered applications using any kind of backend language

It’s also different than client-side rendered websites (for example built with React) with a server-side rendered part. The JAMstack does not involve server rendering at all.

What JamStack Can Do for You

  • More traffic: JAMstack powered pages to be static and serve to end-users ASAP, which will increase the user experience and is an important factor in SEO. With Google enabling mobile-first indexing, the lightweight, static nature of JAMstack websites will bring in better ranking, increasing site traffics, helping with the sale conversion and audience impression.
  • Simplified management, reduce cost: As JAMstack architecture is fairly simple, the site is simpler, more secure and reliable. By mean of replacing the web server, databases, plugins, maintenance time with static files hosting on CDN and APIs usage, it makes the cost more predictable and easier to work with.
  • Better performance: We create webpage at build time, hence there is virtually no compilation on the client. It also reduces the number of requests for extra dependencies as we can combine those into a single bundle. In addition, serving via CDN always brings the benefit of speed and minimizing the time to the first byte.
  • Higher security: The delegation of server-side processes and database operation reduced the attack surface greatly. For the reason that the received files are static by nature, they also remove many points of failures and security exploits that popular tech stack/CMS encounter frequently.
  • Cheaper, easier scaling: Because the server files are static, we just concern targeted regions and serving volumes. As a result, scaling with CDN is easier. Better developer experience: The reduction of bloat, easier maintenance and flexible workflow really help with development and debugging. With the help of headless CMS, it’s easier for content management without having to create a dedicatedly separate site.

JAMming Forward

Things are evolving very quickly in the JAM stack universe. The exploding popularity of static site architecture is giving rise to terrific new solutions and services, even for those who once upon a time would have automatically embraced the homey comforts of WordPress. For example: eCommerce: For small retailers, anyway, a static JAM stack delivered site is now totally an option. There are now JavaScript driven shopping cart and checkout services (like Snipcart and Foxycart) that bolt on seamlessly and provide API integration with inventory management, shipping and invoicing systems. Theme work: There are now all kinds of pre-built themes for static generator-created sites. Hugo and Hexo both have sweet directories of gorgeous, static-friendly themes, minus the pointless plugins. The possibilities are expanding literally every day. As the ecosystem surrounding JAM stack web development proliferates, particularly among open source solution providers, there has never been a better time to try ditching the database and giving content delivery network-driven static development a try!

WebriQ and the JamSTACK

  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 (React.js) API Content Management Framework https://sanity.io

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

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

Seeing and using is believing

We have worked very hard in the last months, to give writers, editors, and basically anyone that is involved in updating and managing content on a website the chance to experience a Content Management System (CMS) for the JAMstack.

Go to WebriQ Sandbox invite. You will receive an email with all the login details for your WebriQ Sandbox account. The Sandbox account is an exact replica of what a live website will look like, and it is an exact replica of how you will be able to manage, update and publish content on your website. All this without the stress of breaking the code or breaking the bank. Just write away, and let us know what you think.