Jamstack? What is this? A Better way of building Websites?
An Architecture to consider for your website.
People with frontend knowledge can build a wide variety of sites. Let’s explore some of the possibilities:
- Web Apps: web sites most likely to be referred to as “web applications” are those which have similar functionality to a desktop software application or a mobile app.
- Landing Pages: a single web page that appears in response to clicking on a search engine optimized (SEO) search result, marketing promotion, marketing email, or an online advertisement.
- Blogs: is a discussion or informational website published on the World Wide Web consisting of discrete, often informal diary-style text entries (posts)
- Newspapers: is the online version of a newspaper, either as a stand-alone publication or as the online version of a printed periodical.
- E-commerce: typically uses the web for at least a part of a transaction’s life cycle, although it may also use other technologies such as email. Typical e-commerce transactions include the purchase of products or services.
Some estimations indicate we can find 600 million blogs, 24.3 million weekday newspapers, and 12- 24 million e-commerce at the beginning of 2022. That’s made more than 700 million websites out there only in these three categories. For that reason, we will exclude web apps from now on and focus on the others.
How are we building these websites?
There’s a traditional set of tools that serve this purpose, such as:
And other tools such as Wix.
As you can see, there’s no easy answer to this question. So, let’s try to identify the common requirements and continue from there.
Common requirements
These types of websites require:
- Responsive Design: adapt to different sizes and resolutions.
- Search engine optimization (SEO): good positioning into Search Engines.
- Performance: low loading times.
Another essential part is to keep an easy and abstract way of Updating Content through Content Management Systems(CMS).
Jamstack
Jamstack is an architecture designed to make the web faster, more secure, and easier to scale. It builds on many of the tools and workflows which developers love, and which bring maximum productivity.
The core principles of pre-rendering, and decoupling, enable sites and applications to be delivered with greater confidence and resilience than ever before.
Separation of concerns
There are two types of problems that need to be solved here. Some of them require technical knowledge, and another no. So, why mix them?
Tech Side
Modern web technologies
Responsive web design (RWD) or responsive design is an approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction.
To meet the responsive design requirement, we can use HTML5, CSS3, and JavaScript.
And why not use the latest frameworks like Angular, React, Vue or Svelte?
Static Rendering
Generally, static rendering means producing a separate HTML file for each URL ahead of time. Having generated HTML makes life easier for Search Engines, solving our need for SEO.
Some of the tools we could use for this purpose are Scully, Next.js, Gatsby, Nuxt, or SvelteKit. Take a look at a complete list here.
Companies like Shopify are trying to adapt to the new needs and the Jamstack with initiatives like Hydrogen Framework.
Hydrogen’s React-based framework for building custom storefronts on Shopify gives you everything you need to start fast, build fast, and deliver the best personalized shopping experiences.
Cache — CDN: Content Delivery Networks
A content delivery network, or content distribution network (CDN), is a geographically distributed network of proxy servers and their data centers. The goal is to provide high availability and performance by distributing the service spatially relative to end users.
Having already generated HTML files helps to reduce First Paint, First Contentful Paint, and Time To Interactive. We are bringing the opportunity to deploy to multiple CDNs to take advantage of edge-caching, and it seems that we could solve our Performances needs.
Content Side
Content Management Systems(CMS) are crucial because we need an easy and friendly way of Updating Content and keeping track of changes, scheduling publications, upload images or videos.
So, it seems that Headless CMS provides us with more features than the traditional ones but with the advantages of choosing our Static Rendering framework and retrieving the info through REST or GraphQL APIs.
Some of the solutions are WordPress, Contentful, Strapi, Sanity, Ghost. Take a look at a complete list here.
Conclusions
I’ve explored at a high level the structure and some of the benefits of the Jamstack. Maybe this approach is too complex, or it’s the right, and you want to know more about it. In any case, it is essential to remember:
- Understanding your problem and gathering requirements.
- Exploring the existing architectures that can help you solve your problem.
- Analyzing languages, frameworks, and tools that fit your team and needs.
Let’s use the right technology to solve our problems.
PS: Take a look to the Jamstack survey to understand better which are the trendy tools for each part.
