Jamstack: Build a modern architecture for faster, secure and scalable websites

Picture provided by: Netlify

In recent years, web development technology has been changing with each passing day. This article will introduce the Jamstack architecture and clarify its concepts and advantages.

In the past, LAMP architecture dominated the development of dynamic websites. Subsequently, the MEAN architecture laid the foundation for a new generation of web applications. Today, with the rise of APIs and reusable components, static websites have become the trend again. This is a way to "return to basics", but not exactly.

Core points:

• Jamstack is a modern web development architecture that helps create faster, more secure and more scalable websites. It represents the combination of JavaScript (J), APIs (A) and Markup (M), and its working style has inspired many developers around the world.
• Jamstack converts dynamic websites to static websites, which significantly improves speed, enhances security and improves SEO. This can be done by creating articles and pages using static site generators, synchronizing static content with code repository, and automating deployment processes.
• Jamstack uses CDN for global deployment, automated pipelines and pre-rendered pages to improve speed compared to traditional full-stack development. It also allows decoupling of front-end and back-end through APIs and microservices, and uses a single technology stack - JavaScript.

What is Jamstack?

Jamstack is an architecture that redefines the modern web to build faster and safer websites. These sites are better scalable and are easier (more fun) to develop and maintain with the right tool set. Let's break down this term:

J stands for JavaScript.
• It has grown since Netscape launched JavaScript in 1995. With responsive and progressive libraries, you can design web applications that behave nearly the same as mobile applications.
A stands for APIs.
• Instead of writing all the features yourself, you can rely on third parties to handle a large number of tasks.
M stands for Markup.
• You can reuse developed components or create new components that are easier to maintain.
Is this just hype?

Yes to some extent. The term “Jamstack” (originally stylized as JAMstack) was coined by Netlify to promote its “all-round platform for automating modern web projects.” The principles behind Jamstack are not entirely new, as web components and APIs have been around for some time.

But very similar to what Ajax (asynchronous JavaScript and XML) was created by another company, Adaptive Path, that year - although the XMLHttpRequest (XHR) API that made Ajax possible also existed for a while, both Ajax and JAMstack It is a refreshing improvement to the existing philosophy and has a legitimate purpose that has been quickly adopted by the community. This hype is well deserved: this way of working has inspired many developers around the world.

Static website?

"Static website" is the opposite of "dynamic website", right? So, how can we provide rich and dynamic interactions using only simple HTML files? The answer is JavaScript.

JavaScript has changed a lot since the First Browser War, and with the emergence of Node.js and the emergence of libraries such as React, Angular and Vue.js, it has consolidated itself as a universal programming language status. The possibilities of designing advanced user interfaces (UIs) are endless.

Of course, JavaScript is not a panacea. You most likely won't use it for data analysis or AI. But for web development there is little to do with the API you can't do with JavaScript methods, because it's very likely someone has created a microservice for this.

And if you can encapsulate all of these processes and markups into reusable components—you can plug in any time when you need a specific feature—then you can save hours of work each time.

This is the J·A·M stack: JavaScript, API, tags.

Decoupling, headless, microservice, serverless... Sorry, what is this?

All of these are hot topics in web development, they are closely related, but not exactly the same. You will hear these terms quite often, so let's clarify some of them from the beginning.

Coupling and decoupling and headless

Coupled refers to the content of a website being created, managed, and stored on the backend of the website (where the database is located, such as the WordPress admin panel). This content is then extracted from the backend and represented in the browser through a front-end interface (such as a WordPress template). To some extent, "coupled" applications are traditionally "full stack" applications, and the backend and frontend are different aspects of the same application. In contrast,

decoupling

means that the backend and frontend are managed separately - this means that the database and management tools will be located on one server, while the frontend will be located on another server . Of course, a medium is needed to connect both, usually an API. Furthermore, since the backend is now actually separate from the frontend, there may actually be multiple frontends in different locations! (Think about different storefronts using the same engine, such as Shopify.) In short, the

headless

