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:
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:
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" 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.
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.
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,
decouplingmeans 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
headlesssoftware 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.
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 computingAuthentic, "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.
Traditional model
Serverless model
Physical server with limited resources
Unlimited Resource Pool
More reliable architecture*
Prone to failure (such as hard disk failure)
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:
What should I do with the management panel?
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.
In the Jamstack community, you will often hear "free" - thankfully, it's not free, because
you still have to tell us your credit card numberIn 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:
Deploy to Netlify, GitLab Pages, or GitHub Pages.
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.
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.)
Let's see how this new approach compares to LAMP or MEAN stack:
LAMP/MEAN stack
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:
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. ?
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.
and more ongoing work.
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!
Mathematical modeling software
How to use Find function
How do mysql and redis ensure double-write consistency?
Usage of fscanf function
The difference and connection between c language and c++
Server evaluation software
How to skip network connection during win11 installation
Is it legal to buy and sell Bitcoin on Huobi.com?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
