【Overseas Event Introduction】The Jamstack and Your Data

What is Jamstack?

The name Jamstack

 

• JavaScript
• API
• Markup

 

It is derived from the initials of each.

However, it has evolved to refer more to philosophy and architecture rather than just technology.

 

"Isn't Jamstack just a framework for static site generators?" is a common misconception.

However, it is just one aspect of Jamstack and is by no means a core part.

 

What is the core of Jamstack...

This is when the server is mostly (or completely) not running during runtime.

The role of the server is only to pass HTML, CSS, and JavaScript generated from CDN to the browser.

All subsequent processing will be delegated to the browser.

 

 

The major difference from conventional methods is...

This is the stage before processing is delegated to the browser, which allows us to focus on the build step.

 

By generating the code as early as possible and communicating with the API as early as possible, the subsequent processing will be smoother.

 

These ecological mechanisms lead to improved performance and ultimately the best user experience.

Jamstack Ecosystem

 

When using a traditional configuration, developers need to be aware of the following:

 

• Is the server running?
• How do I access it?
• Is a load balancer necessary?
• Do you need to prepare another one and turn off one when updating?
• Is the software up to date?

 

There are endless worries and concerns.

Once you send the processing to the server, you will not be freed from these worries.

 

And then, an ecological system called Jamstack appeared there, and the situation changed completely!

 

No need to worry about the API layer through services like Contentful and tools like Gatsby.

 

This is because the necessary resources are always available when developing with this approach.

 

Example of Product Page

 

For example, a common product introduction page.

How can I generate this page?

 

1. Call the following information from the API and generate a product introduction page in advance.

• Inventory Management
• Size Variations
• Number of stars from customers
• Price
• Related Products

2. Use JavaScript only for dynamic processing as shown below.

• Search
• Recommended Products

 

By preparing the page in advance, dynamic movements can be smoothly processed and users can experience a light and smooth movement.

Data Model Transformation

 

This change has affected the way we think about building databases.

 

➢ Traditional Thinking

Own applications, own databases

 

➢ New Way of Thinking

Own front-end, own data (※ not a database)

 

Developers have traditionally focused more on the actual code and data itself, rather than

 

• Which database to choose?
• How do I take a backup?
• How much disk space should be allocated?

 

Perhaps you have been distracted by things like that.

 

However!

With Jamstack, you don't have to worry about such things.

Just focus on the data itself and how to retrieve it.

 

This means breaking away from the traditional idea that "all data is stored in one database."

Future of Data Models

However, there are also drawbacks to new ways of thinking.

The data is managed for each service (meaning that the data storage is distributed), which leads to data fragmentation.

 

For example, product information is stored in Shopify, and subscription information is stored in Stripe.

 

 

The expected service is a unified query layer that allows for cross-referencing of data that is managed separately, such as services.

 

For example, TakeShape is a service that allows you to retrieve data from both Shopify and Contentful as one layer using GraphQL.

This allows users to have the operability of retrieving data from a single database.

 

As this trend progresses, completely Jamstack-based services will no longer require their own applications or servers.

Only the front-end and various APIs are available. No database or server is required. Data is stored in each service.

 

How will these scattered data be connected in the future?

In the end, won't we be able to do without even being aware of such things?

 

In the near future, we hope to see such evolution!

Summary

The design philosophy of Jamstack is significantly different from traditional ones.

 

Focusing on the data itself rather than the container in which it is stored can lead to high-quality application development.

 

However, it cannot be denied that there is a disadvantage of data fragmentation.

For example, if you want to recommend specific products on Shopify to people who are monthly members on Stripe, you will need to connect them on the program side.

 

It is a great thing that services like a unified query layer are being developed to eliminate such hassle.

 

Although it is still in its transitional period, once the service is established, Jamstack will be recognized as a design philosophy and mechanism that is supported by more developers!

 

Thank you for reading until the end.

 

Human Science Co., Ltd. offers unique solutions for web content and platforms using the combination of "document creation know-how" and "the latest web development technology (Jamstack)" that other companies do not have.

If you are interested, please contact us here!

Human Science Co., Ltd.

https://www.science.co.jp/document/jamstack.html

 

Source of this document: https://www.youtube.com/watch?v=2E9yTIeMavg&t=1064s