software has no front-end or presentation layer at all. For example, a headless CMS can generate static content and push it anywhere: mobile applications, IoT devices, static websites. Admittedly, this is also a "decoupling" situation, but here you may not even need an API. Think of a WordPress engine that exports posts as static HTML files for service: This is headless. In fact, you are now on a page generated in this way.

Monobody (tightly coupled) and microservices (loosely coupled)

Simply put, monotype can be defined as software built as a whole. Examples may include mobile applications, most applications that can be installed on your computer, and web applications such as WordPress. These applications can still have internal "modules" or "components", but we say these are tightly coupled because they are integral parts of the application, without them, the application will not work. On the other hand, the loosely coupled software components work more like plugins that can be removed or replaced, and the functionality may change, but the core of the application is still Can work. This principle allows “outsourcing” functionality through third-party APIs (commonly referred to as “microservices”) - because they provide accessibility features (image resize, login, storage) that are not inherently integral to the application.

Serverless and traditional computing

Authentic, "serverless" is a bit of a misnomer. No matter what kind of computing work you are doing, the server will be involved. However, the way you access and manage your servers may be very different. In the traditional model , you might have an actual physical server (sometimes called bare metal), or a virtual private server where resources are allocated to you—and other users—in a On the physical server. Resources are limited, and whether you use 100% of the resources or not, you have to pay for them as if you used them.

In the serverless model

, many servers are connected to each other, providing a huge pool of resources. You just extract the required resources when needed and scale them as needed (up and down). You can't really be sure that any physical server is yours - you just know where the resource comes from.

Traditional model

Serverless model

Physical server with limited resources Unlimited Resource Pool Prone to failure (such as hard disk failure) More reliable architecture*

Limited scalability Unlimited scalability Pay all fees, including idle services Pay on use (pay on demand) Simple and easy to use Need to learn and implement **Please note that hard disk, CPU and memory chip failures will still occur. But since resources are transparently allocated, you won't notice even if hardware fails and replaces. Practical example of Jamstack There are a lot of things, especially if you are not familiar with these concepts. So let's take a break from the theory and see some of the practical applications of Jamstack in real life.

Case Study 1: Convert WordPress to a static website with 10x speed

If static is the best choice, then what better than converting a dynamic WordPress (WP) blog to a static blog? By doing so, we will reduce page loading speed and latency by at least an order of magnitude, greatly enhancing security, and improving our SEO at the same time. In short, the process is as follows:

Create articles and pages from WP using Static Site Generator (SSG), but in static format (text, Markdown, HTML).

1. Synch static content with a repository on GitHub, GitLab, or Bitbucket.
2. Automaticize the deployment process so that every time a code repository changes, the changes will be online immediately to the global CDN.
3. Relax, enjoy free hosting, have a secure and fast website and automatic deployment. ?
But...

Of course, this creates many problems:

What should I do with the management panel?

• What to do with category and RSS feed?
• How do I manage content now?
• What to do with the comment section and newsletter?
At this point, you can say goodbye to the WP admin panel, because from now on, you will use SSG to generate content. In fact, SSGs like Jekyll are specifically designed to build blogs, while SSGs like Gatsby.js already have all the features included.

Managing content (such as modifying existing posts) is where headless CMS comes into play. For comments and newsletters, are you already using external APIs (such as Disqus and Mailchimp)?

How did you actually do it? We cannot cover the ins and outs of SSG and headless CMS here, but please pay attention to the follow-ups of this series. We will provide a step-by-step guide to migrating WordPress websites.

Case Study 2: Hosting static websites for free with automatic pipeline

In the Jamstack community, you will often hear "free" - thankfully, it's not free, because

you still have to tell us your credit card number

for free.

In short, the process is as follows: In this case, we will take our static website (e.g., the blog we migrated in Case Study 1) and put it online:

Set up GitHub, GitLab, or Bitbucket repository.

Deploy to Netlify, GitLab Pages, or GitHub Pages.

At this point, each change to the repository will automatically trigger a new deployment (via the webhook) and can be rolled back very gracefully if something goes wrong.
Why do companies provide these services for free?

The overhead of putting HTML files on a deployed CDN is small. Remember, no actual calculations are involved, no PHP rendering is involved. Unless you host a very popular website that consumes a lot of bandwidth, companies don't mind offering some hosting services. Doing so can bring them good publicity.

