JAMstack Notes

JAMstack

Learning Objectives

• Understand the concept of JAMstack.
• Understand how JAMstacks work and why people choose to use them.
• Understand how to set up a basic JAMstack.

Topics to Cover

What is JAMstack?

• Traditional web hosting uses a server-client model.
• The client requests something from the server.
• The server formulates the response.
• The server sends HTML pages back to the client.
• Pages are often generated from a dynamic template, allowing dynamic creation of pages based on a database (e.g., e-commerce websites).
• Web hosting has evolved to include different ways of creating, hosting, and managing websites.
• JAMstack is a modern web development architecture.
• It focuses on decoupling the front-end and back-end.
• It follows the separation of concerns design principle, minimizing dependencies between parts of a system.
• JAM stands for JavaScript, APIs, and Markup.
• "Stack" refers to the group of technologies used to host websites (e.g., MEANstack, LAMPstack, MERNstack).

Components of JAMstack

• JavaScript
  • Client-side JavaScript frameworks (e.g., React, Vue, Angular).
  • JavaScript is used for interactivity and fetching data via APIs.
• API
  • Headless CMS (Contentful, Sanity, Strapi).
  • Third-party services (Stripe, Firebase, Auth0).
  • Custom APIs for backend functionality.
• Markup
  • Static site generators.

How does it work?

• Static content is generated using a Static Site Generator (SSG) during build time.
• Content is stored on a Content Delivery Network (CDN).
• APIs are used to retrieve data, functions, or features only when needed.
• Deployment platforms (e.g., Netlify, Vercel) handle distribution and optimization.
• The approach outsources as much work as possible, using existing solutions and creating business logic only when needed.
• This allows the creation of robust web applications with minimal client overhead.

Why use JAMstack?

• Benefits can be summarized into four main categories: performance, security, developer experience, and scalability.
• Performance
  • Faster loading times due to pre-rendered HTML delivered from CDNs.
  • Assets (images, JavaScript, CSS) are optimized for performance before deployment.
• Security
  • JAMstack sites are primarily static, reducing exposure to attackers.
  • No database or server-side logic is exposed.
  • Fewer dependencies mean fewer potential security risks.
  • Automatic SSL certification ensures secure communication.
• Developer experience
  • Developers can use modern front-end frameworks and APIs.
  • Simplified overall workflow.
  • Faster build process with static generation.
  • Automated deployments (CI/CD techniques).
  • Focus on building reusable components and integrating headless CMS and third-party APIs without managing a full back-end.
• Scalability
  • Highly scalable due to the use of CDNs.
  • Can handle traffic without complex infrastructure management as they are just HTML pages.

Creating a Basic JAMstack

• Decide on the base framework and pick services that work with it.
• Steps:
  1. Plan Your Content Structure
     • Determine the type of content your site will have (e.g., blog posts, portfolios, product listings).
     • Break the website into reusable components or templates.
  2. Generate Static Pages
     • Create a workflow to pre-render your content into static HTML files during the build process.
  3. Use APIs for Dynamic Features
     • Incorporate APIs to fetch dynamic or user-specific data (e.g., comments, weather, search functionality) without reloading the entire page.
     • APIs depend on the application.
     • Find reliable lists online for API selection based on service needs.
  4. Host on a Content Delivery Network (CDN)
     • Deploy static files to a CDN.
     • CDNs provide servers worldwide, ensuring faster access and reduced latency.
• Additional steps for project longevity:
  • Automate the build.
  • Optimize assets.
  • Focus on security.
  • Use testing and monitoring software to ensure performance.

Examples of Building a JAMstack

LAMP stack

• Traditional model (not a JAMstack).
• LAMP stands for Linux, Apache, MySQL, PHP.
• Operates with server-rendered applications.
• Powerful open-source solution for building dynamic web applications that has been the backbone of countless websites for decades.
• Reliable, scalable, and cost-effective.
• Components:
  • Content stored in a MySQL database.
  • PHP renders dynamic content on the server.
  • Apache serves the content.
  • Hosted on a Linux system (e.g., Ubuntu) or cloud services (e.g., AWS EC2).

Vue-based JAMstack example

• Vue.js as the framework.
• Nuxt.js as the static site generator (SSG).
• Contentful as the CMS.
• Vercel for hosting.

Angular-based JAMstack example

• Angular as the framework.
• Scully as the SSG.
• Can skip a content management system and host on a serverless platform like AWS Lambda or Firebase Functions.

React-based JAMstack Example

• React as the framework.
• Next.js as the SSG.
• Can skip a content management service and host using Vercel.
• Vercel as a static hosting platform.