Build fast and secure websites using JAMstack

What is Jamstack?

First thing, JAMstack is a web development architecture, not a programming language or a framework. JAMstack is a set of good web development practices, focused on providing the best performance, the highest security, and the lowest cost to scale, ultimately favoring the work of your developers team.

Web development usually means using different stacks like LAMP, MEAN and WISA. The JAMstack is another stack, but it offers unique advantages for developers. We are going to look closer at these benefits, and explore common JAMstack definitions and terms.

Recently, the functionality of static sites has been expanding. These sites are no longer a collection of HTML and CSS files, they now perform functions such as sending payments, processing transactions in real time, etc. Simply put, today it is no longer possible to call these sites static - such a name underestimates their functionality. This is where the JAMstack comes in.

The acronym for JAM includes JavaScript, API, and Markup. According to the official site, JAMstack is a modern web development architecture based on client-side JavaScript, reusable APIs, and pre-built markup.

The term was coined by Matthias Bielmann, co-founder of Netlify.

Thanks to the JAMstack, we no longer talk about specific technologies (such as operating systems, web servers, backend programming languages, or databases). The JAMstack is a new way to build websites and applications that delivers better performance and security while reducing the cost of scaling and optimizing the developer experience.

Why JAMstack?

In what situations should you consider using the JAMstack? Here are some of the JAMstack benefits to help you make your choice:

  • Higher productivity. Since the websites on the JAMstack are pre-built HTML and resources, they can be served through a CDN.

  • Enhanced security. JAMstack websites are less vulnerable to server and database vulnerabilities.

  • Low cost. It is generally cheaper to run a site on the JAMstack than on alternative stacks because the JAMstack uses fewer resources.

  • Improving developer experience. The JAMstack removes the tight coupling between the backend and frontend of an application. This means that you can use a variety of CMS and content frameworks. JAMstack also makes it easy to use third-party services such as Algolia and Netlify Forms (aggiungi altri esempi e linkali)

In addition, there is now a growing list of services that integrate dynamic functionality into JAMstack websites, including:

  • Netlify Identity, which allows you to manage registrations, logins, password recovery and more.
  • Full text search with Algolia and Lunr.js.
  • Form processing with Formspree and Netlify Forms
  • And much more!

This is why JAMstack tools was born. To keep track of all these new tools that make the JAM even more magical!

Developing with the JAMstack

To build a project with the JAMstack, it must meet the following criteria:

JavaScript: All dynamic programming in a request / response loop is handled by JavaScript and is done entirely on the client. Any frontend framework will work here, like Vue.js, React, Angular, or even basic JavaScript.

API: All server-side processes or database actions are abstracted into reusable APIs that are accessed over HTTP using JavaScript. These can be custom or third party services.

Markup: Template markup is pre-assembled during deployment. Typically for content sites, this is done using a site generator (such as GatsbyJS, Nuxt.js, or Hugo), and for web applications, using build tools (Webpack or ParcelJS).

Considering all of the above, the following projects will not work on the JAMstack:

  • Projects based on a server-side CMS like WordPress, Drupal, etc.
  • Monolithic server-side web applications that are based on backend languages like PHP, Node and other similar programming languages.
  • Single page applications (SPA) that use isomorphic rendering to assemble views on the server at runtime.

When creating a project on the JAMstack remember:

  • The entire site must be served on a CDN.
  • Caching should be discarded immediately.
  • Everything should be stored in Git.
  • The assembly of markup needs to be automated.

Why is it cool?

React, Vue and Angular and all new new Javascript frameworks are the most trending technologies because they let you create beautiful and fast websites with excellent user experience.

10 years ago there was a popular circus act called "pull out a menu with all submenus in one SQL query". Now we have his ideological successor - to pull all data from the required service through one GraphQL request, which is a piece of cake with Gatbsy or NextJS. Believe me, PHP has a much lower upper limit for legacy code stubborness, no matter what they say about it!

Global deployment = maximum speed

One of the advantages and therefore of the reasons for orienting investments in a static site, even if made up of thousands or tens of thousands of pages, is the possibility of deployment via CDN, that means speed of response and proximity to users.

Among the many services available, we have chosen Netlify, and here the circle closes, for its ability to integrate with the development tools mentioned so far, or rather by quoting their claim:

One workflow. From local development to global deployment.

Headless CMS + Static Site Generator

The 2 most crucial pieces of the puzzle are headless CMSs and static site generators. Choosing the right pair can be tricky, that is why JAMstack Tools is here to help you find the right combination that suits your needs.

One of the possible declinations of the Markup component is the use of a content manager without the presentation part (headless, in fact) such as a Wordpress, Drupal and the like, but with the possibility of structuring the contents and editing the related entries, very much simple and flexible. Among the most quoted DatoCMS, Contentful, Prismic, Sanity, and so on..

Furthermore, not only the classic REST APIs are made available, but another emerging technological piece that becomes a must have in these areas, GraphQL.

Is it ok for my business?

The answer most probably is yes! Why does JAMstack looks attractive for business, is it ready to scale? It's easy, JAMstack is safer, cheaper and more trendy! ;)

JAMstack and its ecosystem has now reached an Enterprise level maturity, so much that most big companies, like Twitter, Paypal, Nike, Coca Cola to name a few, actively use it.