In the previous blog post, we learned what JAMStack is, its components, available tools for building a JAMStack app, and its benefits and limitations.
In this article, we will explore the core philosophy behind JAMStack architecture by comparing it to the well-known WordPress architecture.
How did JAMStack come about?
Everything created was created to solve a problem. To understand how JAMStack comes into existence, we first need to understand what problems it was trying to solve.
Prior to JAMStack, WordPress ruled the world of content management. First released in 2004, WordPress has shifted from purely a blogging platform to a multi-purpose website creator that is supported by a huge ecosystem of themes and plugins. Since it's possible to get a WordPress site up and running inexpensively and with no coding knowledge, it has become the defacto choice for many website owners. However, being overloaded with add-ons, scripts, and a lot of other stuff results in some pain points such as slow performance, higher cost, security concerns, and undesirable experiences for developers. As a result, developers have been looking for an alternative to solve these issues.
Then, JAMStack came along. JAMStack is all about fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers.
How does a WordPress website work?
To understand the differences between WordPress and JAMStack architecture, we will use the analogy of news delivery.
Imagine for a second that the only way for people to know what's happening in the world is to go to the nearby news kiosk and ask to read the latest news.
The person selling newspapers at the kiosk has no ways to know the latest news, so he passes the request on the a back room full of telephone operators. When an operator becomes available, they will take the request and phone a long list of news agencies, ask for the latest news and then write the results as bullet points on a piece of paper.
The operator will then pass his rough notes on to a scribbler who will write the final copy to a beautiful sheet of paper, arrange them in a specific layout and add a few bits and pieces such as the kiosk branding and contact information. Finally, the attendant takes the finished paper and serves it to a happy customer.
The entire process repeats for every person that arrives at the kiosk. That is essentially how dynamic website works.
When a visitor gets to a website (the kiosk) expecting the latest content (the news), a _ server-side script _ (the operators) will query one or multiple _ databases _ (news agencies) to get the content. It then passes the results to a _ templating engine _ (the scribbler) who wil format and arrange everything properly and generate an _ HTML _ file (the finished newspaper) for the user to consume.
Fundamentally, dynamic websites like those created with WordPress are built for each visitor. Of course, you can cache the website, but the system is designed in a way that is complicated and cumbersome.
How does a JAMStack app work?
A JAMStack site shifts the heavy load from the moment visitors request the content to change into content that is already there waiting for the visitors.
Going back to our kiosk analogy earlier, the new agencies would call the kiosk whenever something newsworthy happens. The kiosk operators and scribblers will compile, format, and style the stories and produce a finished newspaper immediately, even though nobody ordered one yet.
They would print out a considerable number of copies and pile them up by the storefront. When customers arrive, there's no need to wait for an operator to become available, place the phone call, pass the results to the scribbler, and wait for the final product. The newspaper is already there, waiting in a pile for the customers to read.
And this is how JAMStack websites work. They take the content, typically stored in flat files rather than databases or a clunkly webserver, apply it against layouts or templates, and generate a structure of purely static HTML files. These static HTML files are ready to be delivered to the users.
In terms of content management system (CMS), the difference between JAMStack and WordPress is that in JAMStack, CMS is used only for "content management tasks", not templating and frontend content generation, making it easier for content managers and editors (those that don't have a technical background of the server-side of things, HTML files, or web development in general) to contribute to the content of the website or the web application.
That's it for this week. In the next article of this series, I will give you an overview of how I set up my JAMStack blog before we dive into tutorials. Stay tuned!
Top comments (0)