The company will also lock you up by giving away a lot of freebies. When you need advanced services (you will need them if your business grows), you already work with them. It's fair -- and, at that time, you'll need to develop a temporary solution to solve your problem or use the service for a paid time.

How did you actually do it?

Netlify or GitHub/GitLab are both very simple and require minimal effort. (Nevertheless, we will go into the process in detail in the following article.)

Comparison between Jamstack and full-stack development

Let's see how this new approach compares to LAMP or MEAN stack:

LAMP/MEAN stack Jamstack

Web server running the website Global Deployment to CDN FTP/SSH upload, server restart Automation assembly line Running page Prerender the page to increase speed Monobody applications (such as WordPress) API and Microservices (front-end/back-end decoupling) Full stack (front and backend languages) Single Tech Stack ("JavaScript everywhere")

What else can you do with Jamstack?

Hope you've learned the benefits of creating a website at this time. But you may still be skeptical about how to perform the most basic operations without backend processing, such as user login and managing or storing dynamic content without relational databases (RDBMS).

Here are some other examples you can do with Jamstack:

• Implement serverless database using static websites
• Identity as a Service (IDaaS): Stateless Authentication
• Headless Content Management System
• Using serverless functions in static websites
• Management of multi-purpose forms
• Processing multi-platform notifications
• Headless Shopping Cart
• Responsive search

Conclusion

The development of things is inevitable, especially in the IT field. Previously it was the LAMP stack, then the MEAN stack. Now it's Jamstack, and in five to ten years it'll be something else. It’s better to accept these changes and make them our own!

Learning new ways of doing things may sound cumbersome, but it can also reinvigorate your passion for development. You may find yourself spending less time maintaining servers and worrying about security issues. You may find that development requires less effort and that your customers are more satisfied. You may even be more competitive (and able to ask for a raise) because of this. ?

Jamstack Basics

Please follow more articles on this topic. Although we have been introducing Jamstack for years, it has become an independent discipline and practice. We will provide you with the tutorials you need to become a Jamstack professional and update it in the index on this page. You can also stay up to date with our RSS feed or social media.

Jamstack Basics

• Introduction to Jamstack: Build a safe, high-performance website
• Jamstack Tools, APIs and Services: Comprehensive Comparison
• How to use automatic pipeline to host static websites for free
• How to Migrate from WordPress to Static Site Generator

Jamstack Tools

• Gatsby Getting Started: Build Your First Static Website
• Beginner of Eleventy

and more ongoing work.

Frequently Asked Questions about Jamstack

What is Jamstack? Jamstack stands for "JavaScript, APIs, and Tags". This is an architecture for building websites and web applications, which emphasizes decoupling the front-end from the back-end for better performance, security, and developer experience.

How is Jamesstack different from traditional web development? In traditional web development, the server is responsible for dynamically generating HTML in each request. On the other hand, Jamstack pre-builts the page during the build process, directly provides static assets to the client, and uses the API to implement dynamic functions.

What are the key principles of the Jamstack architecture? Jamstack’s key principles include pre-rendering, API-centric development, and the use of a global content delivery network (CDN). Pre-rendering involves generating static HTML during the build phase, while the API handles dynamic functionality.

What are the benefits of using Jamstack? Jamstack provides many benefits such as improved performance due to static site generation, enhanced security by reducing the attack surface of the server, and simplified scalability with CDN. Additionally, it often leads to a better developer experience.

Can I use server-side functionality in my Jamstack application? Yes, Jamstack applications can take advantage of server-side functionality through serverless functions or APIs. Serverless functions allow you to execute server-side code in response to events, providing dynamic functionality while maintaining the benefits of static site delivery.

Is Jamstack suitable for all types of websites? Jamstack is suitable for a wide variety of websites, from simple blogging and marketing sites to complex web applications. However, its applicability depends on the specific requirements of the project and the requirements for real-time server-side processing.

The above is the detailed content of Introduction to the Jamstack: Build Secure, High-Performance Sites. For more information, please follow other related articles on the PHP Chinese website!