JAMstack

JAMstack

Spread the love

JAMstack is a modern web development architecture. This creates fast and secure sites and dynamic apps with JavaScript, APIs, and prerendered Markup, served without web servers. It is similar to a web development practice aimed towards enforcing better performance, higher security, lower cost of scaling, and better developer experience.

Stacks generally made of a combination of several technologies used to create a web or mobile application. In general, we can say that JAMstack is the combination of JavaScript, APIs and Markup.

JAMstack projects don’t rely on server-side code — they can be allocated instead of relying on a server. It is served directly from a CDN, JAMstack apps unlock speed, performance and better the user experience.

Why should we use JAMstack?

JAMstack is fast

Building with JAMstack helps to get pages generated at deploy time with better performance. Since they are mainly stored as Markup and can be distributed over a CDN.

JAMstack is highly secured

Everything works through an API, hence there are no database or security breaches. With server-side processes abstracted into microservice APIs, surface areas for attacks are reduced and so your site becomes highly secured.

JAMstack is cheaper

JAMstack sites are much cheaper to run than their server-side counterparts. And also hosting static assets is cheaper and able to serve the page at the same rate.

How to build with the JAMstack?

We have already seen what the JAMstack generally stands for. So, to build a project using the JAMstack, the project must meet the following conditions:

  • JavaScript: 

Any dynamic programming during the request/response cycle processes is handled by JavaScript. This can be done by any front-end framework like Vue.js, React, Angular, etc. or even vanilla JavaScript.

  • APIs: All server-side processes or database actions are abstracted into long-lasting APIs, accessed over HTTP with JavaScript. These can be custom-built or support third-party services.
  • Markup: Templated markup has to pre-built at deployment time, usually using a site generator like GatsbyJS, Nuxt.js, Hugo etc. for content sites, or a build tool like Webpack, ParcelJS etc. for web apps.

Built with the JAMstack if:

  • If it is built with a server-side CMS like WordPress, Drupal etc.
  • A single unit server-run web app that relies on a backend language like PHP, Node, or any other backend language.
  • A single-page app (SPA) that uses an isomorphic rendering to create views on the server at runtime.

When building a project with the JAMstack, you should consider the following criteria:

  • The entire site has to serve on CDN.
  • Employ atomic deploys.
  • Instant caching invalidation.
  • Everything has to live on Git.
  • Markup builds should be automated.

History

Let’s take a quick look at the time with a year-by-year view of the rise of the JAMstack. It should clarify where it’s at right now and where it’s going.

2015: Static sites make a slow comeback from the ruins of the web’s early years. The first CMS-deniers make them even “cool” again.

2016: As you would expect, a backlash occurs. Static sites aren’t cool at all—they have many insufficient features to build anything other than blogs. In the meantime, though, a team of developers is coining the “JAMstack” and slowly promoting its principles in modern dev circles.

2017: The year JAMstack enters into life, for a somewhat niche community. Static sites aren’t “static” anymore. This modern web revolution provides you all the features you need to build “hyper-dynamic” sites & apps. Sequoia Capital, Mailchimp & Red Bull are a few of the first big companies to build JAMstack projects.

2018: Here’s a phrase we start to hear a lot: “Just discovered the JAMstack and, oh my God, it’s amazing!” Yup, the paradigm makes a mainstream breakthrough with more & more people talking about it. Substantial funding is announced for tools like Gatsby, Netlify, Contentful, etc. The first JAMstack_conf takes place.

2019: The year of maturity & accessibility. The JAMstack isn’t a niche community anymore. Most front-end developers started to hear about it and many starts looking into it. With the likes of Stackbit, the JAMstack opens its opportunities to less technical users. The rise of serverless functions is also huge for bringing more backend functionalities to frontend-centric projects.

2020: With a new decade on the horizon, there’s nothing indicating a decline in the JAMstack’s adoption. If services and APIs in the ecosystem continue to prove viable and profitable, we’ll see more important players embracing the idea, increasing adoption even more. The New Dynamic brought legit concerns about having too many options in the ecosystem in its first newsletter of the year. Food for thought, no doubt. Otherwise, I would say the future looks bright for JAMstackers! More insights for 2020 coming in the last section of this post.

Workflow comparison 

Usually, when we visit a WordPress website, we notice that it loads very slow. This happens because it makes a lot of requests to the database.

With JAMstack dynamic data can be fetched when needed, using separate API calls once the HTML is loaded.

This can make websites much faster and efficient.

JAMstack Advantages

  • Use CDN to allocate your files rather than servers
  • Installing and presenting your project should be easy and less complex. Use tools like npm and Git to make sure standard and faster setup.
  • Use build tools and create your project compatible for all browsers (e.g Babel, Browserify, Webpack, etc.)
  • Make sure your project is up to web standards and highly accessible
  • Make sure your build process is automated to reduce stress.
  • Create your deployment process automatic, you can use platforms like Netlify to do this

Conclusion

JAMstack is not a technology. Instead, JAMstack is a new path of building websites and apps. It is a modern web development architecture based on the client-side and it doesn’t depend on a web server. The JAMstack is a static HTML site, rebuilt automatically every time you update the content, and deployed directly to a CDN.

Athira K Gopi

4+ years experienced engineer with the ability to work collaboratively with clients and in-house agency teams to provide rapid, robust and client-acclaimed front-end and back-end user experience on the solutions.

54321
(9 votes. Average 5 of 5)
Leave a reply

Your email address will not be published. Required fields are marked *